Develop Reference

form.submit() not working

I need to do something to use the ruby cgi to output something.
As such form must be submitted first followed by the js to alter the element values.
Using the form.submit() does not work in my case.
Using the simple below example below to output the click me values after submitting the form.
When the form.submit() function is run,the js will not work on click me.
Form onsubmit method cannot be used as it calls the javascript function first before submitting the form(Must submit the form first then call the JS function to carry out something)
Any idea to resolve this:
NOTE:MUST SUBMIT FIRST
$(document).on('click','#afterbutton',function() {
var form = document.getElementById("myForm");
//form.submit();
document.getElementById("test").innerHTML = "afterbutton";
});
$(document).on('click','#beforebutton',function() {
var form = document.getElementById("myForm");
//form.submit();
document.getElementById("test").innerHTML = "beforebutton";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="submit" value="formSubmitbutton" id="submit"><br>
<button id="beforebutton">beforebutton</button><br>
</form>
<button id="afterbutton">afterbutton</button><br>
<p id="test">click me</p>

OK easy problem , you make a simple mistake when you give an input the id submit you override the form.submit method if you look at the console in the devtool you'll see something telling you that
form.submit is not a function
so to solve this problem change the id of your first input instead of submit to something else like submit123
<input type="submit" value="formSubmitbutton" id="submit123"><br>
look at the code below and tell me what you think
$(document).on('click','#afterbutton',function(event) {
event.preventDefault();
var form = document.getElementById("myForm");
form.submit();
document.getElementById("test").innerHTML = "afterbutton";
});
$(document).on('click','#beforebutton',function(event) {
event.preventDefault();
var form = document.getElementById("myForm");
form.submit();
document.getElementById("test").innerHTML = "beforebutton";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="submit" value="formSubmitbutton" id="submit123"><br>
<button id="beforebutton">beforebutton</button><br>
</form>
<button id="afterbutton">afterbutton</button><br>
<p id="test">click me</p>

jQuery submit() with spin.js is preventing form from submitting?

I have a form that submits just fine, but when I add jQuery code to show a loading div using spin.js everything stops working.
<form id="search_form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
<!-- Form inputs here -->
...
<input id="exam_search" type="submit" name="submit" value="Search" />
Once I add the following code the form stops submitting and nothing happens. The loading div shows for a brief moment and then goes away like expected, but it seems like the form isn't actually submitting anymore.
var opts = // Array of options
var spinner = null;
$("#search_form").submit(function() {
spinner_div = document.getElementById('spinner');
if(spinner == null) {
spinner = new Spinner(opts).spin(spinner_div);
$("#search_results, #query").css({"opacity": "0.75"});
$("#search_form :input").attr("disabled", true);
} else {
spinner.spin(spinner_div);
$("#search_results, #query").css({"opacity": "0.75"});
$("#search_form :input").attr("disabled", true);
}
});
If I change all of that code in the submit event to this:
$("#search_form").submit(function() {
alert ("form submitted");
});
It shows the alert and then returns the results of the form submission just fine.
What am I doing wrong here?
EDIT
I saw in the jQuery docs for submit() that I shouldn't use the name "submit" on the input field. I tried changing that as well with no luck.

Well I'm not sure why but simply doing this worked:
$("#search_form").submit(function() {
var spinner_div = document.getElementById('spinner');
var spinner = new Spinner(opts);
spinner.spin(spinner_div);
});

When I use input type=button the value of it is not send to the server

In a form I have a button as input/submit. When I submit the value of the button is send.
if I change to input/button instead and do the submit via JQuery i.e. $("form").submit() the form is submitted but the value of the button is not send. Why? How could I fix this?
<form name="myform" id="myform" action="http://localhost/mypage.html" method="POST" >
<input type="button" id="btn" value="Actual value" name="save" >
</form>
$(document).ready(function() {
$("#btn").click( function() {
$("myform").submit();
}
}

buttons are not the same as inputs, that's why the button doesn't add to the form submission. you could add an input of type hidden with the value you want next to the button.
Otherwise you would have to use jquery to grab the button after the form has been submitted to get its value.

try with this code
$(document).ready(function() {
$("#btn").click( function() {
$("myform").submit();
});
});

You can use input="submit" button with preventDefault(); function if you want to conditionally check the form submission
$("#btn").click(function(event){
if(truePart){
$(this).unbind('click').click();
}else{
event.preventDefault();
alert("Please fill the required fields");
}
});

Try name="Actual Value" , then try accessing the value on server using POST['name'] , it will let you to have your actual value.

It looks like your javascript is syntactically incorrect.
Your code
$(document).ready(function() {
$("#btn").click( function() {
$("myform").submit();
}
}
should look like this
$(document).ready(function() {
$("#btn").click(function() {
$("myform").submit();
});
});
You're missing two closing parentheses and two semicolons.
If that doesn't help, try this for your button:
<input type="submit" name="save" value="Actual Value" />
Make sure your server-side code is prepared to accept a save parameter, as well. Can't send code to something that doesn't want to receive it!

JQuery get formaction and formmethod

I have the a like this one
<form id="popisgolubova_form">
<input name="pregledaj" type="button" formaction="uredigoluba.php" formmethod="post" formtarget="_self" value="pregledaj" class="button" onclick="popisgolubova_radiobutton(this)">
<input name="rodovnik" type="button" formaction="rodovnik.php" formmethod="post" formtarget="_blank" value="rodovnik" class="button" onclick="popisgolubova_radiobutton()">
<input name="podaci" type="button" value="poodaci" formaction="podaciogolubu.php" formmethod="post" formtarget="_blank" class="button" onclick="popisgolubova_radiobutton()">
</form>
and javascript
function popisgolubova_radiobutton(element)
{
alert($(element).find("[formaction]").val());
var popisgolubova_radiobutton=$("input[name=RadioGroup1]").is(":checked");
if(popisgolubova_radiobutton==false)
{
alert("nop");
}
else
{
$("form#popisgolubova_form").submit();
}
}
First I'm checking if any checkbox is checked or not and if it is the I can submit the form. But the problem is formaction, formmethod and formtarget. how to get them and submit them

To get the action or method attributes of a form you can try something like below:
$(function() {
var action = $("#formid").attr('action'),
method = $("#formid").attr('method');
});

Hope this helps to get an idea to solve ur problem
<form id="popisgolubova_form">
<input name="pregledaj" type="button" formaction="uredigoluba.php" formmethod="post" formtarget="_self" value="pregledaj" class="button postForm"/>
</form>
$(document).on('click', '.postForm', function () {
$('#popisgolubova_form').attr('action', $(this).attr('formaction'));
$('#popisgolubova_form').attr('method', $(this).attr('formmethod'));
$('#popisgolubova_form').attr('formtarget', $(this).attr('formtarget'));
});

So the question is talking about the unfortunately named
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction
...which is a way to override
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action
per clicking a properly set up submit button. The place you want to check this is upon submit - when you're sure things are actually being submitted.
The button you used to submit is stored as :focus - this does not seem to be otherwise stored in the event object at the moment.
$('form').on("submit", function(event) {
if( $(':focus').is('[formaction]') ) {
console.warn($(':focus').attr('formaction'));
}
if( $(':focus').is('[formtarget]') ) {
console.warn($(':focus').attr('formtarget'));
}
});

if( $(':focus').is('[formaction]') ) {
console.log($(':focus').attr('formaction'));
}

I had this problem and after searching the web I couldn't find a proper answer. Finally, I realized it's so simple.
When you add an event on form.submit you have an event argument that contains e.originalEvent.submitter, just use it as follows:
$('form').submit(function(e){
var url = form.attr('action');
if (e.originalEvent.submitter) {
var frmAction = $(e.originalEvent.submitter).attr('formaction');
if (frmAction)
url = frmAction;
}
,.....
});
You can use the samething for the formmethod as well.

Targeting a button on a form to press, with javascript

I know that, using Javascript, I can tell a form to submit using something like this:
document.forms[0].submit()
However, if there are a number of forms on a page, which could be in any order, how would I target the submit link in this form:
<form action="/services/auth/" method="post">
<div id="auth-allow-container" class="button-container">
<a class="Butt" id="auth-allow" type="submit" href="#"><span>SUBMIT</span></a>
<a class="Butt CancelButt" id="auth-disallow" href="#home"><span>CANCEL</span></a>
</div>
</form>
..so that it is as if the user has clicked SUBMIT?

You could make a function:
function submitFormById(id) {
var el = document.getElementById(id);
while ( el && el.tagName.toLowerCase() != 'form') {
el = el.parentNode;
}
el && el.submit();
}
Then you use this function like so:
submitFormById('auth-allow');
submitFormById('auth-disallow');
Both will submit the form.

Give the form a name attribute. Then you can do document.name.submit(). i.e.
<form name="MyForm" ....>
<input ... />
</form>
You would then be able to do document.MyForm.submit()
EDIT:
As you have said you can't change the html, solutions adding an ID are also no help. You will have to identify which numerical form element on the page this specific one is and do docuemnt.forms[x].submit() where x is the index of this form.

put in the link:
onclick="this.parentNode.parentNode.submit();"
this is a bit fragile if you change the dom structure but it is a generic link for this kind of form
update:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("auth-allow").addEventListener("click", submithAuthForm, false);
}, false);
function submithAuthForm(){
document.getElementById('auth-allow').parentNode.parentNode.submit();
}