Multiple Form Send With Checkbox

Question

Is it possible, for example, if I choose more than 1 checkbox it will submite multiple forms with the other camps that I have but the only thing that will change is the value of the checkbox.

I will give a more detailed example. I have 2 camps, 1 with the name and the other with the email and the other is those checkbox. And If I choose 2 checkbox it will submit the forum 2 times with the same name and the same email but one will be with 1 value and the other will be with the other value that I selected.

<div class="form-group">
       <label>Test</label>
       <div class="custom-control custom-radio">
          <input type="checkbox" id="0" name="server" class="custom-control-input">
          <label class="custom-control-label" for="0">Everywhere</label>                        
       </div>
       <div class="custom-control custom-radio">
          <input value="1" type="checkbox" name="server" id="test" class="custom-control-input">
          <label class="custom-control-label" for="teste" value="1">test</label>                        
       </div>
       <div class="custom-control custom-radio">
          <input value="2" type="checkbox" name="server" id="test2" class="custom-control-input">
          <label class="custom-control-label" for="test2" value="2">test2</label>                        
       </div>
    </div>

Thanks U all for your time, sorry if I wasn't detailed enough but just say it and I will improve it! Feel free to send me any link do study and implement in the code ;)

user3681384 · Answer 1 · 2018-10-03T16:55:30.757

0

When using a checkbox, as long as they all share the Same name then they will be submitted as ONE value. Example:

A checkbox named Hobbies will submit an array of values checked when the form is submitted with a result that looks like [Cooking, Running, Jumping, Gaming]. All of that is 1 value, and not 4.

The input element is how many different results you want back.
The name attribute tag is identifies which response the answer belongs to.
The value attribute tag is what will be sent inside of the value, i.e. [1,2,3] or [A, B, C].

Please rephrase your question if you felt i did not meet the answer you were looking for. It was difficult to understand.

Edit after reading comment.

Your issue seem to be on your understanding of the form element, and not that on the checkbox attribute.

Please consider wrapping your inputs and form data inside a form tag. All inputs inside will be submitted as one, rather than as separate or individual. Your html structure seems to be what is causing your issue.

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
  <input type="submit" value="Submit">
</form>

Everything inside that form element will be submitted as one POST, and from there, you can request the values from the [vehicle1] or [vehicle2] question.

edited Oct 03 '18 at 16:55

answered Oct 03 '18 at 16:28

user3681384

105
9

If I choose more than 1 checkbox, it will submit a form with that checkbox and then submit another form with the other checkbox, not 1 form with the 2 checkbox's. – Sleepys Oct 03 '18 at 16:40
try the [demo](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_checkbox) to get a better understanding of my explanation. Sorry i didnt write any php. It seemed to me like your question was more html than it was about server side code. – user3681384 Oct 03 '18 at 17:12
But I want to send 2 diferent forms with the other same values. – Sleepys Oct 03 '18 at 17:13
OH! then javascript will be the way to go about it. Sorry, thank you for explaining yourself. That definitely made a difference in my understanding of your question. Use javascript to detect when the form is submitted, then within the same javascript call, send the data to two different `action` urls. If you need information let me know, and i'll try to write out a demo – user3681384 Oct 03 '18 at 17:33
A demo will be nice or a link do guide me ;) – Sleepys Oct 03 '18 at 17:39
Set your html form like how you would normally do it, with the exception that the action url remaining blank. Then in your javascript code, just add a separate [submit call](https://stackoverflow.com/a/38782258/3681384) for each url you would like to submit the form data to. This example is _really_ basic, but trust me, the answer is just that simple. There are different ways to set up your javascript, but this is just one way it can be done. – user3681384 Oct 03 '18 at 18:07
Didnt understand – Sleepys Oct 03 '18 at 18:08

user3681384 · Answer 2 · 2018-10-03T20:38:14.330

HTML

<form id="form-id">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
  <input type="submit" value="Submit">
</form>

JAVASCRIPT

var ele1 = document.getElementById("form-id1"); //Your Form Element
var ele2 = document.getElementById("form-id2"); //Your Form Element
//Detects whenever this particular form is "submitted"
if(ele.addEventListener){ //Modern browsers
    ele.addEventListener("submit", function(e){
        ele1.action="yourUrl1";
        ele1.submit();
        ele2.action="yourUrl2";
        ele2.submit();
        //return false; //stops page from refreshing after submit
    });  
} else if(ele.attachEvent){ //Old IE
    ele.attachEvent('onsubmit', function(e){
        ele1.action="yourUrl1";
        ele1.submit();
        ele2.action="yourUrl2";
        ele2.submit();
        //return false; //stops page from refreshing after submit
    });           
}

I modified my response, but you might be better just connecting the two forms together. You can reference a form element from different parts of your html.

form The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute isn't used, the element is associated with its nearest ancestor element, if any. This attribute lets you to place elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.

formaction The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the action attribute of the element's form owner.

References

It didnt worked, I think you didnt understand. If I have 2 checkbox selected (for example, it can be more) but if I only have 2 checkbox selected, it will send 2 diferent forms with the same values in the other camps, but the values of the checkbox will be diferent. The action of the form is # And im using POST — Sleepys, Oct 03 '18 at 18:38
Sorry for delay. I modified my response. Your question wording is definitely hard to follow. But i'm sure i understand it this time. I added some advice on a better way to solve your problem. But the solution you requested is there. — user3681384, Oct 03 '18 at 20:39

Multiple Form Send With Checkbox

2 Answers2

HTML

JAVASCRIPT

References