I want to change multiple input values every time the <option> changes, but the if statement only evaluates the first condition and changes the values to '200' and '300'; it doesn't evaluate the other conditions, so it won't change the values when other options are selected. How can I fix this in jQuery?
$(function() {
$('input, #city').change(function(){
if ($('#a-city').attr('id') == 'a-city') {
$('#price1').val('200');
$('#price2').val('300');
} else if ($('#b-city').attr('id') == 'b-city') {
$('#price1').val('400');
$('#price2').val('500');
} else {
$('#price1').val('600');
$('#price2').val('700');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
$("input, #city").change(function() {
const id = $(this).children(":selected").attr("id");
let priceOne, priceTwo;
switch (id) {
case "a-city": {
priceOne = 200;
priceTwo = 300;
break;
}
case "b-city": {
priceOne = 400;
priceTwo = 500;
break;
}
case "c-city": {
priceOne = 600;
priceTwo = 700;
break;
}
default: {
priceOne = 0;
priceTwo = 0;
}
}
$("#price1").val(priceOne);
$("#price2").val(priceTwo);
});
I am assuming you mean:
<select id="city">
<option>Select a city</option>
<option value="a-city">Citya</option>
<option value="b-city">Cityb</option>
<option value="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
$(function() {
$('#city').on('change', function(){
if ($(this).val('id') == 'a-city') {
$('#price1').val('200');
$('#price2').val('300');
} else if ($(this).val('id') == 'b-city') {
$('#price1').val('400');
$('#price2').val('500');
} else {
$('#price1').val('600');
$('#price2').val('700');
}
})
});
If the city changes then the price changes, you won't need to pass in the input tag since then are not watching for the change event and you have them tagged as readonly.
Here is one way to do it.
$(function() {
$('input, #city').change(function() {
var selectedId = $(this).children(":selected").attr('id'),
$price1 = $('#price1'),
$price2 = $('#price2');
switch (selectedId) {
case 'a-city':
$price1.val('200');
$price2.val('300');
break;
case 'b-city':
$price1.val('400');
$price2.val('500');
break;
default:
$price1.val('600');
$price2.val('700');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
The condition you're checking,
$('#a-city').attr('id') == 'a-city'
asks whether #a-city's ID is, in fact, a-city. This will always be true, and none of the other branches will ever run. To get the ID of the selected <option>, use
$('#city :selected').attr('id')
You can implement this without any conditionals at all:
$(function () {
const cities = {
'a-city': {
'#price1': 200,
'#price2': 300
},
'b-city': {
'#price1': 400,
'#price2': 500
},
'c-city': {
'#price1': 600,
'#price2': 700
}
};
$('#city').change(function () {
const selectedCityID = $('#city :selected').attr('id');
const city = cities[selectedCityID];
for (let priceID in city) {
$(priceID).val(city[priceID]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option disabled selected>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
Instead of the city ID being an if condition or switch case, here it's the key to an object containing that city's prices. We then iterate over that object and set both prices.
Also, only #city needs to be monitored for changes, and since "Select a city" isn't actually a city, I made it disabled.
Related
function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
<div class="col-sm-6">
<label for="purpose">Purpose</label>
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option ></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
I have a form that has two fields stationerytype and stationeryrqstqty.The stationeryrqstqtyfield of the form accepts the number. The minimum number which can be entered in this field(QTY) depends upon the value of the stationerytype field i.e. If the stationerytype field value is 'pencil' then the minimum value property of the stationeryrqstqty field should be 5 and if it is 'notepad' then the minimum property of the stationeryrqstqty field should be 10. I am doing it by the given code but it's not working.it gives always 1,2,3.......
<td><input type="text" name="slno" value= "<?php echo $i; ?>" class="form-control " readonly ></td>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
<script>
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
</script>
I wont get in to details, of your workaround or anything, just hints on how to set min, max on an input,
using vanilla js, you can do this:
document.querySelector("input[name='stationeryqtyrqst[]']").setAttribute("min",10)
change the selector to whatever you want to, and update it accordingly,
this should work for input type=number, for inputs of other types, you should implement some value check on input/keydown/keyup event.
you can set max the same way.
The below lines are setting the attributes to the datalist tag and not the input tag.
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
I changed it to select the correct tag and set default value as minimum:
let quantity_field = document.getElementById("stationeryqtyrqst");
if(quantity_field){
quantity_field.setAttribute("min", minimum);
quantity_field.setAttribute("step", step1);
quantity_field.value = minimum;
}
Attaching snippet for reference:
function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// updated the below code to get the correct field and set default values.
let quantity_field = document.getElementById("stationeryqtyrqst");
if(quantity_field){
quantity_field.setAttribute("min", minimum);
quantity_field.setAttribute("step", step1);
quantity_field.value = minimum;
}
}
<div class="col-sm-6">
<label for="purpose">Purpose</label>
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option ></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
I'm using the following code to pass a value from a select option to a given input field.
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
But how can I pass the value of the input field back to the select option value using jQuery?
I am not sure what you are exactly looking, however, as per my understanding I have modifed your code samples.. You can check below snippet.
$( document ).ready(function() {
var conditionofitem = $("#meta_itemcondition").val();
$(".itemconditionmenu").val(conditionofitem);
});
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
if(conditionofitem == '') {
$("#meta_itemcondition").val('Choose Condition');
} else {
$("#meta_itemcondition").val(conditionofitem);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
Please check and let me know if you have any further queries.
Try this
$("#addOption").click(function(){
$("#itemconditionmenu").append('<option value="'+$("#meta_itemcondition").val()+'" selected="selected">'+$("#meta_itemcondition").val()+'</option>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="itemconditionmenu">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="meta_itemcondition" type="text" value=""></input>
<button id="addOption">ADD</button>
Example for the same: Blur out your input and value option will be added to select dropdown
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
$("#meta_itemcondition").blur(function() {
var inputValue = $(this).val();
var o = new Option(inputValue, inputValue);
$(o).html(inputValue);
$("#itemcondition").append(o);
$("#itemcondition").val(inputValue);
});
$( document ).ready(function() {
var value = $("#meta_itemcondition").val();
console.log(value)
var alreadyOption = false;
$("#itemcondition option").each(function()
{
alreadyOption = $(this).val() === value;
if(alreadyOption) {
$("#itemcondition").val(value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New"/>
Here you can find inline functionality
if you enter a value in textbox value append in drop-down
if you select drop-down value auto set in textbox.
Note: add value in textbox change just input focus
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="jsSelect" onchange="$('.jsTextBox').val($(this).val())">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input class="jsTextBox" onchange="if($(this).val()!=''){$('.jsSelect').append($('<option></option>').attr('value',$(this).val()).text($(this).val()));$('.jsSelect').val($(this).val());}" type="text" value="">
When Y is selected, both of the input field should display "completed",and when user select "N", both of the input field should be blank but for some reason the code fail, any idea. Many Thanks
if($('.finished1').val(''))
{
$('.finished').val('');
}
else if($('.finished1').val('Y'))
{
$('.finished').val('completed');
}
else{
$('.finished').val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
Try this code JSFiddle
$('.finished1').on('change',function(){
if($(this).val() == 'N' || $(this).val() == ''){
$('.finished').val('');
}else{
$('.finished').val('completed');
}
});
You should use jquery's Change API to capture any change in the select input then you can check the selected value and respond accordingly
$('.finished1').on('change', function(){
if($(this).val() == 'Y')
$('.finished').val('completed');
else
$('.finished').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
You'll first need to evaluate the value of the select box through a change event handler and from there you can use switch statement to determine what to do from there.
$(function() {
$('.finished1').on('change', function() {
switch (this.value) {
case 'Y':
$('.finished').val('completed');
break;
case 'N':
case: '':
$('.finished').val('');
break;
default:
//
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
You should use a function that will detect the change in dropdown selected item.
If its detected it will check the values again and if need chang it to what is selected.
$(function () {
$('.finished1').change(function () {
if($('.finished1').val(''))
{
$('.finished').val('');
}
else if($('.finished1').val('Y'))
{
$('.finished').val('completed');
}
else{
$('.finished').val('');
}
});
});
I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
I can't seem to get this function to work out. I'm trying to change the "business" input value of my form based on an amount selected in the "amount" dropdown. What am I missing!!! I've been trying this for an hour.
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#ramatico.com";
if (document.forms['5'].amount.value > 11){
businessvar = "paypall#ramatico.com"
}
document.forms['5'].business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Ok. The next step. I have about 100 of these forms on a page. Instead of creating one for each form, I'd like to have one script that changes based on which form is being changed with "onChange". Each of the forms on the page have values of the same name (but not ID) (they are for paypal). I think it will be ok if I can change the"formname" in the following: "document.forms['formname']" based on a variable populated by something like chPy("formname") etc..... I can't seem to get that to work either.
Removing the form reference would take care of both of your items.
<script type="text/javascript">
function chPy(oSelect)
{
var businessvar = "paypals#ramatico.com";
if (oSelect.form.amount.value > 11){
businessvar = "paypall#ramatico.com"
}
oSelect.form.business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy(this)">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Problem is that you are using a number as form name.
Add some letters to the name and it will work:
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#XYZ.com";
if (document.forms['form5'].amount.value > 11){
businessvar = "paypall#XYZ.com"
}
document.forms['form5'].business.value = businessvar;
}
</script>
<form name="form5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
HTML:
<form name="form5">
<select name="amount">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input type="text" name="business">
</form>
JavaScript:
var form5 = document.forms['form5'];
form5.amount.onchange = function() {
form5.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
Live demo: http://jsfiddle.net/Fx7zh/
For multiple forms, you can use this JavaScript code:
for (var i = 0, l = document.forms.length; i < l; i++) {
document.forms[i].amount.onchange = function(i) {
this.form.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
}
Live demo: http://jsfiddle.net/Fx7zh/2/