Search code examples
javascriptif-statementwildcardonchange

Getting a value to mirror another value

I am trying to make it so field2 will display whatever value is input in field1. I am using an onchange event to do this.

field1 is an input text box so if field1= "Mary", field2 should read "Mary".

If field1 says "Peanut Butter and Jelly" field2 should say "Peanut Butter and Jelly".

If field1 is left blank, field2 should be left blank.

Right now I have a code that makes field2 replicate field1, but I have to give it a set of predetermined values where I want to have the code function so that users are not limited to options I supply for giving input.

this works tight now:

if (filed1.value=='Hello') {filed2.value='Hello'} else {filed2.value='';}

what I need it to say is

if (field1.value=='anything at all') {filed2.value='whatever was put in filed1'}

else {field2.value='';}

Solution

  • You should not need an if-statement. Instead, you can use the onchange or keyup events of field1 to set the value of field2. Here is an example site that uses jQuery. Let me know if you would like me to make it standard Javascript.

    Html:

    <!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="Content/Site.css" type="text/css" />
    </head>
    <body>
        <div class="container">
            <h1>Text2 mirrors Text1</h1>
            <p>Enter some text in Text1 and Text2 will mirror the input.</p>
            <h3>Text1</h3>
            <input type="text" id="txt1" />
            <h3>Text2</h3>
            <input type="text" id="txt2" />
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="Scripts/Site.js"></script>
    </body>
</html>

    Css file (just because, and not necessary, you can remove it, just make sure that you remove the reference in the html above).

    /*Site.css*/

html {
    
}

body {
    
}

.container {
    width: 80%;
    margin: auto;
}

    This is the most important part - updating the value of field2 to match the value of field1. This is the Javascript file that is referenced at the bottom of the body tag element in the html file.

    // Site.js

$(document).ready(function() {
    // $("#txt1").change(function() {
    //  $("#txt2").val(this.value);
    // });

    $("#txt1").keyup(function() {
        $("#txt2").val(this.value);
    });
});

    I have the change event function commented out and the keyup function active. This will give you a real-time update on the values. You can change it to use the onchange event using the first function and commenting out the keyup function if you would like, but it will not update field 2 until after field1 loses focus.

    I'm not certain why it is that you are using an if-statement to check the value of field1. That shouldn't be necessary, however, if there is a specific reason why you are wanting to then let me know and I will update my answer.

    EDIT

    Here is the javascript page using only Javascript:

        // document.getElementById('txt1').onchange = function() {
    //  document.getElementById('txt2').value = this.value;
    // }

    document.getElementById('txt1').onkeyup = function() {
        document.getElementById('txt2').value = this.value;

    These are the same javascript functions only without jQuery. The commented out function will only change the text of field2 after field1 has lost focus and the the second (uncommented function) will update field2 on every keystroke of field1.

    Please let me know if you have any other questions.