We Keep Coding

Submitting a form to one of two different URL's

I have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.

Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.

In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>

hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.

jsp two buttons in a form and javascript form validation

I am working on a web project using structs2. I have a form with submit button and another button. I am using javascript functions for form validation. My problem is that when I click the other button the form validation function works.
my jsp:
<h2>New Form</h2>
<s:form action="aa.action" name="myform" method="post" onsubmit="return(validateForm())">
<s:textfield name="formnumber" size="20" />
.
.
<button value="add" name="add">Add</button>
.
.
<s:submit method="create" key="xxx" value="xxx" />
When i click anyone of the the button the validation function will excecute.I dont want excecute the validation function on add button click.

Default button always submit the form so add type="button" it will stop
<button type="button" value="add" name="add">Add</button>
OR Use
<input type="button" name="add" value="Add" />

Get rid of the onclick. You don't need it here. The type="add" already submits the form. Your concrete problem is likely caused because the onclick of the <form> has returned false.
<input type="button" name="method" value="Add" class="button"
onclick="location.href='Employeelist.jsp'" />

You should mention type="button".
Otherwise it will submit the current URL again.
<button type="button" value="Add" name="add"/>
details about "type" in html
http://www.w3schools.com/tags/att_button_type.asp
Java Script Form validation can be
w3schools
Tutorials point
javaScript Coder
if you familier with java script libraries you can use validate.js

type : What type of widget you want.
vlaue : The text what you want in that.
name : The id of that purticulat widget.

Onclick javascript stops form submit in Chrome

I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!

Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()

You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();

Creating multi purpose button in html

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc

Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>

<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input

Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.

I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works

HTML javascript form submitted when image input button

I have a form that contains this single input field, which is nothing more than a button to Print the current web page:
<div align="center">
<input type="image" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
After the printing, the page re-submits itself (to itself). Why does it do this and can I stop it?
If I just change the type to "input", this code does not re-submit itself after printing:
<div align="center">
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
Unfortunately, our style conventions require me to use that button image rather than the standard input button.

Change the onclick handler to onclick="printpage(); return false;" - that will prevent the button from doing anything besides running the JavaScript.

add 'return false;' to your onClick event:
onclick="printpage();return false;"

Have you tried adding a
return false;
at the end of your code
therefor
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();return false;" /></div>