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/
Related
I have two dropdown menus. The first is to choose your location. The second is to choose what type of pictures you want to upload. (i.e. Option 1 - Akron, Option 2 - Skyline). I've setup a file request (DropBox generated upload link) in my DropBox account for these options (Akron, Skyline). If they choose (Akron, Houses), it'd be a different upload link. Similarly, (Cleveland, Streets) would be yet another upload link. Using JQuery, I have the link sent to my submit button HTML. Everything I've tried sends to that link no matter what options I choose. (i.e. everything goes to (Akron, Skyline) link even if I choose (Akron, Houses). There is something wrong in my if statement and I can't figure it out. Here is a sample of my code. The if statement is for the (Akron, Skyline) combination. Additional code will be written for other options once I get this one to work. I've replaced the upload link with a generic URL.
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
if("#Location Select").val("Akron") && ("#Type Select").val("Skyline"){
$("a").attr("href",'https://www.google.com');
}
</script>
</body>
</html>
Note
http://api.jquery.com/val/
.val() does not accept any arguments.
Also note that you first have to identify the selected element, and then get its value.
HTML IDs should not have spaces, and there should only be one ID of a particular string in any given document. If you want to describe a type of element, use class instead. For example:
<p> Choose Your Location </p>
<select class="Select" id="Location">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select class="Select" id="Type">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
$('input').click((e) => {
e.preventDefault();
const location = $('#Location')[0];
const type = $('#Type')[0];
const locationVal = location.options[location.selectedIndex].value;
const typeVal = type.options[type.selectedIndex].value;
if (locationVal === 'Akron' && typeVal === 'Skyline') {
console.log('Akron/Skyline');
} else {
console.log(`Other, ${locationVal} ${typeVal}`);
}
});
</script>
(you don't actually need the class="Select" here at all, based on the code so far)
This this code. It was missing $ as well as brackets.
if($("#Location Select").val("Akron") && $("#Type Select").val("Skyline")){
$("a").attr("href",'https://www.google.com');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
</body>
</html>
This form is search form. when I click the <option> "alfamart" or "bca", I want the link change.
like this, link: /en2/maps(alfamart)or(bca)/ in accordance with the <option>
but how?
thanks
<form action="/en2/maps".$id."/"><!--Relative url to the page that your map is on-->
Distination:
<select name="textSearchTerms" class="selectpicker" data-live-search="true">
<option value="alfamart">Alfamart</option>
<option value="BCA">BCA</option>
</select>
<input type="submit" value="Search">
</form>
<?php
$id = $_GET['textSearchTerms'];
?>
You don't need to get value from URL, you can change form action by select box value.
$('.selectpicker').change(function(){
if($(this).val() == 'alfamart'){
$('form').attr('action','alfamart.html');
alert('action is alfamart.html');
} else {
$('form').attr('action','BCA.html');
alert('action is BCA.html');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/en2/maps">
Distination:
<select name="textSearchTerms" class="selectpicker" data-live-search="true">
<option value="alfamart">Alfamart</option>
<option value="BCA">BCA</option>
</select>
<input type="submit" value="Search">
</form>
I have 3 pages: index.php, soldc.php and soldf.php like in select option below.
On each page i have the same dropdown as header. So when i click the button , depending on dropown option, the button redirect to soldc.php or sodf.php where are displayed different information. I want to keep dropdown option selected on the next page i'm redirected by the button. Thx for help.
<html>
<body>
<form name="hop"><br>
<p align="center">
<select name="choose" style="width: 168px;height: 35px;">
<option value="./soldc.php">Sold clienti</option>
<option value="./soldf.php">Sold furnizori</option>
</select>
<input type="button" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</body>
</html>
Place this in your <head>
<script language="JavaScript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
</script>
Then use this as your html form
<form name="form1">
<select name="select" id="select">
<option value="./soldc.php?id=1" <?php if($_GET['id'] == 1) { ?> selected=selected <?php } ?>>Sold clienti</option>
<option value="./soldf.php?id=2" <?php if($_GET['id'] == 2) { ?> selected=selected <?php } ?>>Sold furnizori</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Go" onClick="MM_jumpMenuGo('select','parent',0)">
</form>
Hope this helps
I am not sure this will work, but I think it would:
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
Html
<p align="center">
<form name="hop" class="center">
<select name="choose" id="selection" style="width: 168px;height: 35px;">
<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" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</p>
When you go to target page that means you the last selected option is the current page , am i correct ? use the following js code in each page :
var option = document.location.pathname.match(/[^\/]+$/)[0];
document.getElementById('select').value = option;
change this line <select name="choose" style="width: 168px;height: 35px;">
to this
<select id=select name="choose" style="width: 168px;height: 35px;">
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I'm trying to make a program in which I show the value selected in the menu. I don't understand why the <select> tag doesn't work.
Html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<form>
<Label for="country">Country</Label>
<select name="country" id= "country">
<option name="country" id="country">Country</option>
<option name="USA" id="country">USA</option>
<option>India</option>
<option>China</option>
<option>France</option>
<option>England</option>
<option>Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
</body>
</html>
Script
var country=$('#country :selected');
document.getElementById("demo").innerHTML = country;
Always use an ID attribute uniquely, you are using it 3 times, consider using classes for that.
This is how you want it:
//Wait until the page is ready for manipulation
$(function(){
//Whenever the value of #country changes, do:
$("#country").on('change', function() {
//Get the new value
var country = $(this).val();
//Put the new value into the #demo element
$("#demo").html(country);
});
});
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<form>
<Label for="country">Country</Label>
<select name="country" id="country">
<option value="" disabled selected>Select your country</option>
<option value="USA">USA</option>
<option value="india">India</option>
<option value="china">China</option>
<option value="france">France</option>
<option value="england">England</option>
<option value="ecuador">Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
</body>
</html>
Your script must be placed at the end of document or in $(document).ready(..) like below.
Please make sure to subscribe to .change() event, that every time the selected value is changed to place it where you want.
$(document).ready(function() {
$('#country').change(function() { // every times is changed
$('#demo').html($(this).val()); // add value in tag with id #demo
});
});
$(document).ready(function() {
$('#country').change(function() { // every times is changed
$('#demo').html($(this).val()); // add value in tag with id #demo
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<form>
<Label for="country">Country</Label>
<select name="country" id="country">
<option>Country</option>
<option>USA</option>
<option>India</option>
<option>China</option>
<option>France</option>
<option>England</option>
<option>Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
Thanks. --Jeff
I have a simple form like this:
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
I'm updating the selected option programmatically using jQuery
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual select box.
To change a select box, you need to identify it, then call val on it, not one of its option elements.
I can't make out what you want your input[name="button1"] to do, but here's an example of updating a select box: Live copy | source
HTML:
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same id value ("assigner") to more than one element. id values must be unique in the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>