JulianJ JulianJ - 1 month ago 12
HTML Question

How to have a submit button outside of a form with jquery .on()

i want to hide a form and have the submit button visible but outside of the form tags. i understand how to do this with jquery and have made a fiddle here.
The problem i have is that i am using jquery .on() to render certain elements on my page and i can't figure out how to submit the form when using the .on() syntax.

if i put the submit button outside of the form tags on the example below jquery does not submit anything.

My Form

<form id="myForm" class="myForm" action="" method="post" style="">
<input type="hidden" name="name" value="name">
</form>

<button type="submit" class=""></button>


My jquery

$(document).on('submit', '.myForm', '.results', function(e) {
var new_data = $(this).closest('div').attr('class')

e.preventDefault();

$.ajax({
url: 'add_tag.php',
type: 'POST',
dataType: 'html',
data: $(this).serialize(),
success: function(response) {

$('.' + new_data).hide().fadeIn("slow").append('<td>' + response + '</td>');

}
});

return false;
});

Sam Sam
Answer

One way that I did this recently was I used a label with a for and styled it like a button.

<form style="display: none" ...>
  ...

  <input type="submit" id="submit">
</form>

<label class="button" for="submit">Submit</label>

Since clicking the element with the for activates the input with the corresponding id, it works the same way as clicking a submit that's inside of the form. This takes care of your submit problem.