How can I get the value of a hidden input field when submitting a form?

Question

I have a page with multiple forms on it. Each form has two submit buttons and one hidden input field which contains an ID.

When the user clicks one of the submit buttons, I need to send the value of the clicked submit button along with the value of the hidden input field with the form submission.

Here is an example of what my page looks like:

<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>


<script>
$(document).on("submit", "#options", function(e) {
   e.preventDefault();
   console.log(this.submitted) // gets the value of the submit button
});
</script>

Currently I can only send the value of the clicked submit button with the form submission and not the value of the hidden input field. While I am aware that I could use onclick="this.form.submited=this.previousElementSibling.value;" to get the ID, this would mean I cannot get the value of the clicked submit button.

Don't use the same `id` multiple times. An `id` is supposed to be unique. As far as I can see, this is clearly an [XY problem](http://xyproblem.info/). You're making this way more complicated than it needs to be. Also, hidden input values *are sent along* already. They are hidden from view, not the server. — , Dec 26 '17 at 13:12
check this answer https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery/1186309#1186309 — danielarend, Dec 26 '17 at 13:14
Wait, did you edit your code to remove the `name` attributes? I was talking about `id="options"`. You need `name="id"` so the data is accessible on the server end. — , Dec 26 '17 at 13:56

TamirNahum · Answer 1 · 2017-12-26T13:14:20.810

0

You can use val():

var value = $('input[name="input-name"]').val();

Edit: If you want to use more than one input with the same name, use it like this:

$('input[name="input-name"]').forEach(function($in) {
    var value = $in.val();
});

edited Dec 26 '17 at 13:14

answered Dec 26 '17 at 13:07

TamirNahum

484
2
8

You shouldn't give a name more than once in a single page. Name should be unique value. – TamirNahum Dec 26 '17 at 13:10
1

How about we remove the `name` attribute all together. – The Codesee Dec 26 '17 at 13:10
@TamirNahum In case of form submit, where you are sending a data collection we need multiple input fields with the same name. – Kumar_Vikas Dec 26 '17 at 13:12
You can use the `forEach` function. I will edit my answer in a minute to give an example. – TamirNahum Dec 26 '17 at 13:13
You mentioned `Name should be unique value`. Just need clarification on this. – Kumar_Vikas Dec 26 '17 at 13:14
I'm not sure if it's valid to put the same name for more than one input (as I mentioned - I'm not sure.. But you can Google it to make sure). The above example should be your answer if you choose to use the same name for more than one input. – TamirNahum Dec 26 '17 at 13:16
1

No, name does not need to be unique and regularly isn't, what about a set of radio inputs for example? – StudioTime Dec 26 '17 at 13:16
@DarrenSweeney You are correct. Ignore the last comments! Use the answer's examples :) – TamirNahum Dec 26 '17 at 13:17
1

or you can skip the foreach and use `$(this)` which refers to the current form being submitted, and find the element with `.find()`. – Junius L Dec 26 '17 at 13:24
You can relate to each input's value by using the `forEach` loop. – TamirNahum Dec 26 '17 at 13:26
why loop over everything instead of finding it in the current form, seems like a waste of time. – Junius L Dec 26 '17 at 13:28
@TamirNahum OP now has only three forms. But imagine a scenario where it might have more than 100 forms (Crazy scenario ! :D), the loop goes on increasing with form count increase. When just plugging one event can fetch you the data, why go through the tedious process of looping over all input fields in all the forms unnecessarily. – Kumar_Vikas Dec 26 '17 at 13:33
Using this `$('input[name="input-name"]')` is to catch any `input` with the name `input-name` in the webpage. Using the `forEach` loop or the jQuery function `each` is in order to take action with any single value of those inputs... – TamirNahum Dec 26 '17 at 13:41
@TamirNahum getting any input with the name input-name in the current webpage, and get hidden input in this current form, which one is better? – Junius L Dec 26 '17 at 13:53
You are not trying to get it within a single form. There are many forms in the webpage.. – TamirNahum Dec 26 '17 at 14:20

score 0 · Answer 2 · answered Dec 26 '17 at 13:11

0

Give an id say hiddenInput to the hidden input box. To access the value you can use $(.hiddenInput).val();. To access the value on the server side, you can access it using req.query.id()

answered Dec 26 '17 at 13:11

Abhishek Anand

447
5
22

Remember that there are multiple hidden input fields. – The Codesee Dec 26 '17 at 13:11

Junius L · Accepted Answer · 2017-12-26T13:23:11.317

Use $(this) to to get the hidden input of the current form, and you can't use the same id for multiple elements, change your id to class="options".

var val = $(this).find('input:hidden').val());

$(document).on("submit", ".options", function(e) {
   e.preventDefault();
   console.log($(this).find('input:hidden').val()) // gets the value of the submit button
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form class="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form class="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

score 0 · Answer 4 · answered Dec 26 '17 at 13:18

Try this:

$(document).ready(function() {
  $("input[type='submit']").click(function(event) {
     event.preventDefault();
     var id = $(this).parent().find("input[name='id']").val();
     var action = $(this).data("action");
     console.log("action: " + action + ", id: " + id);
  });
});

<html>
<body>

<form id="options1">
<input type="hidden" name="id" value="104">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

<form id="options2">
<input type="hidden" name="id" value="44">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

<form id="options3">
<input type="hidden" name="id" value="39">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

Kumar_Vikas · Answer 5 · 2017-12-26T13:24:45.897

0

Just a simple find will fetch you the required data.

$(document).on("submit", "form", function(e) {
  alert($(this).find('input[type="hidden"]').val())
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

edited Dec 26 '17 at 13:24

answered Dec 26 '17 at 13:19

Kumar_Vikas

837
7
16

you can't use the same `id` for multiple elements. – Junius L Dec 26 '17 at 13:22
@julekgwa Oh yes! I missed that. Actually, there is no need for the Id or the class. But cannot remove ID from the markup as it might be used in CSS. – Kumar_Vikas Dec 26 '17 at 13:25
1

maybe for styling – Junius L Dec 26 '17 at 13:26

score 0 · Answer 6 · 2017-12-26T14:14:32.687

0

All you need is this:

<form>
    <input type="hidden" name="id" value="104">
    <input type="submit" name="action" value="Delete">
    <input type="submit" name="action" value="Reply">
</form>

Clicking the Reply button yields:

id=104&action=Reply

edited Dec 26 '17 at 14:14

answered Dec 26 '17 at 14:02

How can I get the value of a hidden input field when submitting a form?

6 Answers6