So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)
some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}
You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}
Related
I have a simple selection dropdown that looks like this:
Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
and a javascript that will pop up a confirmation box only if the user chooses OFF.
<script>
function myfunction(){
if (this.value === '0'){
confirm("Are you sure you want to turn off?");
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>
Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.
this way
ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);
document.getElementById('criteriaon').addEventListener('change', myfunction);
function myfunction() {
if (this.value === '0') {
if (!confirm("Are you sure you want to turn off?") ) {
this.value = '1'
}
}
}
Criteria:
<select name="criteriaon" id="criteriaon" >
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
You can simply set the value of select to 1 by doing this.
this.value = '1';
function myfunction(){
if (this.value === '0'){
const result = confirm("Are you sure you want to turn off?");
if (!result) {
this.value = '1';
}
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});
I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks
There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.
This my script:
<html>
<head>
<script type="text/javascript">
function Check() //this the funciton for diasbled
{
var x =document.getElementById("supexp1");
var y =document.getElementById("supexp2");
if(x.value != "")
{
document.form1.supexp2.disabled=true;
}
else if(y.value != "")
{
{
document.form1.supexp1.disabled=true;
}
}
}
</script>
</head>
<body>
<form method="POST" action="destination.php" id="form1">
<select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
<option >Ekspedisi Local1</option> //this selection 1
<option >Ekspedisi Local2</option> //this selection 1
<option >Ekspedisi Local3</option> //this selection 1
</select>
<select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
</select>
</form>
</body>
</html>
I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.
I hope this is what you trying to do based on your description here is a jsfiddle
$(document).ready(function() {
$('#supexp1').change(function() {
$('#supexp2').attr("disabled" , "disabled")
});
$('#supexp2').change(function() {
$('#supexp1').attr("disabled" , "disabled")
});
});
Try this code
if(x.value != ""){
document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
document.getElementById("supexp1").disabled=true;
}
I guess to get the value of the selected item you need to use some thing like this
var e = document.getElementById("supexp1");
var x = e.options[e.selectedIndex].value;
instead of
var x =document.getElementById("supexp1");
do the same for Y
My form is composed of chained select. When I arrive at last, I submit it, if and only if all the select are filled.
Here is my function.
$("#form_maps select").each(function(index, el){
var val = $(el).val();
if(val === null)
{
alert('error message');
return false;
}
else
{
$('#form_maps').submit();
}
});
When I do my testing, an error is generated (the alert), but after a few seconds (I would say 2 or 3), the form is still submitted.
here is my html form
<form id="form_maps" method="post" style="height: 100px;">
<select name="select_0" id="select_0">
<option value="c_5" class="c_4">Excavateur</option>
<option value="c_11" class="c_4">Compaction</option>
</select>
<select name="select_1" id="select_1">
<option value="c_6" class="c_5">série 100</option>
<option value="c_9" class="c_5">série 200</option>
</select>
<select name="select_2" id="select_2">
<option value="c_7" class="c_6">above</option>
<option value="c_10" class="c_6">thru</option>
</select>
<select name="select_3" id="select_3">
<option value="c_8" class="c_7">système hydraulique</option>
<option value="c_12" class="c_7">système électrique</option>
</select>
</form>
What is my problem please? Thank you for your assistance to come.
I guess your form is submitted because one of the your selects has a valid value and the return false isn't stopping the loop. If you want to prevent to submit to form unless all selects do have a valid value, then I would suggest to use a boolean that will be set to false if one of the selects is invalid.
Something like this:
var canSubmit = true;
$("#form_maps select").each(function(index, el){
var val = $(el).val();
if(val === null)
{
alert('error message');
canSubmit = false;
}
});
if(canSubmit) {
$('#form_maps').submit();
}
There is a triple is so that might be something to begin with...
Hy I have t his script:
<script>
function get(obj) {
return document.getElementById(obj);
}
function getCrer(sel) {
var value = get(sel).options[get(sel).selectedIndex].value;
get('cbt').value=value;
}
</script>
<select id="combo1" onchange="getCrer(this)">
<option value="">Select</option>
<option value=0>Text1</option>
<option value=5>Text2</option>
<option value=9>Text3</option>
</select>
<input name="cbt" type="text" id="cbt"/>
I like to work in facebook so when I select from the list the calue shoul go to the input text cbt...but not working in fb. why?
When your onchange event fires, it's passing in the Select Object to getCrer, not the Object's ID, so your get method will return null. Try this instead:
function getCrer(sel) {
var value = sel.options[sel.selectedIndex].value;
get('cbt').value=value;
}