jQuery .val() not working on hidden fields added with .html()

Question

I have an html form that loads the main portion of a document, postload an ajax request goes off and gets an xml file that is parsed out to create 'sub' forms which can be updated/submitted. This is the form 'preload'

<html>
   <head>
    <script src="jquery.js">
    <script src="jquery.forms.js">
    <script>
      $(document).ready(function () {
      //Script to execute when form is loaded       
      loadOrder(unid);
      });
    </script>
   </head>
   <body>
     <form id="mainform" name="main" method="post" action="whatever">
       <input type="hidden" id="unid" name="unid" value="123" />        
     </form>
     <div id="orderForms">    
     </div>
   </body>
</html>

Here is the form post load :

<html>...
    <div id="orderForms"> 
       <form id="order_1" name="order" method="post" action="whatever">
         <input type="hidden" id="pid_1" name="pid" value="123" />
         <input type="hidden" id="unid_1" name="unid" value="456" />
       </form>
       <form id="order_2" name="order" method="post" action="whatever">
         <input type="hidden" id="pid_2" name="pid" value="123" />
         <input type="hidden" id="unid_2" name="unid" value="789" />
       </form>
   </div>
  </body>
</html>

JS code:

function loadOrders(unid){
   var rUrl = "url";
   $.ajax({type: "GET", url: rUrl, async: true, cache: false, dataType: "xml", success: postLoadOrders}) ;
}

function postLoadOrders(xml){
   nxtOrder = 1;
   var html="";
   $('order',xml).each(function() {
  //  parses the xml and generates the html to be inserted into the <div>
   });  
   $("#orderForms").html(html);
}

This all works, the main form loads, the 'hidden' forms in the <div> are written in. The trouble happens when I put a button on the main form that does this...

function submitOrder(){
   $("#pid_1").val('555');
   $("#order_1").formSerialize();
   $("#order_1").ajaxSubmit();
}

If I alert($("#pid_1").val()) prior to the .val('555') it shows the original value, when I alert after, it shows the new value, however it submits the original value, and if I open the html in firebug the value isn't showing as changing.

If I put a hidden field into the main form, that exists when the document loads and change its value, not only does the new value post, it also shows as being changed when examining the source.

Any ideas?

Format your code plase, this is very hard to read. And only include relevant parts. — Arg0n, Nov 26 '15 at 18:34
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — madalinivascu, Nov 26 '15 at 18:41

score 0 · Answer 1 · answered Nov 26 '15 at 18:57

0

$('order',xml).each(function() {
});

this is not Object in JQuery

You can edit:

$('[name=order]',xml).each(function() {
});

answered Nov 26 '15 at 18:57

Mr Ken

319
1
17

acutally 'order' is an element in returned xml document ie: 123 456 123 678 – Jeremy Nov 26 '15 at 19:02
@Jeremy you can console.log(xml) to check before use – Mr Ken Nov 26 '15 at 19:19
That block of code actually works. The problem exists with the html that is generated by the parsing of the xml. I can use $("#pid_1").val() to change and retrieve the value, however when submitted it is not the changed value but the original value that gets posted. – Jeremy Nov 26 '15 at 19:59
@Jeremy , use $("#pid_1").attr("value", new_value); to set new value – Mr Ken Nov 27 '15 at 05:34
I tried that, as well, same result. Code sees that the value has changed but it isn't reflecting in the source or on post. Beginning to wonder if it is a jQuery issue. – Jeremy Nov 27 '15 at 12:51
@Jeremy if you can, add my skype (ngvcanh.ken), i will watch it – Mr Ken Nov 29 '15 at 15:20
I found the issue, turned out to be on the server side processing. The original record was being cached. – Jeremy Nov 30 '15 at 15:34

jQuery .val() not working on hidden fields added with .html()

1 Answers1