ansaurus

Question

form element not showing up after adding in through jquery

Answer 1

+2 A:

If you are adding the form inside another form, that is invalid. The browser will try to correct the code (in different ways depending on the browser), one way is to remove the form tag.

If you want the button to do something when you click it, you have to set an onclick event for it. If you want the button to submit the form, you should use an input with type="submit" instead.

Update:

Are you really really sure that there isn't a form surrounding the element where you try to add the form? I can easily replicate the exact behaviour by putting a form around the element where the form is added. If the outer form isn't there, the form is added just fine and shows up when viewing the selection source.

The parent method only goes one level, so the parentDiv variable is a jQuery object with zero elements as the parent element of the button is the form. You would want to use the parents or closest method to find the element.

Working example:

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.1.js"></script>

<script type="text/javascript">

$(function(){

  var id = 'asdf';
  $('.copyFoodInstance').html("<form action='/Tracker/CopyFood' method='post'><input type='hidden' name='Id' value=" + id + "><input class='very-small-input' type='text' name='Quantity' value='1' /> for <select name='Date'><option value='Today'>Today</option><option value='Yesterday'>Yesterday</option></select><select name='Meal'><option value='Breakfast'>Breakfast</option><option value='Lunch'>Lunch</option><option value='Dinner'>Dinner</option><option value='Evening Snack'>Evening Snack</option></select><input type='button' class='submitCopyFood' value='Add'> or <div style='display:inline' class='CancelCopy'>Cancel</div></form> ");

  $('.submitCopyFood').live('click', function() {

    var parentDiv = $(this).closest('.copyFoodInstance');
    var myForm = parentDiv.children('form');

    alert(parentDiv.length); // shows 1
    alert(myForm.length); // shows 1

  });

});

</script>

</head>
<body>

<div class="copyFoodInstance"></div>

</body>
</html>

Guffa 2010-05-13 11:57:21

The first part of this is incorrect, he's using Firefox's View **Selection** Source, which does show current elements.

Nick Craver 2010-05-13 12:00:23

@Guffa - i am not adding a form inside another form. Im not sure what in my question indicated that

ooo 2010-05-13 12:02:05

@Nick: I already removed that.

Guffa 2010-05-13 12:16:07

@Guffa - Not at the time on my comment you hadn't...also, wasn't my downvote :) +1 for the updated answer though.

Nick Craver 2010-05-13 12:17:34

@ooo: The fact that the form wasn't added indicated that there was something keeping ot from being added. I'll have a look at what you added to the question...

Guffa 2010-05-13 12:27:02

@Guffa - oh sh*t, i just realized that i think there is an outer form. i should have tripled checked prior to pushing back on my previous comment, apologies Guffa. I have accepted your answer

ooo 2010-05-13 12:56:28

ansaurus

tags:

views:

answers:

form element not showing up after adding in through jquery

Updated:

Update:

related questions