Home/ Questions/Q 778989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:51:19+00:00

inside a jquery method (on a click event of a button) i have the

  • 0

inside a jquery method (on a click event of a button) i have the following code:

    $(selector).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> ");

it seems to work on the screen, but the button click “submitCopyFood” the event was firing but it wasn’t submitting the form. When i click “View Selection Source” in firefox, i see the issue. All i see is this:

   <input name="Id" value="128" type="hidden"><input class="very-small-input" name="Quantity" value="1" type="text"> 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 class="submitCopyFood" value="Add" type="button">  or <div style="display: inline;" class="CancelCopy">Cancel</div>

Its like i never added the form anywhere. Is there any reason why i dont see the:

<form action='/Tracker/CopyFood' method='post'>

or the

</form>

in the source code inside the selected source. Is there something special that i need to do here?

Updated:

here is the button click event. To be clear, this event fires fine but this line fails below:

var myForm = parentDiv.children('form');

because myForm is empty (as there is no form element)

Here is the full click event:

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

    debugger;

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

    $.post(myForm.attr('action'), myForm.serialize(), function(data) {
        debugger;
        parentDiv.attr("fromInner", "1");
        parentDiv.attr("myset", "0");
        parentDiv.html("<img  BORDER=0 src='../../images/copy1.png' />");

    });
});

});

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0