thelolcat thelolcat - 5 months ago 8
jQuery Question

Form HTML not getting updated.

Here's something weird

<form>
<input type="text" id="test" value="abc" />
<input type="submit" />
</form>

<script>
$('form').submit(function(ev){
ev.preventDefault();
alert($(this).html());
});
</script>


http://jsfiddle.net/F6XvW/

I change the value of the input field, then click submit to get the HTML, but the value is not updated inside the HTML? What's up with that? How to get the updated HTML?

Answer

What the user inputs is never changing the HTML. It's a form value which will be sent as a parameter to the server.

See here: your jsfiddle updated:

<form>
    <input type="text" id="test" placeholder="abc" />
    <input type="submit" />
</form>
<script>
$('form').submit(function(ev){
   ev.preventDefault();
   alert('inputted value = ' + $(this).find('input[type=text]').val()); 
});
</script>

If you really want to update the DOM, you have to manually set it: http://jsfiddle.net/F6XvW/3/

JS

$('form').submit(function(ev){
   ev.preventDefault();
   $('#test').attr("value", $('#test').val());
   alert('changed input value to: ' + $(this).find('input[type=text]').val()); 
});
Comments