Develop Reference

HTML Form, onclick="this.disabled=true;this.value='Sending, please wait...'; return false;" disables the button but never submits the form

I am making a simple image board and the onclick function is being very finicky.
<div id="makeApost">
<form name="post" method="post" action="post.php?new" enctype="multipart/form-data" >
<table class="postForm" id="postForm">
<caption><h1>Create Thread</h1></caption>
<tr data-type="Comment">
<td style="background-color:#ff33ff;">Comment</td>
<td>
<textarea id="com" name="com" cols="48" rows="4" wrap="soft"></textarea>
</td>
</tr>
<tr data-type="File" >
<td style="background-color:#ff33ff;">File</td>
<td><input id="file" name="file" type="file"></td>
<td><input id="submit" type="submit" onclick="this.disabled=true;this.value='Sending, please wait...'; this.form.submit();"></td>
</tr>
</table>
</form>
</div>
This is the post form, i have also tried:
<td><input id="submit" type="submit" onclick="this.form.submit();this.disabled=true;this.value='Sending, please wait...';"></td>
But this does not disable the button when it has been pressed and allows for multiple submits which could lead to spamming.

Disable the button on submit of the form, not the click of the button.
<form onsubmit="document.getElementById('btnSubmit').disabled=true;">
<input type="submit" id="btnSubmit" />
</form>

How to disable Submit button is get method?

I want to search dog so When i click on submit button the URL looks like http://localhost/myproject/search.php?q=dog&submit= i want to disable the submit button is the URL navigation it will look http://localhost/myproject/search.php?q=dog.
My code -
<form id="formSearch" name="formSearch" method="get" action="search.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="67%" align="right" valign="top">
<input type="text" name="search" id="search" class="search_text_box" placeholder="Search" autocomplete="off"/>
</td>
<td width="33%" align="left" valign="top">
<input type="submit" name="submit" id="button" value=" " style="cursor:pointer;" class="search_btn" />
</td>
</tr>
</table>
</form>
Please help me how to disable the submit button in URL Navigation?
If any jquery or javascript code please post your answer below
Search Image Screenshot

Don't give the submit button a name attribute.

Remove name attribute in to your submit button
<form id="formSearch" name="formSearch" method="get" action="search/">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="67%" align="right" valign="top">
<input type="text" name="search" id="search" class="search_text_box" placeholder="Search" autocomplete="off"/>
</td>
<td width="33%" align="left" valign="top">
<input type="submit" id="button" value=" " style="cursor:pointer;" class="search_btn" />
</td>
</tr>
</table>
</form>

in add to quentin:
when u use GET method the query string goes to the server via URL in the 'name=value' form.so if u dont want to show the submit in the URL than remove the 'name' attribute from the submit.
and instead u can use $_POST method if u dont want to send your query string via URL.

if you want to customize the code with input type submit name you can use javascript or jquery
Code :
window.location='/search.php?q='+qvariable;
otherwise remove the name attribute in input type=submit
<input type="submit" id="button" value=" " style="cursor:pointer;" class="search_btn" />

Try this:
Here you can set method="post" in the form tag OR
Remove name from property from submit button.

HTML forms validation with a FILE input object

I've been pulling my hair out trying to add a FILE input object to a form on one of my intranet web pages. I saw this article (HTML <input type='file'> File Selection Event) and wondered if this is why even though I have an [onSubmit] handler linked in the tag, as soon as I add the object, it no longer fires the onSubmit event at the form level. Is there a way to tie it all together so I can still validate the other input objects on the same form before going to the handler URL? I need this to work in IE8, and Chrome 20+ mostly. Any help would be greatly appreciated.
Javascript:
function CheckForm(theForm) {
var formName = "form1";
var formx = document.getElementById(formName);
if (formx.appname.value == "") {
alert("Please enter the \"APPLICATION NAME\"...");
formx.appname.focus();
return(false);
}
if (formx.vendor.value == "") {
alert("Please enter the \"VENDOR NAME\"...");
formx.vendor.focus();
return(false);
}
if (formx.srcfile.value == "") {
alert("Please select the "\FILE NAME\"...");
return(false);
}
return (true);
}
HTML:
<form name="form1" id="form1" method="post" language="JavaScript" onSubmit="return CheckForm(this);return false;" action="appform2.asp">
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#c0c0c0">
<tr>
<td>Product Name / Version</td>
<td>
<input type="text" id="appname" name="appname" size="50" maxlength="255"/>
</td>
</tr>
<tr>
<td>Vendor Name</td>
<td>
<input type="text" id="vendor" name="vendor" size="50" maxlength="255"/>
</td>
</tr>
<tr>
<td>Source Binaries</td>
<td>
<input type="file" name="srcfile" id="srcfile"/>
</td>
</tr>
</table>
<p>
<input type="reset" name="b2" id="b2" value="Reset"/>
<input type="submit" name="b1" id="b1" value="Submit"/>
</p>
</form>

Replacement for action of 2 forms with one anchor tag

I am a noob when it comes to HTML. I have a HTML template. In this template, I am trying to replace two form tags with a tag. Both form have different action defined. I need an a tag equivalent of performing the same actions what the two forms performed.
Here is my HTML code:
<form target="_top" action="###URL###/spg/proxy" method="POST"></form>
<form method="POST" action="###S_URL###" target="_top">
<td class="buttonbg" colspan="2">
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###PROXY_VIEW_UNPROXIED###" style="*padding:0 4px;" name="###PROXY_VIEW_UNPROXIED###" />
</td>
</form>
finally I desire like this:
<td class="buttonbg" colspan="2">
<a href="**CODE**" onClick="**CODE**" >
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###PROXY_VIEW_UNPROXIED###" style="*padding:0 4px;" name="###PROXY_VIEW_UNPROXIED###" /></a>
</td>
I googled and found solutions saying that "Add two Javascript functions func1 and func2. Now call func2 in func1. Set func1 as onClick event in a tag."
But I am considering this as a last option, is there any better way of doing this?
EDIT:
If you want to see whole of my HTML code here:
<div id='results_header'>
<form action="###CGIBASE###/search" autocomplete="off" method="POST" name="blah1" id="search_form" onSubmit="return verifyChecked(this);" target="_parent">
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id='input_p'>
<input type=hidden name=cmd value="process_search">
<input type=hidden name=language value="###LANGUAGE###">
<input type=hidden name=enginecount value="1">
<input type=hidden name=pl value="">
<input type="hidden" name="abp" class='abp' value="-1" />
<input type=hidden name=ff value="">
<input type=hidden name=theme value="">
<input type=hidden id=flag_ac1 name=flag_ac value="0">
<input name="cat" type=hidden value="###CAT###">
<input type='text' autocomplete='off' name='query' id='query_top' value="###ESCAPEQUOTEDQUERY###" style="width:256px\9;" >
</td>
<td><input type='image' src='graphics/stp_search.gif' id='submit1' style="margin-left:0\9;"/></td>
<td class="mesg"><p style="visibility:hidden"></p></td>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="buttonwrap">
<tr>
<td class="buttonbg"><a href="###HIGHLIGHTERBACKBUTTONREFERRER###" target="_top" onClick="return goback('###HIGHLIGHTERBACKBUTTONREFERRER###');" style="text-decoration: none;">
<input type="button" class="buttoned" value="###HIGHLIGHTERBACKBUTTON###" style="*padding:0 21px;"/ name="BACKBUTTON"></a>
</td>
</tr>
</table>
<span class="return_result_page">###HIGHLIGHTERBACKBUTTONDESC###</span></td>
<td width="25"><img src="graphics/spacer.gif" width="25" height="1"/></td>
<td>
<form style="margin:0; padding:0" target="_top" action="###SCRIPTURL###" method="POST">
<table border="0" cellspacing="0" cellpadding="0" class="buttonwrap">
<tr>
<form target="_top" action="###CGIBASE###/spg/proxy" method="POST"></form>
<form method=POST action="###SCRIPTURL###" target="_top">
<td class="buttonbg">
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###LINKUNHIGHLIGHTED###" style="*padding:0 4px;" name="submit" />
</td>
</tr>
</table></form>
<span class="return_result_page" style="*margin-top:-20px;">###VIEWUNHIGHLIGHTED###</span>
</td>
</tr>
</table>
</div>

Simple form validation

POST #1
How can I validate this simple form (checking for empty field strings)?
<p>Please select your Gift Certificate amount below. Please also enter your name and the Gift Certificate recipient's name. Once you click 'Buy Now' you will be sent to our Paypal site to complete the purchase.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
<table width="100%">
<tr>
<td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
<td><select name="os0">
<option value="Option 1">$20.00</option>
<option value="Option 2">$50.00</option>
<option value="Option 3">$100.00</option>
</select></td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
<td><input type="text" name="os1" maxlength="60" size="30"></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
<td><input type="text" name="os2" maxlength="60" size="30"></td>
</tr>
</table>
<table width="100%" style="margin-top: 10px;">
<tr>
<td><input type="hidden" name="currency_code" value="CAD">
<p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
<td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
</tr>
</table>
</form>
POST #2
function validate_form()
{
valid = true;
if ( document.GiftForm.os1.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
-=-=-=-= Form
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" method="GiftForm" onsubmit="validate_form( )">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
<table width="100%">
<tr>
<td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
<td><select name="os0">
<option value="Option 1">$20.00</option>
<option value="Option 2">$50.00</option>
<option value="Option 3">$100.00</option>
</select></td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
<td><input type="text" name="os1" maxlength="60" size="30"></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
<td><input type="text" name="os2" maxlength="60" size="30"></td>
</tr>
</table>
<table width="100%" style="margin-top: 10px;">
<tr>
<td><input type="hidden" name="currency_code" value="CAD">
<p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
<td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
</tr>
</table>
</form>

Is jQuery an option? There's a really nice Validation tool http://docs.jquery.com/Plugins/Validation

A couple of hints that should get you going.
Add a submit event handler:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validate()">
Give IDs to the input fields you want to get.
<input id="currency_code" type="hidden" name="currency_code" value="CAD">
Write the validation code, return false if you don't want to submit.
<script type="text/javascript">
function validate() {
var currencyCode = document.getElementById("currency_code");
var ok = currencyCode.value !== '';
return ok;
}
</script>

Give your form a name (GiftForm)
<script type="text/javascript">
function validate_form ( )
{
valid = true;
if ( document.GiftForm.os1.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
</script>

Here is a simple tutorial along with demo and source code, I hope this works for you, all the best!
http://gonga.in/simple-javascript-form-validation/