Question

I have below code in html

<div id="divTest">
        Hello
        <input type="text" id="txtID"/>        <input type="text" id="txtID"/>        
    </div>
    <input type="button" value="Click" />

and I am trying to modifiy innerhtml to get the value of all the controls in my form on runtime in firefox.

please see the javascript code below:

<script type="text/javascript">   

(function($)
 {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,textarea,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $(":radio,:checkbox", this).each(function() {
      // im not really even sure you need to do this for "checked"
      // but what the heck, better safe than sorry
      if (this.checked) this.setAttribute('checked', 'checked');
      else this.removeAttribute('checked');
    });
    $("option", this).each(function() {
      // also not sure, but, better safe...
      if (this.selected) this.setAttribute('selected', 'selected');
      else this.removeAttribute('selected');
    });
    return oldHTML.apply(this);
  };

  //optional to override real .html() if you want
  $.fn.html = $.fn.formhtml;
});
$(document).ready(function() 
{ 
    $('input[type=button]').click(function() {
        alert($('#divTest').html()); 
    });
});
</script>

the above function is not working for me. I want to call innerHtml of div id “divTest”
after it’s control value is assigned to it. please have look into above code and let me know what I need to modify in above code

Answer 1

I solved my problem by using below jQuery

 <script type="text/javascript">   



$(document).ready(function() 



 {

  var oldHTML = $.fn.html;



  $.fn.formhtml = function() {

    if (arguments.length) return oldHTML.apply(this,arguments);

    $("input,textarea,button", this).each(function() {

      this.setAttribute('value',this.value);

    });

    $(":radio,:checkbox", this).each(function() 

    {



      if (this.checked) this.setAttribute('checked', 'checked');

      else this.removeAttribute('checked');

    });

    $("option", this).each(function() 

    {      

      if (this.selected) this.setAttribute('selected', 'selected');

      else this.removeAttribute('selected');

    });

    return oldHTML.apply(this);

  }; 

  $.fn.html = $.fn.formhtml;

});

$(document).ready(function() 

{ 

    $('input[type=button]').click(function() {

        alert($('#divTest').html());

    });

});

    </script>

and the html was as below:

<div id="divTest">

    Hello

    <input type="text" id="txtID" />

    <input type="text" id="txtID" />

    <input type="text" />

    <input type="text" id="Text1" />

    <input type="text" id="Text1" />

    <input type="text" />

    <input type="text" />

    <input type="text" />

    <input type="text" id="Text5" />

    <input type="text" id="Text6" />

</div>

<input type="button" value="Click" />