Trying to figure out how I can produce text dynamically in a text box of a form using javascript.
I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.
So far this is what I have but I have no value being produced in the textbox any help appreciated.
function totalprice(){
if($('#type').val() == '3'){
$('#eventprice') == ("45");
}
}
<input type="text" disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />
If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:
Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.
Working demo: http://jsbin.com/acuyux/6/edit
The HTML
<select id="type">
<option data-price="25">Party</option>
<option data-price="35">Meeting</option>
<option data-price="45">Lounge</option>
</select>
<input type="text" id="eventprice" name="eventprice" disabled="" class="form-input" />
The JS
$('#type').change(function totalprice(){
$('option').each(function() {
if($(this).val() === $('#type').val()) {
$('#eventprice').val($(this).data('price'));
}
});
});
I would recommend using jQuery due to its efficient code.
HTML:
<input type="text" disabled id="eventprice" />
<select id="select">
<option data-cost="5">Event 1</option>
<option data-cost="10">Event 2</option>
</select>
jQuery:
$('#select').change(function () {
var str = $(this).find('option:selected').data('cost');
$('#eventprice').val(str);
});
// This code can be used to run it on load
// $('#select').trigger('change');
Code in action:
http://jsfiddle.net/LkaWn/
Hope this helps :)
Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.
Related
I'm looking for a way to find out which field is selected with jQuery. I build a function, but it doesn't work.
HTML example
<select id="bewerbungID">
<option value="1" name="selectName">test1</option>
<option value="2" name="selectName">test2</option>
<option value="3" name="selectName">test3</option>
</select>
JS function
$('#bewerbungID select').on('change', function() {
alert($('option[name=selectName]:checked', '#bewerbsungID').val());
});
Tested in jsfiddle open link
Treat select as an input field such as text. Then it has to have a value selected - show new value whenever it changes. You logic was right but jQuery selectors got a bit confusing.
Simplified your code a bit:
$('#bewerbungID').on('change', function() {
alert($('#bewerbungID').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bewerbungID">
<option value="1" name="selectName">test1</option>
<option value="2" name="selectName">test2</option>
<option value="3" name="selectName">test3</option>
</select>
The issue you are having is that you are not using the selector properly.
Basic Explanation:
The selector is everything you find within the parenthesis here: $('...'). When you use # in front of the word, that means you are selecting an element that has an id of whatever is to the right of #. In your case, ... is equal to #bewerbungID so the proper code should be as follows:
$('#bewerbungID').on('change', function() {
alert($('#bewerbungID').val());
});
$('#bewerbungID').on('change', function() {
alert($('#bewerbsungID option:selected').val());
});
It should do the trick
I have a form, where you can dynamically add steps by clicking a button. Each step contains different input fields. One step has a ,which is filled with some options like this.
<select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
It is possible that there are multiple of it, all with the same id and name.
Next to the select, there is always an input field like this:
<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">
What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. It works for the first one, but for all other selects, it doesn't. My code is this:
function updateZutaten(){
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
}
My guess is that it only works for the first select element, because the other select elements have the same id. Has anyone an idea how to take care of this problem?
Please don't get confused by the German names, but I'm from Germany.
Thank you everyone :)
Identifiers must be unique and as you are using jquery bind event using it.
Add a common class to target the <select> element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next() target the next <input> element.
Here in exmple I have added zutatenListe class to <select> element.
$(function() {
$(document).on('change', '.zutatenListe', function() {
var text = $(this).find("option:selected").text();
$(this).next(".selectedZutat").val(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
Maybe work on the change() event?
$("#zutatenListe").change( function () {
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
})
So it will always set the selected option when the change event fires?
Use unique ID attributes for each set of input and selects. HTML and Jquery require this.
HTML4 Spec
HTML5 Spec
Here's a way to do it in JavaScript.
function updateZutaten(element) {
var option = element.options[element.selectedIndex];
var parent = element.parentElement;
var textBox = parent.getElementsByTagName("input")[0];
textBox.value = option.text;
}
.formItems {
list-style-type:none;
padding:0;
margin:0;
}
.formItems li {
border-bottom:1px solid #EEE;
padding: 10px 0;
}
<form id="myForm">
<ul class='formItems'>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
</ul>
</form>
I am checking value on radio and select drop down using jquery. How can check both elements value in a if condition using jquery ? I tried this way but its not working for me:
$("#filterresult").click(function(){
if($('#filter_deductible').val()=="id_0" && $('#trip_type_filter_no').val()=="no")
{
//some code here
}
I know I can't use && in jquery code I have to use multiple selector but I don't know how to use it. Any suggestions please ?
Here is my html:
<select id="filter_deductible" name="filter_deductible">
<option value="">Select Deductible</option>
<option value="id_0">0 Only</option>
<option value="id_0_250">0-250</option>
<option value="id_250_1000">250-1000</option>
<option value="id_1001">1000 and Higher</option>
<option value="All Deductibles">All Deductibles</option>
</select>
AND
<input type="radio" id="trip_type_filter_no" name="trip_type_filter_no" value="no" /> No
Calling function using a button:
<input type="button" name="filterresult" id="filterresult" class="newquote" value="Filter Result" />
First radio buttons that should be linked should have the SAME name, you have different names. That means you can select both of them.
Second, the val() will always return the value. You want to check to see if it is selected.
if ($('#filter_deductible').val()=="id_0" && $('#trip_type_filter_no').is(":checked"))
So the situation is this: I'm creating a dropdown box using the jquery.multiselect plugin on a form, but I need to check if there's some value selected, if there isn't one or more values selected I wanna throw a alert or something when some one tries to submit the form.
The HTML Code
<form id="RNA" name="RNA">
<select size="5" name="sampleMut[]" multiple="multiple" id="sampleMut">
<option value="41" >41</option>
<option value="48" >48</option>
<option value="65" >65</option>
<option value="102" >102</option>
</select>
</form>
The JavaScript Code
$(function(){
$("#sampleMut").multiselect();
});
jQuery version 1.8.3
jquery.multiselect 1.13
Try this:
$(function(){
$('form').submit(function(){
var options = $('#sampleMut > option:selected');
if(options.length == 0){
alert('no value selected');
return false;
}
});
});
Fiddle: http://jsfiddle.net/aDxu8/1/
With this you can get the amount of the selected options.
$("#sampleMut option:selected").length;
I am new to javascript.
I have a function I modifed that when a user selects "Yes" from a pull down menu it creates 3 text boxes in a div area.
Here is my form pull down code:
<select name="dosage" id="dosage" onchange="function dosage(sel)">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="dosagearea"></div>
This is the javascript I modified which originally created a message box to the user when they selected something.
function dosage(sel)
{
if(sel.options.selectedIndex == 0)
{
return false;
}
else if(sel.options.selectedIndex == 'Yes')
{
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='dosage_emitted';
document.getElementById('dosagearea').appendChild(x);
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='dosage_absorbed';
document.getElementById('dosagearea').appendChild(x)
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='dosage_period';
document.getElementById('dosagearea').appendChild(x)
}
}
I checked with firebug and no JS errors being returned, I think my function is not being called the right way.
Thanks
The value of the onchange property is basically the name of a function or some JavaScript. If you want to call your function with the select element as a parameter, you need to do
<select name="dosage" id="dosage" onchange="dosage(this)">
Note that this isn't the recommended way to do things as it couples your HTML with your JS. Instead, try adding the event directly in JS, like so
window.onload = function() {
document.getElementById("dosage").onchange = dosage;
function dosasage(event) {
var sel = event.currentTarget;
}
}
try the following: onchange="dosage(this)"
it's better to have the fields already in html with display:none either on the inputs or the placeholder. and toggle to display:block when yes is selected. Also, you need to change the event listener to onchange="dosage(this)"
or make it like this
<select name="dosage" id="dosage" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="dosagearea" style="display:none">
<input type="text" name="dosage_emitted" />
<input type="text" name="dosage_absorbed" />
<input type="text" name="dosage_period" />
</div>
here it is in action http://jsfiddle.net/t4cy7/