I have two inputs one is simple input another is select input with options. How can i achieve that when someone enters value for text input it automatically select correct option.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-2">
<label class="text-black" for="test2">Job code</label>
<input type="text" id="test2" name="jobcode[]" class="form-control">
</div>
<div class="col-md-10">
<label class="text-black" for="padalinys">Job</label>
<select class="form-control" name="job[]" >
<option value="1">Administrator - 1</option>
<option value="2">Bartender - 2</option>
<option value="3">Mechanic - 3</option>
<option value="4">Bodybuilder - 4</option>
<option value="5">Doctor- 5</option>
</select>
</div>
</div>
Try this, here the code simply checks if the inputted value is among the options available and changes the selected option to the one whose value is the same as what was entered in the input element.
var test2 = document.getElementById("test2")
var test3 = document.querySelector("[name=job]")
test2.onchange = () => {
if ([...test3.children].some(each => each.value == test2.value)) {
test3.value = test2.value
}else{
test3.value = 1
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-2">
<label class="text-black" for="test2">Job code</label>
<input type="text" id="test2" name="jobcode[]" class="form-control">
</div>
<div class="col-md-10">
<label class="text-black" for="padalinys">Job</label>
<select class="form-control" name="job">
<option value="1">Administrator - 1</option>
<option value="2">Bartender - 2</option>
<option value="3">Mechanic - 3</option>
<option value="4">Bodybuilder - 4</option>
<option value="5">Doctor- 5</option>
</select>
</div>
</div>
You can try this:
(function($) {
$('#test2').on('blur', function(e) {
let inputVal = $(this).val();
$('#select option').each(function() {
if ($(this).val() === inputVal) {
$(this).prop('selected', true);
}
})
});
})(jQuery);
Here I get the inserted value at the input field on blur event. And check each option of the select if the value of the option is same as the input field's value. If so then change the selected prop of the option.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Based on https://codepen.io/bahiirwa/pen/OjNYZb -->
<div class="container">
<h2>Demo dependent lists</h2>
<div class="row">
<div class="col-md-3">
<select class="form-control" name="select1" id="select1">
<option value="">--Please choose an option--</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="1800">1800</option>
<option value="2000">2000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select2" id="select2">
<option value="1000" data-section1="1000">500</option>
<option value="1500" data-section1="1500">750</option>
<option value="1800" data-section1="1800">900</option>
<option value="2000" data-section1="2000">1000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select3" id="select3">
<option value="1000" data-section2="1000">250</option>
<option value="1500" data-section2="1000">450</option>
<option value="1800" data-section2="1000">500</option>
<option value="2000" data-section2="1000">750</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select4" id="select4">
<option value="1000" data-section3="1000">250</option>
<option value="1500" data-section3="1000">450</option>
<option value="1800" data-section3="1000">500</option>
<option value="2000" data-section3="1000">750</option>
</select>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
//Reference: https://jsfiddle.net/fwv18zo1/
$(document).ready(function() {
var $order_name = $('#order-name');
var $output = $('#output');
var $select1 = $('#select1');
var $select2 = $('#select2');
var $select3 = $('#select3');
var $select4 = $('#select4');
var $options2 = $select2.find('option');
var $options3 = $select3.find('option');
var $options4 = $select4.find('option');
$select1.on('change', function(event) {
$select2.html(
$options2.filter(
function() {
return $(this).data('section1') == $select1[0].selectedOptions[0].value;
}
)
);
$select2.trigger('change');
}).trigger('change');
$select2.on('change', function(event) {
$select3.html(
$options3.filter(
function() {
return $(this).val() == $select2[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select3.on('change', function(event) {
$select4.html(
$options4.filter(
function() {
return $(this).val() == $select3[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select4.on('change', function(event) {
$select3.html(
$options4.filter(
function() {
// return $(this).data('section3') == $select4[0].selectedOptions[0].value;
return $(this).val() == $select4[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
});
</script>
</html>
In this code, I am unable to do the thing which is happening in the second and third options, but not in the fourth option. I have created a demo dependent lists in which when user chooses the first option then the second option automatically comes with filtered data. Then again user have to select from the third option filtered data, but in the fourth option it doesn't automatically fetch the filtered data instead it's asking the user to select data from given options which the code doesn't want. For example, suppose I have chosen the first option 1000, then in the second option 500 comes automatically similarly in the third option but not in the fourth option. How can I code so that the fourth option also comes automatically filtered data.
I am using Selectize.js.
On page load when inspecting the elements in Selectized drop-down the the actual content is missing (inside .selectize-dropdown-content):
<div class="selectize-dropdown single aritklmodel" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
After the click it populates the content:
<div class="selectize-dropdown single aritklmodel" style="display: none; visibility: visible; width: 255.617px; top: 34px; left: 0px;">
<div class="selectize-dropdown-content">
<div style="display: block" data-marka="2" data-selectable="" data-value="a2" class="">a2</div>
<div style="display: block" data-marka="1" data-selectable="" data-value="A50">A50</div>
</div>
</div>
Is there a way to populate it on page load?
Because as seen from above I use custom data attributes with whom I filter the options based on previous Selectized drop-down selection.
Current problem is that when i make selection in first drop-down the filter is not working as it has nothing to filter, as content is not in DOM, just after i click once on second drop-down and content populates in DOM the filtering starts working after changes on first one.
I tried triggering/simulating the click event, its not working.
I have read API and usage documentation, if I missed answer, I didn't understand it (not a native english speaker)
$('select').selectize({
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
EDIT:
Is there a way to programmatically de-selectize the HTML select, so I can do filtering on HTML select itself, and then selectize it again?
Is there any way of doing filtering of one selectized drop-down based on another? Using data attribute or any other?
You can use refreshOptions method to populate options on page load
Example 1
// initialize the Selectize control
var $select = $('select').selectize({});
// fetch the instance
var selectize = $select[0].selectize; // 0 for select index
selectize.refreshOptions(false); // populate option on load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Example 2
// initialize the Selectize control
var $select = $('select').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-id='" + escape(data.id) + "'>" + escape(data.text) + "</div>"
}
}
});
// fetch the instance
let car_select = $select[0].selectize; // 0 index for car select
let model_select = $select[1].selectize; // 1 index for model select
model_select.refreshOptions(false); // populate model select options on page load
car_select.on('item_add', function(value, item) {
let selector = model_select['$dropdown_content'].children();
model_select.setValue('none');
selector.hide();
selector.each(function() {
let tmp = $(this);
if (tmp.data('id') == value) {
tmp.show();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option data-id="volvo" value="volvo">Volvo</option>
<option data-id="saab" value="saab">Saab</option>
<option data-id="mercedes" value="mercedes">Mercedes</option>
<option data-id="audi" value="audi">Audi</option>
</select>
<select name="models" id="models">
<option data-data='{"id":"none"}' value="none">--Select model --</option>
<option data-data='{"id":"volvo"}' value="volvo xc90">Volvo XC90</option>
<option data-data='{"id":"volvo"}' value="volvo xc60">Volvo XC60</option>
<option data-data='{"id":"saab"}' value="saab 900 convertible">Saab 900 Convertible</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz C class">Mercedes Benz C Class</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz A class">Mercedes Benz A Class</option>
<option data-data='{"id":"audi"}' value="audi e-tron">Audi E-Tron</option>
<option data-data='{"id":"audi"}' value="audi a7">Audi A7</option>
</select>
This is alternative solution.
Whenever your selectize-input is clicked you can checked if the input where click event has taken place is related to which select depending on this perform tasks .If its for something(just for example) then you first need to hide all divs inside selectize-dropdown-content and then check if data-attribute matches with the value of cars select-box depending on this show that div else hide.Also, as divs are generated on click of input-box so you can make one option selected as default .
Demo Code :
$('select#cars').selectize();
$('select#something').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-marka='" + escape(data.marka) + "'>" + escape(data.text) + "</div>"
}
}
});
$(".selectize-input").on('click', function() {
var selector = $(this).closest(".outer").find(".selectize-dropdown-content div")
//get value of other select
var value = $("#cars").val()
//check if id is something
if ($(this).closest(".outer").find('select').attr('id') == "something") {
selector.hide() //hide divs
selector.each(function() {
//see if data-marka match value
if ($(this).data('marka') === value || $(this).data('value') == 'none') {
$(this).show() //show that div
}
})
} else {
//if cars select box is change find next select-box input and change it to default
$(this).closest(".outer").next().find(".selectize-control .item").attr('data-value', "none")
$(this).closest(".outer").next().find(".selectize-control .item").text("--Select one --");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<div class="outer">
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="outer">
<select id="something">
<option value="none">--Select one --</option>
<option data-data='{"marka": "volvo"}' value="1">1</option>
<option data-data='{"marka": "volvo"}' value="2">2</option>
<option data-data='{"marka": "Saab"}' value="3">3</option>
<option data-data='{"marka": "audi"}' value="4">4</option>
<option data-data='{"marka": "mercedes"}' value="5">5</option>
<option data-data='{"marka": "mercedes"}' value="6">6</option>
</select>
<div>
I've the below code that is having multiselect dropdown:
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<script>
$('#skills-select').dropdown();
</script>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select :selected').text();
console.log(x)
});
</script>
</body>
</html>
How I read the values of selected options in the drop down list as array.
Example, if I selected both css and angular from the list above, I want to have the output at:
x = ["css", "angular"]
So simple in pure JS:
const getVals = document.getElementById('get-values')
, skillsSelect = document.getElementById('skills-select')
;
getVals.onclick =_=>
{
let choosed = [...skillsSelect.selectedOptions].map(e=>e.value)
console.clear()
console.log( choosed )
}
<select id="skills-select" multiple >
<option value="one" >Skills </option>
<option value="angular" >Angular </option>
<option value="css" >CSS </option>
<option value="design" >Graphic Design</option>
</select>
<button id="get-values">getVals </button>
Use the val() method of jQuery instead of getting the text() and use $('#skills-select') instead of $('#skills-select :selected').
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select').val();
console.log(x)
});
</script>
</body>
</html>
For a custom framework like Bootstrap select https://silviomoreto.github.io/bootstrap-select/ how do I change the border color of a select box in Javascript?
I tried this but does not work.
document.getElementById("box").style.borderColor = "red";
Javascript
function validate() {
var ok = true;
var box = document.getElementById("box").value;
if (!box) {
document.getElementById("box").style.borderColor = "red";
ok = false;
}
return ok;
}
HTML
<form action="#" onsubmit="return validate()" method="POST">
<select id="box" name="num" class="selectpicker form-control">
<option value="" selected="selected">select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="text-center">
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>
If you see the DOM element generated by bootstrap-select, it actually hides the original select element and creates its own structure with div,span and buttons. There isn't any official documentation provided to change its border, but as a workaround you could do it as below:
You need to change border of the button whose class is btn dropdown-toggle btn-default, which is generated by bootstrap-select. Since the element created will not be given any id we will make use of its class with document.getElementsByClassName("classnames")[0]
document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "red";
Update
Explanation in comments.
$(document).ready(function() {
//add a change event to each selectpicker
$('.selectpicker').selectpicker().on('change', function() {
var id = $(this).attr('id'); //get current element's id
var selected = $(this).find("option:selected").val(); //get current element's selected value
var condition = false; //default false to form valid
$(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove");
if (id == "box") {//if its first select box
condition = !(selected == 2 || selected == ""); //check if its value==2 or value=="" so that form validation depends of respective selects
$("#box2").selectpicker(selected == 2 ? "show" : "hide").val("");
//show or hide box2 based on selected val
$("#box2").selectpicker('setStyle', 'btn-danger',"remove");
//remove danger from 2nd selectpicker when its hidden or shown
} else {
condition = !(selected == "");
//if its box 2 check if any value is selected
}
$(this).closest('form').data('valid', condition);
//set it to form's data-valid attribute
});
$("#box2").selectpicker('hide');//default hide on page load
//form submit event instead of validate() inline function
$("form").on("submit", function(e) {
e.preventDefault();//prevent default action of submit
var isValid = $(this).data('valid');//check if its valid
if (!isValid) {
//if not valid loop through each selectpicker
$.each($('.selectpicker'),function(){
var selected=$(this).val();
//check appropriate values for each select and set/remove the btn-danger class for respective selectpickers
$(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove");
})
}
else{
alert(isValid);
//Submit your form
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!--add data-valid attribute to form to make sure its valid or not and default to false-->
<form action="#" data-valid="false" method="POST">
<select id="box" name="num" class="selectpicker form-control">
<option value="" selected="selected">select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="box2" name="num" class="selectpicker form-control">
<option value="" selected="selected">select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="text-center">
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://silviomoreto.github.io//css/highlight.css" rel="stylesheet">
<link href="https://silviomoreto.github.io//css/base.css" rel="stylesheet">
<link href="https://silviomoreto.github.io//css/custom.css" rel="stylesheet">
<link href="https://silviomoreto.github.io//dist/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<select id="box" name="num" class="selectpicker form-control" data-style="warning">
<option value="" selected="selected">Select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" style="width: 180px; height: 30px" onclick="changeColor()" value="Validate"/>
</div>
</div>
</div>
</form>
<script>
function changeColor() {
document.getElementById("box").style.borderColor = "red";
document.getElementById("box").style.borderWidth = "1px";
return false;
}
</script>
</body>
</html>
You can override the CSS
.bootstrap-select{ border: 1px solid red //sample }
Hope this helps
Update:
By using JavaScript, this can be done as shown below (considering all required JS file as added already)
<form id="form1" runat="server">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<select id="box" name="num" class="selectpicker form-control" data-style="warning">
<option value="" selected="selected">Select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" style="width: 10px; height: 30px" onclick="changeColor()" value="Validate"></input>
</div>
</div>
</div>
</form>
<script>
function changeColor() {
document.getElementById("box").style.borderColor = "red";
document.getElementById("box").style.borderWidth = "1px";
return false;
}
</script>
I'm new to jQuery and javascript. I've been trying to make a simple application and having a lot of trouble getting the data that the user inputs. I have two drop down lists, and I just want to get the input from each one. It seems that I can only get one or the other. I'm obviously missing something.
<code>
<!DOCTYPE html>
<html>
<head>
<title>Headers and Footers</title>
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<!-- This is the first page -->
<section id="firstpage" data-role="page" data-position="fixed">
<div data-role="header" data-theme="b">
<h1 style="text-align:left; margin-left:20px;">Converter</h1>
Options
</div>
<div class="ui-content">
<label for="dose-input" id="dose-input2">Enter Dose of starting Drug</label>
<input type="number" step="0.01" min="0" placeholder="Enter Starting Drug">
<form>
<div class="ui-field-contain">
<label for="select-native-1">Choose starting Drug:</label>
<select name="select-native-1" id="select-native-1" data-native-menu="false">
<option>Choose Starting...</option>
<option value="1">Drug 1</option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
</form>
<div class="ui-field-contain">
<label for="select-end">Choose ending Drug:</label>
<select name="select-end" id="select-end" data-native-menu="false">
<option>Choose ending...</option>
<option value="1">Drug 1 </option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
<fieldset class="ui-grid-a">
<div class="Clear"><button type="button" id="clear" data-theme="c">Clear</button></div>
<div class="Submit"><button type="button" id="submit" data-theme="b">Submit</button></div>
</fieldset>
<script>
$('#submit').click(function() {
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
alert(value);
})
.keyup();
var selected_end = $('#select-end').val();
alert(selected_end);
var starting_drug = $('#select-native-1"').val();
alert(starting_drug);
});
</script>
</div>
</section>
</body>
</html> </code>
If I have it set this way, I will only get the value of the entered dosage and the option of the end of the drug. I won't be able to get the option for the beginning of the drug. Any ideas what I am doing wrong?
Your script is pretty confusing... To get values from select menus on submit just do:
$(document).on("click", "#submit", function(event)
{
var dose = $("#dose-input").val();
var drug_start = $("#select-start").val();
var drug_end = $("#select-end").val();
alert(dose + "\n" + drug_start + "\n" + drug_end);
});
Be sure to check for default values on submit.
Check out complete JSFiddle