Develop Reference

Submit form with Javascript then handle with PHP

Not sure how I did this last time or else I wouldnt asking here but here is what I'm trying to do.
I have the usual basic form with a javascript function that will submit the form. Question is that after the form is submitted, I have an if statement in PHP that echos a that the form has been submitted. Any help would be greatly appreciated.
//PHP
if($_POST['submitDelete']){
echo "welcome, You form has been submitted";
}
//HTML
<form id="form_id" action="" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" TYPE="submit">
</form>
<button type="button" onclick="myFunction()">Submit</button>
//JAVASCRIPT
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
I can't seem to trigger the if statement in PHP. I also tried using the form name in the if statement and that didnt work either.

A form element must be told where to submit its data to when the submit event takes place. This is accomplished by setting the action attribute value for the form. Leaving that attribute empty does not implicitly set the form to post back to the current page. So, if you want to have a single page form/form processor, you need the action to be set to the current page file name:
<form action="currentPageFileName.php" method="post">
Next, there's no reason a single page can't have multiple forms on it. In that case you would need multiple submit buttons, each tied to a specific form. For this reason, you can't just drop a submit button anywhere on the page that you like unless you add the form attribute to the button to tie it back to the form it is supposed to trigger the submit for. Also, if you simply place the submit button within the form element it "belongs" to, you don't have to worry about this.
Also, you have some invalid HTML with:
<input type="hidden" name="submitDelete" TYPE="submit">
An element may not have the same attribute repeated within it (the case that you type the attribute in makes no difference since HTML is not case-sensitive). So, that code would wind up simply creating a submit button.
Lastly, if all you want to do with your submit button is cause its related form to be submitted, there is no need for JavaScript at all. That is what submit buttons do by default.
So, in the end, you can get rid of the JavaScript in your code completely and change your HTML to this:
<form id="form_id" action="currentFileName.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" value="true">
</form>
<button type="submit" form="form_id">Submit</button>

HTML form submit POSTS input button/submit values; JavaScript form submit does not

So this has been bugging me for some time. I discovered a page that was intermittently submitting form contents twice. For simplification, the inputs are a text field and a button. Upon further inspection, I noticed one form submission included the text and button inputs and the other submission only sent the text input.
I set up a test page to troubleshoot. I put it up on jsfiddle, but I don't think it'll be much help, since I cannot see the values passed using an HTTP Proxy tool such as Fiddler.
https://jsfiddle.net/9xL5w9t2/
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name">
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" />
<input type="text" id="text1" value="123" name="text1name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" />
<input type="text" id="text2" value="123" name="text2name" />
</form>
<form method="post" action="www.google.com" id="form3" name="form3name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" />
<input type="text" id="text3" value="123" name="text3name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name">
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" />
<input type="text" id="text4" value="123" name="text4name" />
</form>
Form 1: Submits text and button
Form 2: Submits text
Form 3: Submits text
Form 4: Submits twice. 1) Submits text 2) Submits text and button
From the looks of it, submitting using HTML Form submit sends over text and button inputs. But submitting the form using JavaScript sends over just the text input. No button.
What is the explanation for this behavior? Why does a JavaScript form submit send over text input only, yet HTML form submit sends over both text and button inputs?
Is this by design? If so, what would be the reason(s)? Seems inconsistent to have your HTML parser send the button value, yet your JS engine does not.
Thank you for any help.

Form 1: Submits text and button
.. default behavior, using a input type submit
Both input controls get submitted because you've clicked the submit button.
Add another submit-button. You will see that only the button dispatching the submit is included in the post data.
So.. what's the reason for that: This way you can add two buttongs, e.g. "cancel" and "save" to a form using the same name
Form 2: Submits text
Form 3: Submits text
.. both solutions look exactly the same to me, the input type button is not handled as an "submit input field" here.. you submit using js.
There is no action on the button and that's why it's not included. (Like described above).
Form 4: Submits twice. 1) Submits text 2) Submits text and button
You're using a input type submit like in the Form 1.. so this form gets submitted exactly the same way. But: there is also a onsubmit handler on the form that calls the submit again using js- that's the reason for the second submit.
The handler is called first, because a submit will trigger a page-reload and the script executing the event will not be "present" anymove after the submit.
The other behaviour is just like described for Fomr 2 & 3
.
Just let me know if you need some further explainations.

How do I only validate against one specific button using ParsleyJS

I have applied ParsleyJS validation to a form that has multiple submit buttons that perform various tasks. I only want the validation to occur for one of the submit buttons, is this possible? if so, how?
For a pared down example:
<form name="aspnetForm" method="post" action="page.aspx" id="aspnetForm" data-validate="parsley">
<input type="text" id="text_for_example" data-required="true"/>
<input type="text" id="text_for_example2" data-required="true"/>
<input type="text" id="text_for_example3" />
<input type="submit" id="ClearsTheTextBoxes"/>
<input type="submit" id="SavesData" />
</form>
Ideally I want it to validate only on the "SavesData" submit, not on the "ClearsTheTextsBoxes". is this possible using ParsleyJS?
Thanks!
Note:
I cannot change the type any of the submit buttons to function differently; please do not suggest this. The "ClearsTheTextsBoxes" must remain a submit button.

to do so, you'll have to remove data-validate="parsley" from your form tag, and add a custom js function on click on the desired button. Then in this function, simply to a $('aspenetForm').parsley('validate');
Best

Submit form with Javascript doesn't work

I have a simple form for uploading a file. If I use an ordinary submit button, everything works as expected:
<form id="mainform" method="post" action="/" enctype="multipart/form-data">
...
<input type="submit" id="submit" value="Analyze File"/>
</form>
But if I change it to an ordinary button and use Javascript to submit the form, nothing happens:
<input type="button" id="submit" value="Analyze File" onclick="document.getElementById('mainform').submit()"/>
I verified that the onclick handler really is getting called, and looking up the form works correctly. For example, if I change it to onclick="alert(document.getElementById('mainform').action)", the alert comes up as expected and shows the target URL of the form. But for some reason, the call to submit() simply doesn't submit the form.

The issue is your submit button. Its id is submit, which means that document.getElementById("mainform").submit represents the button with ID of submit, not the submit function.
You just need to change the ID for that button, and you're all good.

You have a naming conflict between the .submit() method and the:
<input type="submit" id="submit" value="Analyze File"/>
By having that id, a reference to it is being assigned to the submit property of the <form>, which replaces the method.
If you rename the <input>, you should be able to .submit() as expected:
<input type="submit" id="mainform_submit" value="Analyze File"/>

Submitting form using button on enter

I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.

While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };

Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});