Create hidden input field with script

Question

I have a form with multiple checkboxes. When checked, the value will be "yes" when submitted. I am trying to find the best way to assign the value "no" to all unchecked checkboxes when the form is submitted.

I can't seem to get this to work. Here is what I have:

$('#foo :checkbox').submit(function() {
  var $this = $(this);
  // $this will contain a reference to the checkbox   
  if ($this.is('not(:checked)')) {
    // the checkbox was not checked 
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", $(this).attr("name"));
    input.setAttribute("value", "no");
    //append to form element that you want .
    document.getElementById("#foo").appendChild(input);
  } else {

  }
});

Why isn't this working?

@barmar If I use click, the unchecked checkboxes will not follow this rule because they were never clicked. — cgrouge
– cgrouge, Commented Sep 1, 2016 at 16:35

David Hartley · Accepted Answer · 2016-09-01 16:14:33Z

3

Following on from the other answer...

The event is triggered on the form, so:

$('form').submit(function() {
    var $this = $(this);

    // Set checked inputs to value yes
    $this.find('input:checkbox:checked').attr('value', 'yes');

    // Set unchecked inputs to value no
    $this.find('input:checkbox:not(:checked)').attr('value', 'no');
});

will trigger when the submit is triggered.

Assuming the HTML is something like:

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

answered Sep 1, 2016 at 16:14

David Hartley

1006 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jasper Over a year ago

Unchecked checkboxes aren't submitted with the form. So changing their value still won't include them in the submission.

cgrouge Over a year ago

I did try this solution and did not see a "no" value for unchecked boxes. It seems because they were unchecked, they were never submitted.

Chris Lear · Accepted Answer · 2016-09-01 16:25:42Z

1

From https://api.jquery.com/submit/

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements

So you can only attach the event to the form, not to the checkboxes.

Which means that your code won't actually even run.

The above answers your question, as far as I can tell (ie it says why it doesn't work).

Here is something that might work instead:

$('#foo').submit(function() {
  var $this = $(this);
  // $this will contain a reference to the form
  $this.find(':checkbox' ... // your code here

edited Sep 1, 2016 at 16:25

answered Sep 1, 2016 at 16:10

Chris Lear

6,7601 gold badge20 silver badges29 bronze badges

4 Comments

Jasper Over a year ago

Always good to step through your code or at least place a console.log in there to make sure it's doing what you expect. And yes Chris, the submit event needs to be bound to the form element.

Barmar Over a year ago

It will run, it just won't do anything useful, since the submit event is never triggered.

Chris Lear Over a year ago

I doubt the code inside the function ever runs as presented.

cgrouge Over a year ago

So should it be something like this? jsfiddle.net/7Lrb41f9/4 If that is correct, how do I use the same name as the current checkbox it is checking?

Collectives™ on Stack Overflow

Create hidden input field with script

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related