Develop Reference

how to fire off multiple forms/submit buttons at the same time at the click of one button

I have some tabs, each containing their own form and their own submit button. I want to fire off all the forms and send requests for each form at the click of one button. That one button should essentially click each individual submit button for each form (in this case that button would be the button with class "submit_all". The html:
div class="tab-content" id="tab_content_one"
div id="#tab1" class="tab-pane fade in active"
= form_tag({ action: "route1" }, method: method)
.form-group
textarea.form-control name="words"
input.btn.btn-primary type="submit" class="submit"
div id="tab2" class="tab-pane fade"
= form_tag({ action: "route1" }, method: method)
.form-group
textarea.form-control name="words"
input.btn.btn-primary type="submit" class="submit"
div id="tab3" class="tab-pane fade"
= form_tag({ action: "route1" }, method: method)
.form-group
textarea.form-control name="words"
input.btn.btn-primary type="submit" class="submit"
input.btn.btn-primary type="submit" class="submit_all" onclick="goBack()"
I tried using javascript to retrieve all the submit buttons for each of the forms and iterating through and clicking each submit button however that did not work. It ended up only firing off the final form.
function goBack() {
var submit2 = document.getElementsByClassName('submit')
console.log(submit2)
for (i=0; i<=(submit2.length); i++){
submit2[i].click()
}
Am I doing something wrong? and how else can I go about this?

If you send a form.submit()-event (or button.click() on the submit button) on all forms, only one form may be submitted, depending on how the forms are build.
To get the data from all forms you can gather them with new FormData(FormElement) and serialize them using [...formData.entries()].
submitAll.onclick = () => {
const data = [ ...new FormData(form1).entries(), ...new FormData(form2).entries() ];
// place your logic here...
// for example a fetch() or websocket.send() request
console.log(data);
}
<form id="form1" onsubmit="event.preventDefault(); return false;">
<input type="text" name="customForm1Text" value="something">
<input type="submit">
</form>
<form id="form2" onsubmit="event.preventDefault(); return false;">
<input type="text" name="customForm2Text" value="text">
<input type="number" name="customForm2Number" value="1">
<input type="date" name="customForm2Date">
<input type="submit">
</form>
<button id="submitAll">Submit both forms at once</button>

can not submit value of input hidden

I have a form like this:
$(document).ready(function() {
$('#create_lop_monhoc_modal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var tenmh = button.data('tenmh')
var mamh = button.data('mamh')
var modal = $(this)
modal.find('#input_tenmh').val(tenmh).trigger("change")
modal.find('#tenmh').text(tenmh).trigger("change")
modal.find('#input_mamh').val(mamh).trigger("change")
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="modal fade " id="create_lop_monhoc_modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="/monhoc" method="POST">
<input type="hidden" value="" id="input_mamh" name="mamh" />
<input type="hidden" value="" id="input_tenmh" name="tenmh" />
<div class="modal-body">
<h4 id="mamh"></h4>
<div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Crate</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<button type="button" data-toggle="modal" data-target="#create_lop_monhoc_modal" data-tenmh="tenmh" data-mamh="mamh">
Open Modal
</button>
When i click 'Open Modal', the value of input hidden was put, but when i submit that form, the value of it is not submit. when i click back button of browser and submit again, this submit success!.
I dont know why, please help!!

I think my problem is caused by another javascript library, namely due to bootstrap-datepicker.js. Because when i click datepicker input, value of it is reset.
I solved this problem by remove datepicker and try submit again, and it is working.
In my question, i think I think that .trigger("change") is no longer needed:
modal.find('#input_tenmh').val('tenmh').trigger("change")
modal.find('#tenmh').text('tenmh').trigger("change")
modal.find('#input_mamh').val('mamh').trigger("change")
after that:
modal.find('#input_tenmh').val('tenmh')
modal.find('#tenmh').text('tenmh')
modal.find('#input_mamh').val('mamh')
Thank for all!

Two forms from one input

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:

First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}

You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}

From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>

Coffeescript bind submit form to show div on submit

I am trying to display a loading gif when a submit button is pressed, but my coffeescript doesn't seem to be working. How can I use Coffeescript to show a div when I submit a form?
Coffeescript:
$(document).ready ->
$('form#add_product_form').submit ->
console.log("test")
$("#circularG").show()
false
HTML form:
<form accept-charset="UTF-8" action="/products/new" data-remote="true" id="add_product_form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<p>
<label for="link_url">Url</label><br>
<input autofocus="autofocus" id="link_url" name="link[url]" type="text">
</p>
<p>
<input class="btn btn-primary" name="commit" type="submit" value="Add Product">
</p>
</form>
My Coffeescript is being compiled into js as so:
$(document).ready(function() {
return $('form#add_product_form').submit(function() {
console.log("test");
$("#circularG").show();
return false;
});
});

Make sure to add space before the 2nd line
$(document).ready ->
$('form#add_product_form').submit -> #HERE
console.log("test")
$("#circularG").show()
false

You have to attach "submit" event to a FORM element e.g.
$('#id_for_form').submit ->
$('.div').show()

Form with two submit buttons doing two different things

I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??

problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>

I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>

The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.