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
Related
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.
How Can I Make an Ajax Combo box, Forexamle Female and Male, and i want To show a Button for Female and a Button for Male,
This is My Code
<!DOCTYPE html>
<html>
<head>
<style>
#for-male, #for-female{
display:none;
}
</style>
</head>
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
</html>
You don't need an ajax call. If all you want to do is determine the button that will show based on the option selected.
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
The javascript will look like this
$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
});
});
and the css will be
#for-male, #for-female{
display:none;
}
Essentially what this does is to show a button whenever an option is selected
You can check https://jsfiddle.net/tmwjge9s/1/
Stuck to display profile(data from server using $.getJSON) in the same page using jQuery append(), as I'm new to this platform. Commented out the area where I stuck,
<body>
<div id="homepage">
<button id="home">Home</button>
</div>
<div data-role="content" id="old_content" style="text-align: center">
<button data-icon="arrow-d">Select Below Options</button>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1">
<!-- <option>--Course--</option> -->
<option value="mba">MBA</option>
<option value="msc">MSc</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-2">
<!-- <option>--Country--</option> -->
<option value="India">India</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="China">China</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-3">
<!-- <option>--Year--</option> -->
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<button id="go" data-theme="b">Go</button>
</div>
<div id="new_content">
</div>
<div id="profile">
</div>
<div data-position="fixed" data-theme="b" data-role="footer"
data-transition="pop">
<h4>© 2013 example.</h4>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var numRecords = 5 ;
var maxPage = 0 ;
var pro = 0 ;
$course = $('#select-choice-1').val();
$country = $('#select-choice-2').val();
$year = $('#select-choice-3').val();
$(document).ready(function(){
$("#go").click(function(){
$("#old_content").hide();
listStudents(0) ;
});
});
function listStudents(start) {
$.getJSON( "http://example.com/api.php?course="+$course+"&year="+$year+"&country="+encodeURIComponent($country), function( data ) {
$("#new_content").show();
$("#new_content").html('');
maxPage = start + numRecords ;
for(i=start;i<=maxPage;i++)
{
$("#new_content").append("<ul id='new_output_content' onclick='profile("+i+")'><li><img height='50px' width='50px' src="+data[i].profile_image+'/>'+" "+data[i].name+"</li></ul><br/>");
}
$("#new_content").prepend('<button data-theme="b" style="margin-left: 100px;margin-top: 40px;text-align: center;height: 40px;width: 153px;" data-role="button" onclick="listStudents(maxPage)">Next</button>');
});
}
function profile(pro) {
//This is where I stuck.
var profile = "<div id='new_profile' data-role='content' align='center'><img src='"+data[pro].profile_image+"' /><br /><strong>"+data[pro].name+"</strong><br/><br/>Mail ID:<br/><strong>"+data[pro].email+"</strong><br/>Position:<br/><strong>"+data[pro].position+"</strong><br/>Course:<br/><strong>"+data[pro].course+"</strong><br/>Year of Passed Out:<br/><strong>"+data[pro].course_year+"</strong><br/>Country:<br/><strong>"+data[pro].country+"</strong><br/></div>";
$('#profile').append(profile);
}
$(document).ready(function(){
$("#home").click(function(){
$("#new_content").hide();
$("#old_content").show();
});
});
</script>
</body>
</html>
I want to display the profile alone by hiding other 'id' when click particular student. Please someone help.
can you print the data you recive ? first of all i wold recomand another way to loop thrue json objects ... line 79 or so of your script ...
for(i=0;i<=data.length;i++)
data[pro].profile_image/name/etc // you have no data stored as data in the function profile ...
function profile(pro) {
the (pro) variable is actualy a number 0 => maxPage so any data[pro] is undefined ...
I am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>