0

I have made a form template on page(div with class info) as I do not want to fetch this form via ajax with values changed. I have two buttons with different data id & data email. On button click i fetch these two data and change the info div values. Then that divs content is fetched and shown in demo div. Everytime it is showing blank values. what's the problem?

HTML

<button class="btn" data-id="1" data-email="a@gmail.com">First Button</button>
<button class="btn" data-id="2" data-email="b@gmail.com">Second Button</button>
    <div class="info">
       <input type="text" id="idz" />
       <input type="text" id="email" />
    </div>

<div class="demo"> </div>

Jquery

$(document).on('click', '.btn', function () {
   var idz = $(this).data('id');
   var email = $(this).data('email');

   $('#idz').val(idz);
   $('#email').val(email);

   var data = $('.info').html();
   $('.demo').html(data);
});

Jsfiddle: http://jsfiddle.net/4D29C/

Ace
  • 841
  • 9
  • 23
  • 1
    See the answer to this question http://stackoverflow.com/questions/7986026/html-input-is-not-updating-value-attribute-on-change – Justin Bicknell Oct 21 '13 at 18:59

1 Answers1

1

This is because the value attribute isn't update, the live value is stored in the DOM's value property. You would need to update the attribute to get the desired effect:

   $('#idz').val(idz).attr('value',idz);
   $('#email').val(email).attr('value',email);

See http://jsfiddle.net/4D29C/1/

Justin Bicknell
  • 4,804
  • 18
  • 26