Missing parameters on submit / button outside form
Question
I've got a form and a button outside the form. I want to submit the form using the button, so i have written some jquery code. Everything seems to work fine, except one thing. After submit action button's name and value aren't being send (in this case: page=2). How can I fix it? Thanks in advance for help.
$('button').on('click', function() { $('#test-form').submit(); });
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example"> </form> <button name="page" value="2">2</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> <html>
7 answers
solution1
3 2018-12-17 13:00:08
The reason the button's data won't be submitted in the form is because the button is outside the form element. To fix this, place the button before the closing </form> tag so your code looks like so:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
<button name="page" value="2">2</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>
Of course if you really wanted to add the button'a value to the handling page without the button being inside the form, you could just add this to the URL:
Instead of having
https://example.com/handler.php
As your action URL, add the button's values here:
https://example.com/handler.php?page=2
And put that in your form's action attribute like so:
<form id="testForm" method="get" action="https://example.com/handler.php?page=2">...</form>
And then the data will be submitted.
solution2
2 ACCPTED 2018-12-17 13:08:26
Your button's value isn't submitted because it isn't considered part of the form (due to being outside the <form>...</form> tags).
As an alternative to Jack's answer which is one correct way to do it, if for some reason you don't wish to move the button inside the form, then in HTML5 another option you have is to associate the button with the form via an attribute. This allows the button to be considered as part of the form despite being outside the tags.
As an added bonus, once the button is part of the form, you don't need any JavaScript to make it work - it will automatically be considered as a "submit" button.
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example" /> </form> <button name="page" value="2" form="test-form">2</button> </script> </body> <html>
See the "form" attribute discussed in the documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
solution3
0 2018-12-17 13:00:07
The form only submits the named values within the form.
You could use a hidden and assign the button value in the click event.
$('button').on('click', function() { $('#button_value').val($(this).val()); $('#test-form').submit(); });
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example" /> <input type="hidden" name="page-no" id="button_value" /> </form> <button name="page" value="2">2</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> <html>
solution4
0 2018-12-17 13:01:30
You can add hidden input element with name and value that you want to send inside the form.
$('button').on('click', function() { $('#test-form').submit(); });
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example"> <input type="hidden" name="page" value="2"> </form> <button>Submit</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> <html>
Or else if you can place the submit button inside the form, you can remove the code for stimulating the submit action. https://jsfiddle.net/yh4yvoe3/8/
solution5
0 2018-12-17 13:04:18
Of course your button value you won't be sent. As specified, it's outside the form.
Therefore when you submit the content, it isn't included.
Put it inside the form if you want it to be included, and then you don't need any jQuery or JavaScript.
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example"> <button type="submit" name="page" value="2">2</button> </form> </body> <html>
solution6
0 2018-12-17 13:11:50
I think you can achieve by the following logic, add button name and value in the hidden field and append inside the form.
$('button').on('click', function() { $('#test-form').append($("<input/>", { name: this.name, value: this.value, type: 'hidden' })).submit(); });
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form method="get" action="#" id="test-form"> <input type="text" name="example"> </form> <button name="page" value="2">2</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> <html>
solution7
-1 2018-12-17 12:57:14
You can copy button using .clone() and insert copy of button into form using .append() and then submit the form
$('button').on('click', function() {
var button = $(this).clone().hide();
$('#test-form').append(button).submit();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.