I really don't know if it's okay to add one form
inside anotherform
<div class="container">
<form id="form" name="form" action="#">
<div>
<!-- Datos que se enviaran por medio del form principal -->
</div>
<div>
<!-- Resultado de ajax que se enviaran por medio del form principal -->
<form id="tck" method="POST">
<input type="text" name="ticket" maxlength="10">
<button type="submit">ticket</button>
</form>
</div>
</form>
</div>
But it is necessary to do it that way, because it is part of the design, by adding it outside the form
main one, input
searching for the ticket would be outside the design of thediv
Is there a way to prevent the second from form
executing both form
or it is possible to avoid the use of the form to send data by ajax, that is, instead of taking all the information from the <form id="tck" method="post"></form>
take all the information from an div
example <div id="remplazoporelformsegundario"></div>
to avoid the second from form
executing both form
.
my ajax code
<script type="text/javascript">
$(function() { //document.ready es obsoleto desde jQuery 3
$('.dismiss').click(function () {
$('.response').fadeOut(500);
});
$('#tck').on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
var request = $.ajax({
url: $(this).prop("action"),
method: $(this).prop('method'),
data: data,
dataType: "html"
});
request.done(function(response) {
console.log(response);
$('.response').html(response);
$(".response").fadeIn(200);
window.setTimeout(function () {
$('.response').fadeOut(500);
}, 6000);
});
request.fail(function(jqXHR, textStatus) {
alert('Hubo un error: ' + textStatus);
});
});
});
</script>
In the HTML standard documentation it is specified that a form cannot contain another form (my translation, the important part is the content model):
The proposed solutions are good and will solve the problem, but they deal with the symptoms (
form
outer is sent when inner is sent) and not the actual cause of the error (there shouldn't be oneform
within another). Other issues could arise later because the root of the problem is still there.Ideally, I would change the layout so that there is no element
form
inside another elementform
. You could still send theform
inner content (the one that would be removed) using AJAX. For example, the code would look like this:And with JavaScript then you would do something like this:
In this way, when the button is pressed, only the data of that particular ticket will be sent and not the entire form as before. Also, you will have solved the problem of having invalid HTML, because there will be no more nested forms.
That applied to the code you had would be like this:
Try changing the button of type submit to a normal button:
It was changed from
button
toinput
to prevent the form from being submitted. Then replace the event$('#tck').on('submit')
with.click()
. Assigning the event tobutton
:And the rest would remain the same. This is how the form information is sent without submitting.
Full code:
To the second form instead of a button type submit, make it a button type button.
Then make a click event to that button and when clicked just submit the form you want. You should add an identifier to the button.
Example: