I have a form where I have disabled the submit button. This button only gets enabled if I select a value of the dropdown. But I got a strange issue in IE and Chrome: if I press enter in the textbox, the form gets submitted (even though my submit button is disabled).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Form Submit</title>
</head>
<body>
<div>
<form method="post" action="/distributor-locations-global/index.html?qa=Y" >
<input type="hidden" value="" id="filter-url" name="filter_url">
<input type="hidden" value="SKF Distributor" id="filter_type" name="filter_type">
<input type="hidden" value="Y" id="filter_type" name="identifier">
<div class="field country-field full">
<select id="country" name="country" class="custom replaced" title="Sweden">
<option value="">Select location *</option>
<option value="1042">Albania</option>
<option value="1043">Algeria</option>
<option value="1064">Benin</option>
</select>
</div>
<div class="field zip-field full">
<input type="text" id="zip" name="zip" class="ui-disabled styled-text" >
</div>
<div class="button"><input type="submit" disabled="disabled" value="Show results" class="button styled-button"></div>
</form>
</div>
</body>
</html>
Submit button is not only way to submit the form, if you want to set some restrictions of form submit you have to use js function like this
add onsubmit="return validate();" in your form tag
e.g. <form method="post" action="/distributor-locations-global/index.html?qa=Y" onsubmit="return validate();">
add appropriate javascript function
<script>
function validate()
{
if (check_what_you_need_here==true) {
return true;
}
return false;
}
</script>
now each time form will be about to submit it will go to validate method, and only after it passes validation form will be send
you could disable the enter key on the form by using the below code in your header:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
Related
In the following code, I wanted the button "Add Lines" to:
run the function 'MoreRentals_fromSidebar' from code.gs in the SpreadsheetApp
then "google.script.host.close();" to close the sidebar
When I try to stack the commands, nothing happens. If I try to invoke the submitForm function to run the two commands, nothing happens (although I thought this was working last week and has now stopped).
Any suggestions would be appreciated.
<!DOCTYPE html>
<script>
function getDataFromHtml(idData) {
if (!idData)
idData = "mydata_htmlservice";
var dataEncoded = document.getElementById(idData).innerHTML;
var data = JSON.parse(atob(dataEncoded));
return data;
}
function initialize() {
var data = getDataFromHtml();
// I would have expected to be able to accept the two parameters but whichever is coded second does not get set.
//document.getElementById("myAgency").innerText = data.agency;
//document.getElementById("myRow").innerText = data.row;
// My workaround is to create the header of the sidebar to contain the agency and the line number
var arr = data.first.split("##");
document.getElementById('myTitle').innerText = arr[0]+"\n# line "+arr[1];
//alert(arr[0]+"\n\n"+arr[1]); // used for debugging
}
window.onload = initialize; //Note that there is no "()". It must be this way for this to work!
</script>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
//alert('in submitForm: '+document.getElementById("RentalLinesForm");
google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));
google.script.host.close();
}
</script>
</head>
<body>
<h1 id="myTitle" ></h1>
<form id="RentalLinesForm">
<label for="numLines">Number of lines to add</label>
<input type="text" id="numLines" name="numLines"><br><br>
<div>
<label for="location">Where to place the new lines:</label><br>
<input type="radio" id="above" name="location" value="above">
<label for="above">Above line</label><br>
<input type="radio" id="below" name="location" value="below">
<label for="below">Below line</label><br>
<input type="radio" id="bottom" name="location" value="bottom">
<label for="bottom">At bottom</label>
<br><br><input type="button" value="Add Lines" onclick="google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));">
<br><br><input type="button" value="DONE" onclick="google.script.host.close();">
</form>
</body>
</html>
I want to reset a form which will blank all input field and checkbox.
But here's my code doesn't work.
<form id="rwdPromotionDetailsAdd">
<input type="button" onclick="resetForm()" value="Reset form">
</form>
<script>
function resetForm() {
document.getElementById("rwdPromotionDetailsAdd").reset();
}
<script>
How can i reset a form ? Any better suggestion ?
You just need to insert this within a form
<input type="reset" value="Reset form">
Don't even have to attach a listener to it
<form id="rwdPromotionDetailsAdd">
<input type="button" onclick="resetForm($('#rwdPromotionDetailsAdd'))" value="Reset form">
</form>
<script>
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
<script>
Alright I could use a small tip here:
I have a form with two buttons, one has to submit the form and the other one has to reset the complete form.
The text - field keeps its value after every submit, but I would like to clear it completely with the reset button
<form method="post">
<input type="text" name="text" value="Clear Me Please">
<button type="submit" name="submit">Submit</button>
<button type="reset" name="reset">Reset</button>
</form>
I have a input field, submit button and a reset button. Upon submiting the form the user input will be inserted as value, because I dont want to lose the input. Now, when I type something into the field I can reset the form as planed, but after submiting the value now stays as supposed, but pressing the reset button resets the input to the value.
Example: I type in "TEXT", press Reset, gets reseted to "". Type "TEXT2", press Submit, gets submited, put in as value, field has now "TEXT2" written in. Replace "TEXT2" with "TEXT3", press Reset, now field contains "TEXT2" instead of "". I hope this is explaination enough.
may a little bit more you have to do
But his may help-Using Jquery
Edited Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
document.getElementById("myForm").reset();
$('#input').attr("value", "");
});
});
</script>
</head>
<form id="myForm" method="post">
<input type="text" name="input" id="input" value="<?= $_POST['input'] ?>"><br>
<button type="submit">Submit</button>
<input type="button" id="btn" value="Reset">
</form>
Orginal Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
values= $('#fname').val();
document.getElementById("myForm").reset();
$('#fname').attr("placeholder", values);
});
});
</script>
<head>
<form id="myForm">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" id="btn" value="Reset form">
</form>
jsfiddle linkhere
So what I have is a simple search form and submit button. What I want to do is validate the input to determine whether or not an "=" was included in the search query, if so then I want it to send the input string (que) to vert.php. If not then I would like it to send to search.php.
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.indexOf(=) == true) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>
Any help at all would be so grealty appreciated! :)
Change line 4 to if (document.myform.que.value.indexOf('=') != -1) {
You need to get the value of que, you need to enquote the equals sign (you're searching for the character '='), and the indexOf function returns either -1 if not found or the position of the first occurrence, which is an integer. It does not return a boolean value.
Here is the updated code:
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.value.indexOf('=') != -1) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>
I would suggest you perform this action with PHP. If your site visitor has JavaScript turned off, they won't get the benefit of your logic. I suggest you look at strpbrk() function to detect the "=" char.
I have 1 main search form with a submit button and several secondary search forms with submit buttons.
What I would like to do is when I enter text and click on the submit button of the main search form, the same text gets copied in all of the secondary search forms and all the submit buttons of the secondary search forms get automatically hit.
The HTML code for the mains earch form is shown below:
<form action="query.php" method="get">
Search: <input type="text" name="item" size="30">
<input type="submit" value="send">
</form>
One of the several secondary search forms is shown below:
<FORM action="http://www.dpbolvw.net/interactive" method="GET" target="_blank">
<div style="float: left; padding: 0 3px 0 0;">
<INPUT type="text" name="src" size="9"
value="<?php
$input = $_GET['item'];
echo $input;?>" style="width: 110px; height: 22px;margin:0; padding: 0; font-size:140%;">
</div>
<div style="float: left; padding: 0 3px 0 0;">
<input type="image" name="submit" value="GO" src="http://images.guitarcenter.com/Content/GC/banner/go.gif"
alt="Search" style="font-size:140%">
/div>
<input type="hidden" name="aid" value="1234"/>
<input type="hidden" name="pid" value="1234"/>
<input type="hidden" name="url" value="http://www.guitarcenter.com/Search/Default.aspx"/>
</form>
Notice the php code that I put in the "value" field of the secondary search form:
<?php
$input = $_GET['item'];
echo $input;?>
This automatically copies the text that I entered in the main search form into the secondary search form. I thus figured out how to do that.
The problem is to "simulate" an "Enter" keystroke or a click on the "GO" button with the mouse on the secondary search form when the user hits the Enter key or hits the "SEND" button with the mouse on the main search form.
Thank you for your insight!
I'm not sure what the point of that would be, It looks like all of these are search forms all pointing to different sites. Web browsers won't allow that. They can navigate to one page at a time. When you post a form to a page you are navigating to that page. Therefore, you are trying to navigate to several pages at once. It's like trying to be in Paris and London at the same time. I don't see how your plan will work the way you're describing it.
That said, You can use client-side javascript to call
document.forms[0].submit();
so if you can come up with a plan that does not involve trying to have the user see all the different search results in one window, you could try this on your first form...
<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">
You should use AJAX (JQuery) as Brandon Suggested. Read http://docs.jquery.com/Events/submit
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function() {
//Do you stuff here like triggering other submits
//Like:
$("input#submit2").click();
$("input#submit3").click();
return false;
});
});
</script>
</head>
<body>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" id="submit" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit2" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit3" />
</div>
</form>
</body>
</html>
Take a look at the submit() event in jQuery. That is going to be your key.
I am assuming that you are planning on submitting via ajax? Otherwise it is futile.
So you could do something like this-
Give all of your forms a certain class, let's call it 'ajax_search_forms'. So now you can actually hook into the submit event.
$('.ajax_search_forms').submit(function(){
var search_string = $('input[name=src]').val();
$('.ajax_search_forms').each(function(){
$.ajax({
url : $(this).attr('action'),
data : 'search_string=' + search_string,
success : function(html){
// Do something with the result
}
});
});
// Return false is VERY important so that the form submission does not continue
return false;
});