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
Related
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>
I need form with one text box and submit button, and that's should be used for taking number from the user and open my site url + the number.
For example:
User will type in the text field : 44
Then he press the button.
The page should take the number and open a link like this :
http://localhost/44
<form action='http://example.com'>
<input type="text" name="number">
<input type="submit">
</form>
You have to use jquery + form like below may help you
<form method="get">
<input type="text" name="num" id="num" />
<input type="button" class="submit" value="Go">
</form>
<script type="text/javascript">
$('.submit').live('click',function(){
var url = "http://www.example.com";
var input = $('#num').val();
alert(input);
window.location.href=url+'/'+input;
});
</script>
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>
What needs to be done to have this form submitted when someone hits the 'enter' key?
<form id="search" onsubmit="javascript:search(document.getElementById('searchText'))">
<input type='text' id='searchText' autofocus />
<input type='button' onclick="search(document.getElementById('searchText'))" value='Search' />
</form>
You can just use a form as below, with input type submit, which in this case, if you press enter in any input - if you had more of them - it will be a default behaviour of the form to be submitted:
<form id="search">
<input type='text' id='searchText' />
<input type='submit' value='Search' />
</form>
or, as it shows, you want to use the onsubmit function and handle the "submit" of the form, so you can do this:
<form id="search" action="#">
<input type="text" id='searchText' name="myinput" onkeypress="handle" />
</form>
<script>
function handle(e){
if(e.key === "Enter"){
alert("Enter was just pressed.");
}
return false;
}
</script>
A code, quite the same, can be found on this similar question: How to capture Enter key press?
Hope I answered your question, even out of time.
This example worked perfectly for me:
var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("myBtn").click();
}
});
I took the example at w3schools.
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;
});