Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.
Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?
Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase.
I would like to make a complementary to the current source code.
I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.
Thanks!
http://jsbin.com/qezesohake/edit?html,js,console,output
function df(data) {
$(data).find(':input').each(function () {
switch (this.type) {
case 'text':
case 'textarea':
$(this).val('');
break;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />
</form>
<form action="#" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">
</form>
<script>
function doSomething(){
alert('Do something!');
}
</script>
You don't need any javascript to clear form instead just replace your input type to reset button
<input type="reset" value="Clear all" name="clear_all"/>
Reset button does not require any onClick event to be passed. It works automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" />
</form>
Related
I am creating an advanced search form and wish to set the name of a text input field via a drop down menu.
Here is a simple search form with three separate fields:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by name: <input type="text" name="name" value="" />
Search by address: <input type="text" name="address" value="">
Search by phone number: <input type="text" name="phone" value="">
<input type="submit" value="Go!" />
</form>
What I'd like to do is have a user select a single field from a drop down and then have a single text input box to enter a search term.
eg:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option>Name</option>
<option>Address</option>
<option>Phone</option>
</select>
<input type="text" name="?NAME_FROM_DROPDOWN_SELECTION?" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>
How can I name the text field using the dropdown selection? I tried modifying some javascript I found via google but I'm afraid I just don't know javascript at all and didn't get anywhere.
Thanks for any help.
Here is one example I made using jQuery:
$(document).ready(function(){
$('body').on('change','#DropDownSelection',function(){
var v = $('#DropDownSelection').val();
$('.search-by').html('Search by '+v+': <input type="text" name="'+v+'" value="">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="Name">Name</option>
<option value="Address">Address</option>
<option value="Phone">Phone</option>
</select>
<div class="search-by">Search by Name: <input type="text" name="Name" value=""></div>
<input type="submit" value="Go!" />
</form>
If you're using jquery, it's pretty simple:
<script>
$(function() {
$('#DropDownSelection').change(function() {
$('#searchbar').attr('name', $('#DropDownSelection').val());
});
});
</script>
You can set value for each option, and listen to change event on the dropdown:
var dd = document.getElementById('DropDownSelection');
var input = document.getElementById('searchbar');
input.setAttribute('name', 'name'); // default value
dd.addEventListener('change', function(e) {
input.setAttribute('name', e.target.value); // set input.name equal to chosen select.value
console.log(input.getAttribute('name'))
})
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="name">Name</option>
<option value="address">Address</option>
<option value="phone">Phone</option>
</select>
<input type="text" name="" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>
I am trying to create a form which has a select input at the top, and when 2 of 3 options are selected the rest of the form appears to be filled in. This works, however the back and submit buttons don't work now. I can't figure out why this is, I am thinking that it might have something to do with not being allowed to have DIVs within a form, but I always thought you could?
My Code is below, any advice on how to get the submit and back button to work??
<div class="form">
Does the Claimant have a PAB/CAB? <br><br>
<select id="PABandCAB" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="Confirmed">Confirmed</option>
<option value="Confirmed">Potential</option>
<option value="NotRequired">Not Required</option>
</select> <br><br><br>
<form action="InternalRef4.html">
<div id="hidden_div">
<hr> <br>
Title:
<select name="title"required>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
</select> <br><br>
First Name:
<input type="text" name="fname"required><br> <br>
Surname:
<input type="text" name="sname"required><br> <br>
Address:
<select name="Address"required>
<option value="Same">Same As Claimant</option>
<option value="other">Other</option>
</select><br> <br>
Representative Address Line 1:
<input type="text" name="HALine1"><br> <br>
Representative Address Line 2:
<input type="text" name="HALine2"><br> <br>
Representative Address Town/City:
<input type="text" name="HATownorCity"><br> <br>
Representative Address County:
<input type="text" name="HACounty"><br> <br>
Representative Address Post Code:
<input type="text" name="HAPostCode"><br> <br>
National Insurance Number:
<input type="text" name="NINO"><br><br>
Date of Birth:
<input type="date" name="DOB"><br><br>
Contact Number - Home:
<input type="text" name="ContactNumHome"><br> <br>
Contact Number - Mobile:
<input type="text" name="ContactNumMobile"><br> <br>
Contact Number - Other:
<input type="text" name="ContactNumOther"><br> <br>
Unacceptable Customer Behaviour (UCB): <br>
No <input type="radio" name="UCBNO" value="No" checked><br>
Yes <input type="radio" name="UCBYes" value="Yes"><br> <br>
</div>
<input type="button" value="Back"/>
<input type="submit">
</form>
</div>
<script>
var select = document.getElementById('PABandCAB'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "Confirmed";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
</script>
How can I pass these two variables val_1 & val_2 through a form submission to the function initComparison()?
Here is my code:
<form action="" onsubmit="">
<select name="val_1">
<option value="x">X</option>
<option value="y">Y</option>
<input type="text" value="Enter the product id" name="val_2">
</form>
<script type="text/javascript"> $(document).ready(function(){
initComparison('val_1','val_2','abc','def');
});</script>
Use something like this
<form action="" onsubmit="">
<select name="val_1" id="val_1">
<option value="x">X</option>
<option value="y">Y</option>
</select>
<input type="text" value="Enter the product id" name="val_2" id="val_2">
<input type="button" name="submit" value="submit" id="send">
</form>
<script type="text/javascript">
$("#send").click(function(){
var var1=$("#val_1").val();
var var2=$("#val_2").val();
initComparison(val_1,val_2,'abc','def');
});
</script>
I am trying to pass the value and text from a form to a JavaScript function using the onclick on a button but don't seem to be able to get it to work I want to keep this as generic as possible so I copy and paste the form
<form name='f1'>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="item_name" value="Span>
<input type="hidden" name="amount" value="68">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="test#hotmail.com">
<select name="del">
<option value="0">Delivery To</option>
<option value="41">Uk</option>
<option value="39">USA</option>
<option value="20">World Wide</option>
</select>
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but22.gif"
onClick="shipping1(this.options.selectedindex.value,this.options.selectedindex.text)" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
</form>
i think it may be the formating of this.options
any help would be great
try this.
onClick="shipping1(this.form.del[this.form.del.selectedIndex].value,this.form.del[this.form.del.selectedIndex].text)"
When I load the page both forms are displayed. If I check and then uncheck "add" the second form disappears. How do I make this page load with form 2 hidden on load?
<html>
<title>Car Service</title>
<strong>Car Service:</strong><br><br>
<input type="submit" id="accountsearch" name="accountsearch" value="Select Customer" onclick="window.open('selectaccount.php');"><br><br>
<form name="newservicesetup" id="newservicesetup" action="" method="post">
<select name="ordertype" id="ordertype">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty1" id="qty1" value="Quantity" size="5" onclick="this.value=''">
<input type="checkbox" id="add" value="0" name="add" onclick="
if (this.checked) {
document.getElementById('newservicesetup1').style.display='inline';
} else {
document.getElementById('newservicesetup1').style.display='none'; } return true;" >
</form>
<form name="newservicesetup1" id="newservicesetup1" action="" method="post">
<select name="ordertype1" id="ordertype1">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty2" id="qty2" value="Quantity" size="5" onclick="this.value=''">
</form>
<br>
XX: <input type="file" name="sfa" id="sfa">
AA1: <input type="file" name="pbxws" id="pbxws"><br> <br>
<input type="submit" name="next" id="next" value="Next">
set the second forms css class to hidden or something like that and then define .hidden in your css to be display:none. Or put style='display:none' t ostart with on the second form
Change your second form tag to read this....
<form name="newservicesetup1" id="newservicesetup1" action="" method="post" style="display:none;">