How to submit one html form to difference actions - javascript

I have small form and links created like this
Contact | Message
<form name="selectform" action="save.php" method="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>
When I click "Contact" link, form submit correctly, And If I click "Message" link how to set this form submit to another url
for an example: if i click "Message" link, I want to submit form to edit.php and without using traget="_blank"

You can change the form action using attr() method of jquery,
For example
$('#link1').click(function(){
$('#formId').attr('action', 'page1').submit();
});
$('#link2').click(function(){
$('#formId').attr('action', 'page2').submit();
});

Here you go...
Contact | Message
<form name="selectform" action="save.php" methode="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>

Try it like,
Change in HTML
Message
SCRIPT
$('#msgSubmit').on('click',function(e){
e.preventDefault();
$('form[name="selectform"]').attr('action','edit.php')
.removeAttr('target')
.submit();
});

You can use onclick event
<script>
function submitForm(action)
{
document.getElementById('form1').action = action;
document.getElementById('form1').submit();
}
</script>
...
Contact
<a href="#" onclick="submitForm('page2.php')" value="submit 2" >Message</a>

I have done some modification in your code.
please check and let me know.
Contact | Message
<form id="selectform_id" name="selectform" action="" method="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>
<script type="text/javascript">
function myaction(actn){
document.getElementById("selectform_id").action = actn;
document.selectform.submit();
}
</script>

Related

How to prevent browser from opening a new page on form submit?

There's an email subscription form in a web page, When someone enters his email and clicks on submit button, We don't want this page to be redirected to form action url, We just want it's submit button text value to be converted to another text, something like "Thank You!". How is it possible? Should I go through ajax? or javascript?
Here's the form:
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>
For starters remove target="_blank" from your form tag.
Then, within your jQuery, do something along the lines of this:
$(".ml-block-form").submit(function(){
var vals = $(this).serialize();
$.ajax({
url: "postpage.php",
method: "POST",
data: vals,
success: function(data) {
$("#formsubmit").val("Thank you!");
}
});
return false; // prevent from submit
});
I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:
<form class="ml-block-form" action="" data-code="myownID" method="post">
<input id="mainval" type="email" name="fields[email]" placeholder="Email*">
<input id="hiddenval" name="ml-submit" value="1" />
<input id="formsubmit" type="submit" value="Get Updates!"/>
</form>
You can simply remove target="blank" because blank value opens the linked document in a new window.
Instead of
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
use
<button id="newsletter-submit" value="Get Updates!"/>
(note that I changed class for id)
And then use jQuery to handle the click on the button:
$("#newsletter-submit").click(function () {
$(this).prop("value", "Thank You!");
// do something else with the input values e.g. send them via ajax to a server script
});

Using Javascript To redirect am embedded Form when submit button is clicked

I want a javascript to redirect the embedded form below when the submit button is clicked
The form is below
<div class="o-form-header"><h2 id="o-form-title">Mail List Subscription Form</h2><p id="o-form-description">Please fill in and submit the form below to subscribe to our mailing list.</p></div> <form action="http://sendfree.com/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><label for="FormValue_EmailAddress">Email Address</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress"/></div><div class="o-form-row"><label for="FormValue_CustomField689">Your Name</label><input type="text" name="FormValue_Fields[CustomField689]" value="" id="FormValue_CustomField689"/></div> <input type="hidden" name="ret_s" value="44" /> <input type="submit" name="FormButton_Subscribe" value="Submit" id="FormButton_Subscribe"/><input type="hidden" name="FormValue_ListID" value="8085"/><input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command"/></form>
The javascript I use below but it not redirecting to google.com after the submit button is clicked
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
window.location.href="http://www.google.com"
}
</script>
Please Help
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
location.replace("http://www.google.com");"
}
</script>
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function(event)
{
window.location="http://www.google.com";
event.preventDefault();
}
Default action on form button click is submitting of form, so we should prevent it.
I used Eventlistener but not still redirecting, check what may be wrong as am not good in javascript
<script>
document.getElementById("FormButton_Subscribe").addEventListener("click", function(){
window.location.href=" http://www.google .com";
});
</script>

redirect to another page using onsubmit or action?

I am trying to direct to another page on particular event occurrence ...This is my code..but it does not direct to another page but the JavaScript code works...
<form class="list-group-item" method="get" onsubmit="action='Search.jsp'; myFunction('name');return false;" >
<input type="hidden" name="item" value="<%=1%>">
<i class="fa fa-arrow-circle-right fa-fw "></i> <span onsubmit="action='Search.jsp'" onclick="action='Search.jsp';document.getElementById('div1').style.display = 'block';setValue('Subject')" style="margin-left:1%">Subject </span>
<span class=" text-muted small" onclick="document.getElementById('div1').style.display = 'block';setValue('Subject And')" style="margin-left:40%"><em> And <i class="fa fa-angle-down "></i></em>
</span>
</form>
First I tried action="search.jsp" outside onsubmit but that didn't work..I am new to all this and I don't know what to do?
Add an button inside <form> tag
<input type="submit" value="Submit">
Add action attribute in form tag
action="Search.jsp"
Whenever you click Submit button, the page will be redirected to Search.jsp
1) If you simply want to get it redirected to Search.jsp after form submission, remove all crap JS code from your form and add a simple action attribute in form tag.
2) Action attribute behaves as redirect if you submit the form.
3) Writing JS code within HTML Tags is a bad convention. Always write JS code within <script>..</script> blocks or a different JS file and then include it.
<form class="list-group-item" method="get" action="Search.jsp" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
OR
You can ajaxify your code (meaning submit the form through ajax and then redirect).
<form class="list-group-item" method="get" action="Search.jsp" name="search" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
<script>
$(function(ev){
ev.preventDefault();
$("form:[name='search']").on("submit", function(){
var form = $(this);
var data = form.serialize();
var action = form.attr("action");
$.get(action, data)
window.location.replace("http://stackoverflow.com");
});
});
</script>
Simply return true from the myFunction and use <input type="submit"> to submit the form.
Sample code: (read inline comments)
<script type="text/javascript">
function myFunction() {
/* return false in case of validation fail */
alert("Hi");
return true;
}
</script>
<form class="list-group-item" action="Search.jsp" method="get"
onsubmit="return myFunction()">
<!-- other fields -->
<input type="submit" value="Submit" />
</form>

I have 1 form with 2 submit buttons

I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)

How to disable submit action

Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

Categories

Resources