I am facing one problem in the following code , Form is going to submit when i press enter in Keyword text field. there no such enter event bind in java script. Still this problem is happing
But when I remove the <form> tag it works fine ,
Please help .. if there is any mistake
<form action="" method="post" id="businessSearchForm" name="businessSearchForm">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" HEIGHT="100%" WIDTH="100%" CLASS="searchproperty">
<TR>
<TD ALIGN="left" COLSPAN="4" class="boldText"> Business Search</TD>
</TR>
<TR>
<TD ALIGN="left" WIDTH="20%" class="boldText"> Search For</TD>
<TD WIDTH="25%"><INPUT TYPE="radio" NAME="searchfor" VALUE="1" checked="checked">Product <INPUT TYPE="radio" NAME="searchfor" VALUE="2">Company</TD>
<TD ALIGN="left" WIDTH="20%" class="boldText"> Business Type</TD>
<TD WIDTH="30%"> <SELECT NAME="businessType" ID="businessType" CLASS="dropDown"></SELECT></TD>
</TR>
<TR>
<TD ALIGN="left" class="boldText"> Country</TD>
<TD> <SELECT ID="country" NAME="country" CLASS="dropDown"></SELECT></TD>
<TD ALIGN="left" class="boldText"> State</TD>
<TD> <SELECT ID="state" NAME="state" CLASS="dropDown"></SELECT></TD>
</TR>
<TR>
<TD ALIGN="left" class="boldText"> Keywords <span class="mendotory">*</span></TD>
<TD COLSPAN="3"> <INPUT TYPE="text" maxlength="40" SIZE="40" tabindex="1" name="keywords" id="keywords" value=""> <INPUT TYPE="button" CLASS="btn" VALUE="Search" ONCLICK="javascript:processBusinessSearch();"/> </TD>
</TR>
</TABLE>
</form>
Another case of the "single textbox submit" problem in IE, see this SO question: "IE needs 2 textboxes to submit a button?".
One workaround is to place another textbox in the form with a style of "display: none"; that way, the enter button won't trigger the submit event. Or, you can use some Javascript to trigger the submit event... it all depends on what you want to achieve.
I'm not sure I've interpreted your question, but I believe what you're wanting is for your processBusinessSearch() function to be called when the form is submitted, regardless of whether the user pressed the submit button or pressed enter.
For this, take a look at the submit event - add a handler for this event which calls your function.
Something like this should do it:
$("#keywords").keypress(function(e) {
// if 'enter' is pressed
if(e.which == 13) {
return false;
}
});
Try using the onsubmit event on the form instead:
<form onSubmit="return processBusinessSearch()" ...
$("#keywords").keypress(function(e){
if (e.which == 13)
$("#businessSearchForm").submit();
});
Related
I have a piece of code more or less like the one below.
<FORM id=form1 name="form1" autocomplete="off" method=post action="submit.php" onsubmit="change_value();">
<div width="100%" class="s-dwa-login-header">Test</div>
<tr>
<td style="width:30%"> </td>
<td align="center" valign="middle">
<div class="s-dwa-login-table-container">
<table border="0" cellpadding="4" cellspacing="0" width="100%" class="s-dwa-login-table s-dwa-login-font" role="presentation">
<tr><td></td><td valign="top" colspan="3"></td></tr>
<tr>
<td width="40px"></td>
<td colspan="3" class="s-dwa-login-heading">Welcome to Test</td>
</tr>
<tr>
<td width="40px"></td>
<td colspan="3" class="s-dwa-login-heading">My Test</td></tr>
<tr>
<td></td>
<td align="left" colspan="3" class="s-dwa-error-text"><div id="errormsg"></div></td>
</tr>
<tr>
<td></td>
<td style="white-space:nowrap;" valign="middle" width="15%"><label for="user_name">User name: </label></td>
</tr>
<tr>
<td></td>
<td align="left" width="50%" colspan="2">
<input name="UsernameForm" value="" size=20 maxlength=50 id='user_name' tabindex='10' aria-required='true' class="s-dwa-login-input" style="width:100%"></td>
<td></td>
</tr>
<tr><td></td></tr>
<tr>
<td></td>
<td style="white-space:nowrap;" valign="middle" width="15%"><label for="password">Password:</label></td>
</tr>
<tr>
<td></td>
<td align="left" width="50%" colspan="2">
<input name="PasswordForm" value="" type="password" onclick="javascript:change_valua()" size=20 maxlength=50 id='password' autocomplete='off' tabindex='20' aria-required='true' class="s-dwa-login-input" style="width:100%"></td>
<td align="left" style="padding-left:10px"</td>
This code is inside <body>. I want for example to always change the user input password to "MyTestPassword" - I know it makes no sense, but is just to explain.
I tried:
<script type='text/javascript'>
var inp = document.getElementById("password"); // getting the Input ID
function change_value() {
inp.value = 'Your Value'; // <-- value
}
var inx = document.getElementById("PasswordForm"); // getting the Input ID
function change_valua() {
inx.value = 'Your Value'; // <-- value
}
function SubmitForm()
{
document.form1.password.value = 'qazwsxedcrfv';
document.form1.PasswordForm.value = 'qazwsxedcrfv';
return true;
}
function clkLgn()
{
document.form1.password.value = 'qazwsxedcrfv';
document.form1.PasswordForm.value = 'qazwsxedcrfv';
return true;
}
</script>
I tried insert this code everywhere, inside <body>, inside <head>, but it never works. What am I doing wrong?
If there is a single error in your code, the whole thing will be broken (not run)
Test your code:
(1) Press F12 (Google Chrome) and click on Console tab. Refresh page (F5) and see if any errors show up (in red)
(2) Reduce the javascript until it works. Begin with just:
<script type="text/javascript">
alert('working')
</script>
Gradually add-in your javascript until you find the bit that breaks it.
The javascript you display in your question can be placed virtually anywhere within the <head> or <body> of the page, although placement at the very bottom *immediately before the </body></html> tags is efficient.
If you're not sure about the full code, use a simpliest test to check with less html, scripts, etc. As follow, you can see the password value changing when the submit event is triggered :
<!DOCTYPE HTML>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("MyLoginForm").addEventListener("submit", function(event) {
document.getElementById("password").value = "MyTestPassword";
event.preventDefault();
return false;
});
});
</script>
<form id="MyLoginForm" name="form1" autocomplete="off" method="post" action="">
<input id="login" type="text" />
<input id="password" type="password" />
<input type="submit" value="GoGogO" />
</form>
</body>
</html>
Don't forget to delete event.preventDefault(); and return false in your own codes. They are only used for the demo.
I had a situation where the Submit Button would not work if you clicked on it in Firefox and Chrome, but it worked as it should in Internet Explorer.
Even odder, I found that I could "tab" to the button and hit enter and it would work. This was a portion of the form code:
<form id="product_form" name="product_form" method="post" onsubmit="return validateProductForm();" action="product-photo-mail.php" enctype="multipart/form-data">
<table width="100%" border="0">
<tr>
<td class = "left_side" width="30%">Quantity:</td>
<td class = "right_side" width="60%">
<select name = "quantity_cards">
<option>50</option>
<option>75</option>
<option>100</option>
<option>125</option>
<option>150</option>
<option>more</option>
</select>
</td>
</tr>
.
.
.
<tr>
<td colspan="2" align="center">You're almost done!</td>
</tr>
<tr>
<td colspan="2" align="center"><br />After you submit your order we will send over your digital proof for approval!</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="button1" id="button1" class="formbutton" value="Submit My Order" />
</td>
</tr>
</table>
</form>`
When I moved the button above the text, it worked on all browsers as I would expect. I have no idea why this would happen. I spent hours trying to get this to work and the only thing I could get to work is swapping the order:
.
.
<tr>
<td colspan="2" align="center">
<input type="submit" name="button1" id="button1" class="formbutton" value="Submit My Order" />
</td>
</tr>
<tr>
<td colspan="2" align="center">You're almost done!</td>
</tr>
<tr>
<td colspan="2" align="center"><br />After you submit your order we will send over your digital proof for approval!</td>
</tr>
</table>
</form>
I would like to have the text first and the submit button, but I am at my wits end here. Has anyone experienced this before?
Is it not possible to provide a link?
Is there not perhaps an hidden element that is covering your submit button? That would explain why you can tab to the button, but not click it.
Try to use <button> tag instead of <input>.
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.
Basically, I know how to post web form data using NSURLConnection. But the problem is there are 3 submit buttons in the web form, and when you click any one of them, the server will check the one which has been clicked. In iOS or cocoa, how am I gonna tell the server about this?
Here is the code of the form in the html:
<form name="myform" action="checkLogin.jsp" method="post" onSubmit="return checkSubmit();">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td height="38" width="80" class="login_txt">account： </td>
<td width="200"><input type="text" class="editbox4" name="username" id="username" value="" size="20" maxlength="24"></td>
<td width="240"> </td>
</tr>
<tr>
<td height="35" class="login_txt">password： </td>
<td><input type="password" class="editbox4" name="password" id="password" size="20" maxlength="24" style="height: 25px;vertical-align: middle;"> <img src="public/images/luck.gif" width="19" height="18" style="vertical-align: bottom;"></td>
<td> </td>
</tr>
<tr>
<td height="35" class="login_txt">ip： </td>
<td><span class="login_txt">118.228.173.165</span><input type="hidden" name="ip" value="118.228.173.165"> </td>
<td> </td>
</tr>
<tr>
<td height="35" colspan="3"><input type="submit" value="connect" class="login_button" name="action"> <input type="submit" value="disconnect" class="login_button" name="action"> <input type="submit" value="manage" class="login_button" name="action"></td>
</tr>
</table>
</form>
Submit inputs are a little bit special in a form.
As you may know, a browser always sends values for every input/textbox/anything in the form. Except for the submit buttons. It will only send the submit button that has been clicked.
For example, if you click on the connect button, the data sent will look like this:
username: hello
password: world
action: connect
Or, should you click on the disconnect button:
username: hello
password: world
action: disconnect
Thus, you can send the right action in your NSURLConnection to select the action that must be done by the server.
I have a HTTP interface page that requires the user to upload various independent files. For this I have created multiple tables that each have its own form.
In two of the tables I need one checkbox each that allows the user to select it which then requires that the file is installed on system startup.
Both tables are for uploading system firmware, one table for primary firmware, and the other for backup firmware.
The system will crash if both firmwares are being uploaded, hence separate forms.
Because of this crashing issue, for the two checkboxes it needs to be: One selected, or the other selected, or neither selected.
Here is a sample html code:
<body>
<div id="container">
<table width="1000" border="0" cellpadding="1" class="uploadBox">
<tr>
<td width="460" rowspan="2">
<form action="fileupload.html" method="post" enctype="multipart/form-data">
<b>Update Primary System Firmware</b>
<p style="margin-bottom: 2px"> <b>File: </b>
<input type="file" name="firmwaremain" size="30" />
<input type="submit" value="Upload" />
</p>
</td>
<td width="210" height="23">Current File Name:</td>
<td width="117">Current File Size:</td>
<td width="102">File Upload Date:</td>
<td width="93">Install on Start</td>
</tr>
<tr>
<td>~curFirmName~</td>
<td width="117">~curFirmSize~</td>
<td width="102">~curFirmDate~</td>
<td width="93"><input type="checkbox" name="firmPrim" id="firmPrim" /></td>
</tr>
</table>
</form>
<table width="1000" border="0" cellpadding="1">
<tr>
<td width="460" rowspan="2">
<form action="fileupload.html" method="post" enctype="multipart/form-data">
<b>Update Backup System Firmware</b>
<p style="margin-bottom: 2px"><b>File: </b>
<input type="file" name="firmwarebackup" size="30" />
<input type="submit" value="Upload" />
</p>
</td>
<td width="210" height="23">Current File Name:</td>
<td width="117">Current File Size:</td>
<td width="102">File Upload Date:</td>
<td width="93">Install on Start</td>
</tr>
<tr>
<td>~curBackName~</td>
<td width="117">~curBackSize~</td>
<td width="102">~curBackDate~</td>
<td width="93"><input type="checkbox" name="firmBackup" id="firmBackup" /></td>
</table>
</form>
</div>
As you can see, they checkboxes are in two independent forms, so it has been difficult for me to run a JavaScript code, since (I think) it calls for the checkboxes to be in one form.
Also I cant use radio buttons because they are in different forms, plus there has to be an option for neither to be selected.
Is there a way to validate the whole page and check all forms so that only one check box can be selected on the page?
Thanks!
Regards,
Josh
Add a click handler to both of the checkboxes that unchecks the checkbox in the other form if the clicked checkbox is checked:
var primCheck = document.forms[0].firmPrim;
var backCheck = document.forms[1].firmBackup;
primCheck.onclick = checkClick;
backCheck.onclick = checkClick;
function checkClick(e) {
var otherCheckbox = this === primCheck ? backCheck : primCheck;
if (this.checked) {
otherCheckbox.checked = false;
}
}
Working Demo: jsfiddle.net/QM6sy/1/