two way data bind using jquery

Question

We need to bind such like two way binding . When i change value at also display value in content using Javascript or Jquery..

function myFunction() {
  var val = '';
  val = document.getElementById("text1").value;
  document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + val;
}

<p>Select a new car from the list.</p>
<input type='text' id="text1" onKeyup="myFunction()">

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

If you any idea then help me !!! Thank you in advance

have you heard about KnockoutJS or AngularJS? Those are better options for your case — Paritosh
– Paritosh, Commented Sep 22, 2016 at 19:14
@Paritosh Thanks for Give me suggestion but, i need in jquery or javascript. — VjyV
– VjyV, Commented Sep 22, 2016 at 19:42

Curtis · Accepted Answer · 2016-09-22 19:17:39Z

1

Rather than appending the value of demo you should just be replacing the value with the value in the textbox.

document.getElementById("demo").innerHTML = document.getElementById("text1").value;

https://jsfiddle.net/03gkm4wh/

Also:

onKeyup attribute should be lowercase - onkeyup.

mySelect isn't referenced.

answered Sep 22, 2016 at 19:17

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rphv · Accepted Answer · 2016-09-22 19:18:23Z

1

Something like this?

function myFunction() {
    var val = document.getElementById("text1").value;
    document.getElementById("demo").innerHTML = val;
}

<p>Enter data:</p>
<input type='text' id="text1" onKeyup="myFunction()">

<p>When you input new data, a function is triggered which updates the HTML.</p>

HTML Output:
<hr>
<p id="demo"></p>

answered Sep 22, 2016 at 19:18

rphv

5,5373 gold badges32 silver badges48 bronze badges

1 Comment

Barmar Over a year ago

You should explain what was wrong with the original code, and how you fixed it.

Collectives™ on Stack Overflow

two way data bind using jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related