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"))
Related
I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.
My code is like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">0</option>
<option value="s">24</option>
<option value="d">25</option>
</datalist>
My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here:
After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.
If I do something like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">DUMMY1</option>
<option value="s">s</option>
<option value="d">d</option>
</datalist>
I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.
You can make use of data attribute to find the id of option clicked from the list and keep value as labels,
see below code
$(function(){
$('#selectClassInput').on('change', function(e){
var val = $(this).val();
var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
console.log(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1" data-id="0">DUMMY1</option>
<option value="s" data-id="24">s</option>
<option value="d" data-id="25">d</option>
</datalist>
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
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.
I have 4 drop down lists on my page. Im trying to output a message and then open up a new page on the click of a submit button. This is based on the condition of a single value of each drop down list being true. all the options of each check list being true. For example 50p=true, in the next box £2 equals true and so on for each list.
Here is an example of one of the boxes. The other 3 boxes have the exact same names but just have different true and false values
<input name="button" type="submit" class="main" id="button" value="Submit" onclick="submit()" />
<select name="select_box" size="1" class="main" id="select_box">
<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>
</select>
This is where ive had an attempt at trying to assign variables. My logic was if i could assign variables to the names of the drop down lists by getting their id i could apply an if statement that would give me the desired outcome based on the onclick function, as the select boxes have true and false values in them ? When i run this code Javascript only seems to acknowledge and call up the alert box regardless of the options, its as if there is no other code there.
var a=document.getElementById("select_box");
var b=document.getElementById("select_box2");
var c=document.getElementById("select_box3");
var d=document.getElementById("select_box4");
object.onclick=submit
if (a=true,b=true,c=true,d=true)
{
alert("Correct you have won press OK for your Reward!")
document.open("Reward.html");
}
else
{
alert("Not right Please try again!");
}
Also how do I apply the above mentioned submit button to work these statements
I apologise for the poor editing at the top of the first half of the code im not too sure how to editi it so the rest of the words show
In your code a is holding the actual select element, when you really want it to hold the current value of the select element. So change
var a = document.getElementById("select_box");
to this:
var a = document.getElementById("select_box").value;
This will assign a to be the value of the dropdown in question. Just make sure you fix your comparison:
if (a=true
should be
if (a === 'true'
Also note that setting the value of your dropdown's values to just true or false
<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>
will make it hard for your server side code to process what the user actually chose, since the only value that'll come over for that form input will be a true, or false, and if false, you'll have no way of knowing which of those three false values were actually chosen.
Your value for an can be anything, the proper usage would be <option value="50p">50p</option> then, when you use
if(document.getElementById('select_box').value == '50p') {
alert('50p was selected');
}
this will work
First, to get the value of a select box, you need to do this:
var selectBox = document.getElementById("select_box");
var a = selectBox.options[selectBox.selectedIndex].value;
Next, for your if-statement, a few things are wrong. First, you are using a single equals sign instead of a double equals to compare. You are also comparing them with boolean values, when the values returned by your select box are strings. Finally, you cannot separate conditionals with a comma. You must specify AND or OR or something. Change your if-statement so something more like this:
if (a == "true" && b == "true" && c == "true" && d == "true")
UPDATE: Here is an example of what I think you're trying to do:
<html>
<head>
<script type="text/JavaScript">
function submit()
{
// fill these in with the values for the correct answers
var correctAnswers = new Array("50p", "50p", "50p", "50p");
for (var i = 1; i <= 4; i++)
{
// if any of the values turn up incorrect, stop right there and go back. No need to check the rest of the values.
if (document.getElementById("select_box"+ i).options[document.getElementById("select_box"+ i).selectedIndex].value != correctAnswers[i-1])
{
alert("Not right, please try again!");
return;
}
}
alert("Corect, you have won! Press OK for your reward!");
document.getElementById("frmMainForm").submit();
}
</script>
</head>
<body>
<form action="Reward.html" method="post" id="frmMainForm">
<select name="select_box1" size="1" class="main" id="select_box">
<option value="50p">50p</option> <!-- use the actual value, not "true" or "false" -->
<option value="1p">1p</option>
<option value="20p" selected="selected">20p</option>
<option value="£2">£2</option>
</select>
<select name="select_box2" size="1" class="main" id="select_box">
<option value="50p">50p</option>
<option value="1p">1p</option>
<option value="20p" selected="selected">20p</option>
<option value="£2">£2</option>
</select>
<select name="select_box3" size="1" class="main" id="select_box">
<option value="50p">50p</option>
<option value="1p">1p</option>
<option value="20p" selected="selected">20p</option>
<option value="£2">£2</option>
</select>
<select name="select_box4" size="1" class="main" id="select_box">
<option value="50p">50p</option>
<option value="1p">1p</option>
<option value="20p" selected="selected">20p</option>
<option value="£2">£2</option>
</select>
<input type="button" class="main" id="btnSubmit" onclick="submit()" value="Submit" />
</form>
</body>
</html>
Not sure how important this is, but keep in mind that anybody that views your source code from their browser window can get the correct answers. If this is a problem for your, then you should have your form submit to a server-side (e.g. PHP, ASP, JSP, etc.) script to check the values for you.
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/