Develop Reference

Form Button Submit IE Issue

I have a form that is submitted by a button like this:
<input type="submit" form="billing-form" value="xyz" name="abc">
That submits a form like this:
<form method="POST" id="billing-form" action="something.php">
//bunch of fields here
</form>
The button submits the form fine in most browsers except IE.
Any ideas how to make this work in IE?! The button unfortunately has to be outside of the form itself which is why I'm using the billing-form name to reference.
Thanks,
NCoder

Well if using simple script is not a problem then you can simply use an input button and submit the from using js
<input type="button" form="billing-form" value="xyz" name="abc" onclick="submitForm();">
function submitForm()
{
document.getElementById('billing-form').submit();
}

Not going to work with the submit button outside the form without using javascript. See This question and answer.

prevent button submit form onclick

I have a problem on html button tag
This my html code
<form name="data_kirim" action="confirm_order.php" method="POST">
..... order input field ....
<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
How to prevent button to submit this form, because button is using the href to back page,
Can someone help me?

change
type='submit'
to
type='button'

<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<form name="data_kirim" action="confirm_order.php" method="POST">
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
A quick solution would be to move the back button outside the form since It's not using the form inputs anyway.

you can call a function in javascript when click your button, redirect to your link and return false or use preventDefault() function with jquery

<form onsubmit="return false;">

If you want to just make it link to another page and not submit the form then simply make it a normal button like so :
Next
This will not submit the form though.

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"/>

Best way to form submission without using form action in JavaScript

I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.

If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>

I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/

You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}

Submit form to another page (which is different from the page used in ACTION)

I have a form like this:
index.php
<form method="post" action="send.php">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
So, if I enter something in textarea and clicked on "Send", it is submitted to "send.php" page. But I want to include another button for previewing it. That is, when this button is clicked, the above form is submitted to "preview.php" which will be opened in a new blank window/tab (original page ie. index.php will be there intact). This is to display a preview of the message, that the user is going to send.
I do not know how to do this.

Use Javascript to temporarily change the action and target:
<form method="post" action="send.php" id="idOfForm">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
<button onclick="doPreview();">Preview</button>
<script type="text/javascript">
function doPreview()
{
form=document.getElementById('idOfForm');
form.target='_blank';
form.action='preview.php';
form.submit();
form.action='send.php';
form.target='';
}
</script>

There is now an attribute for the submit input that handles this:
<input type="submit" formaction=”differentThanNormalAction.php”>

Give your form an ID (form1). The action of the current form can be controlled like this:
function setPreview() {
$('#form1').attr('target','_blank')
$('#form1').attr('action','http://yourpreviewurl.php')
$('#form1').submit()
}
function setSubmit() {
$('#form1').attr('target','')
$('#form1').attr('action','http://yourposturl.php')
$('#form1').submit()
}
Have two buttons, both type="button", one to call setPreview and another to call setSubmit

You can use JavaScript to change the action of the form when the button is clicked and then submit it.
Or simply submit the form via AJAX and then redirect after you get a response.

<form onreturn="someJavascriptFunction()" action="" method="">
creating a js function able to open this preview page