Develop Reference

How to stop Redirecting a page when a form is submitted?

I'm using a form and when the form is submitted I used action attribute and called a server url where the form data gets saved
Here's how it looks :
<form name="example" action="webresources/data/update" method="post">
</form>
The above form when submitted updates the form data in to the server but at the same time it also takes me to the new page webresources/data/update which has nothing but server response
I don't want this response to be shown on the web page. The url should be called when the form is submitted and it should be on the same page without redirecting to a new page.
Is there any way to do this, I'm allowed to send the data only via form parameters.
Thank you in advance :)

Remove the action attribute in the form and put the button outside the form.
When onclick, make an ajax call.
<form>
stuff
</form>
<input type="button" onclick="ajax()">
<script>
function ajax(){}
</script>

<form name="example" action="webresources/data/update" method="post" onclick="return false">
</form>
Returning false will stop the page from reloading or refreshing.
I suggest that before you ask a question you do a quick google search because this was the first result that came up for me prevent form submit from redirecting/refreshing using javascript.

Ajax call on form submission - MVC 5

The Goal:
Use an ajax call to either bring back information from database if the user supplied correct information, or if the user is a new user then it will return redirectToAction and send the user to another form. I want to do all of this using either parsley or bootstrap validator (I want to use these tools so that I can put the validator in the input and once I click on submit it will validate the form, but will not submit it. I also want it to have the same look, so the fields highlight similar to http://1000hz.github.io/bootstrap-validator/ The ajax call will handle the decision)
The problem:
Here is a similar form:
<form action="" id="application">
First Name: <input type="text" name="first" required/>
Last Name: <input type="text" name="last" required/>
<button type="submit">Submit</button>
</form>
When one clicks on this form, if the user has not supplied the first and last name it will not submit the form.
What I want it to do is if the user has supplied this information it will not go to the action but will instead execute the ajax call and never submit the form from the button press similar to $(button).click(function (){//do stuff});(the ajax call will handle the submission, my guess here is that we can substitute this ajax call for any JavaScript function).
Finally:
I have read about the e.preventdefault but it did not seem to work for me. How can I get the form to validate the inputs but never actually submit (unless the ajax allows it to). Can you give me an example of how I would do this? Or is this something that cannot be done? Should I do something similar to this Validate Form preventing form submission

Add an onsubmit event on the form, for example,
<form onsubmit = "DoSubmit(this);return false;">
DoSubmit: function()
{
//validate the form and decide submit or not
if($(form).valid())
{//if form valid, this is done by form validation itself
$(form)[0].submit();
}
else
{
//do nothing or do whatever
}
}

Use data-attribute for form action?

I have a client who really hates captcha but it is needed otherwise there are too many spam submissions. I had a person recommend the following:
Have your web form and only have the form action in a data tag (html5) and then on completion of the form and submit the form process actions that action in. No form action, no bot can fill it in and submit and no modification to how your form looks or operates.
If I have a form that looks like this:
<form action="/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm15174(this)" method="post" name="catwebformform15174">
How would I modify the action URL to use data-attribute? Would it require JS to function? How does the idea work?
Note: I searched Google and I could not find any information on using data-attribute and from action. Also I am using jQuery 2.0.3 on the site.
Any guidance is welcome.

How it would work, on form submit (call this swapAction when your current checkWholeForm15174 validates)
function SwapAction() {
var dataAttr = $('#myFormName').data();
$('#myFormName').get(0).setAttribute('action', dataAttr.action);
}
assuming your form was modified to look like:
<form action="" data-action="/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm15174(this)" method="post" name="catwebformform15174">

Prohibit the sending of the form

On the page after clicking "submit" form is submitted. But I forbade controller ctrlPersonalData form submission (return false)
Please help me cancel the sending of the form after clicking "submit"

This is a simple HTML trick but should work for you:
<form onsubmit="return false;">
...
</form>
Please take this as a starting point and not as a copy-paste solution.

Remove the action="#" attribute from the form. Also in AngularJS you dont make a form post you make ajax calls with model data.

Thank you alert upon form submission

I have a very basic form at http://www.happyholidaylites.com/contact.html and it is working great. When you submit the form, the user is brought to the index.html with no message that the form has been sent. I am looking to initiate an alert that says, "your form has been submitted" with an x button. My code looks like this:
<form method="post" id="myForm" action="dynaform.php">
<input type='hidden' name='rec_mailto' value='JBIRD1111#gmail.com'>
<input type='hidden' name='rec_subject' value='New Contact Form'>
<input type='hidden' name='rec_thanks' value='index.html'>
so on and so forth.....
The last line is what is telling the form what to do after the submit button is pressed, but I dont want it to point the browser to the index, rather I want a javascript popup with a success message. Any ideas?

Why not a simple onSubmit?
<form method="post" id="myForm" action="dynaform.php" onSubmit="alert('Thank you for your feedback.');" >

To be honest you are better re-directing to another page in order to avoid the user re-submitting the page on a refresh. Have a look at Post/Redirect/Get Pattern.
Popups can be extremely annoying on websites. You should create a page called "thank-you.html" that you can re-direct the user to on successful submission which has access to the site navigation options or even just do a re-direct back to the form page after a few seconds.

Instead of redirecting to index.html, redirect to thanks.html; your users will thank you because everybody hates popups!

Sounds like your PHP script handles the form submission by processing the input and redirecting the browser to the value in the rec_thanks field.
You can add something like onsubmit="YourJavaScriptFunction()" to the form tag to add client-side behavior prior to actually submitting the form. Within that function you can perform validation, use alert('Thank You!'), etc..