How to call innerhtml after modifying it in firefox

Question

Hi,

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

The first anonymous function is not being executed...what does it do?

if you want to execute it, add two parens to the end like

})();

Sorry if it does not have to do with anythig, but I don't understand it

Answer 2

??? first you cannot have two html elements with the same ID name if you want jquery/javascript to find or manipulate the element or its contents. Are you trying to get the Form element values? Grabbing a block of innerHTML will not help you read the values.

Answer 3

Hi Guys,

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" />