how to pass the select dropdown value to url
Here is what I tried.
<select name="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
$(document).ready(function(){ $('select').on('click', function(e){
e.preventDefault();
var value = $('#one').val();
window.location.href = url+'?&'+value;
} }); });
Here is working thing. Also, I am not sure, what exactly do you mean by "pass select value to URL simply"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var url = "http://www.google.com";
var value = "";
$(document).ready(function(){
$("select").change(function(){
alert($(this).val());
value = $(this).val();
window.location.href = url+'?&'+value;
});
});
</script>
</head>
<body>
Select:
<select name="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
</body>
</html>
You should use .change instead of on.click. Also add an id for select
<select name="value" id="selectedID">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</select>
and
$(document).ready(function(){
$("#selectedID").change(function(){
var value = $('#selectedID').val();
window.location.href = url+'?&'+value;
}
});
The question is not clear if you want to get the value from option and reload the page with a REQUEST query "value?=" with the selected value, use this code
$(document).ready(function()
{
$('select').on('change', function(e)
{
var value = $(this).val();
window.location.href = '?value='+value;
});
});
if you want to just replace the url without reloading try replacing the history state, use this code
$(document).ready(function()
{
$('select').on('change', function(e)
{
var value = $(this).val();
var urlNow = window.location.href.replace(/\?.*/g,'').replace(/\/$/g,'');
history.replaceState({},'',urlNow+'/?value='+value);
});
});
Related
code:
<script>
$(document).ready(function(){
$("#client").change(function(){
client = $(this).val();
$("#customer").html(client);
});
});
</script>
PDF
<select name="client" id="client" class="rights">
<option value="">Select Client</option>
<option value="test">test</option><option value="ABC Corp">ABC Corp</option>
<option value="others">Others</option>
</select>
In this code I have a dropdown through which I want when I change or select any value from dropdown then that value will be add with url as I mention in link tag i.e.. So, How can I do this ? please help me.
Thank You
you need to store the selected value and register click event on link, where you can pass the stored value
<script>
var value = null;
$(document).ready(function(){
$("#client").change(function(){
value = $(this).val();
});
$("#link").click(function(event){
event.preventDefault();
location.href=$(this).attr("href")+value;
return false;
});
});
</script>
PDF
<select name="client" id="client" class="rights">
<option value="">Select Client</option>
<option value="test">test</option><option value="ABC Corp">ABC Corp</option>
<option value="others">Others</option>
</select>
<script>
$(document).ready(function(){
$("#client").change(function(){
value = $(this).val();
href = $("#link").attr("href");
$("#link").attr("href",href + value);
});
});
</script>
PDF
<select name="client" id="client" class="rights">
<option value="">Select Client</option>
<option value="test">test</option><option value="ABC Corp">ABC Corp</option>
<option value="others">Others</option>
</select>
I want to retrieve districts and state from the database, and also to populate second dropdown list based on first dropdown list. In my code below the values are inserted directly:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="C:\Program Files\BitNami WAPPStack\apache2\htdocs \Prj\Online\jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var options = $('#test2 option');
$('#test1').on('change', function(e) {
$('#test2').append(options);
if ($(this).val() != 'Select') {
$('#test2 option[value!=' + $(this).val() + ']').remove();
} else {
$('#test2').val('Select');
}
});
});
</script>
<form name="form1" method="post" action="fid1.html">
<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">TamilNadu</option>
<option value="b">Kerala</option>
<option value="c">Andhra</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">Chennai</option>
<option value="a">Trichy</option>
<option value="a">Madurai</option>
<option value="b">Trivandram</option>
<option value="b">Cochin</option>
<option value="b">Azhapuzha</option>
<option value="c">Hyderabad</option>
</select>
</form>
</head>
</html>
for that purpose you should use Ajax call on your first drop box .
Ajax is a server side tools to fetch data from database.
Create a ajax function, for example get_country()
$(function() {
$('#test1').change( function() {
var val = $(this).val();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
now do your database query on findstate.php and use state div to show particuler state list.
I want redirect to a specific page in php by getting data from 3(multiple) drop-down lists.
drop-down lists options contains the value from database.
you can create redirection with javascript
<select name="abc" onchange="redirect(this.value)">
<!-- your options here -->
</select>
<script type="text/javascript">
function redirect(value){
window.location.href = "http://www.yourdomain.com/"+value;
}
</script>
or you can try jquery.
<select name="abc" id="abc">
<!-- your options here -->
</select>
<script type="text/javascript">
$(document).ready(function(){
$("#abc").change(function(){
window.location.href = $(this).val();
});
});
</script>
You can use jQuery change event, as example:
<select class="target" id="drop1">
<option value="URL_A">Option 1</option>
<option value="URL_B">Option 2</option>
</select>
<select class="target" id="drop2">
<option value="URL_C">Option 1</option>
<option value="URL_D">Option 2</option>
</select>
<select class="target" id="drop3">
<option value="URL_E">Option 1</option>
<option value="URL_F">Option 2</option>
</select>
<script>
$('.target').change(function() {
var id = $(this).attr('id');
window.location = $("#" + id).val();
});
</script>
I have also made example here http://jsfiddle.net/s2hLH/
Just take the values of your submitted form using $_POST and write a condition for decision making and redirect your page using header() function
Apologies if my question is a little badly worded but I am not quite sure how to ask it correctly.
I am using PHP to dynamically generate some selects and I was just wondering if it is possible to do this?
Or would I need to add something like {onChange="some_function();"} to each of the selects, passing some variable(s) to id it ?
<script type="text/javascript">
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $('Selects ID or class').val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
</script>
<p>Q1</p>
<select name="Q1select" id="Q1select" class="Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update1" class="Q1"></div>
<p>Q2</p>
<select name="Q2select" id="Q2select" class="Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update2" class="Q2"></div>
<p>Q3</p>
<select name="Q3select" id="Q3select" class="Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update3" class="Q3"></div>
Updated working script :
<script type="text/javascript">
$(document).ready(function () {
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$this.val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
});
</script>
Updated html :
<select name="select_Q1" id="select_Q1" class="question" data-div="update_Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question" data-div="update_Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question" data-div="update_Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>
You can assign an event handler to all the select elements using the following:
$('select').change(function(event) {
....
});
In the event handler, you can get the value of the select using:
$(this).val()
To get the ID of the select in the event handler, you can use;
$(this).attr('id')
Yes that would work ... but you could simplify a touch :
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
changed the selector within the function to $(this) instead of a class or id that way it will work when you use on multiple elements
To link the select to a div you could either name the div similar to the select ie select id = select_1 and div = div_1 or use the data property
<select name="Q2select" id="Q2select" data-div="divid" class="Q2">
then within your AJAX callback you can do :
$('#' + $(this).data('div')).html(data);
this will set the HTML content of the div with the id = divid ... just an idea
Update
there are a couple of things to try and debug this, first :
function (data) {
$('#update_Q3').html(data);
}
this puts the content in a div - this checks the content returned from the post is working and that you can insert HTML at this point
and try this :
function (data) {
alert($(this).data('div'));
}
this will confirm your selecting the correct div by getting the data
Update 2
My screw up !!!!! $(this) is not working in the callback, try this :
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$(this).val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
we save $(this) into a variable $this for later use
Here's how I would do it, using a class of question on each <select> and using the id as the unique identifier. The benefit of using a class to grab the selects is if you ever add any other select to the page, they won't be affected.
<script type="text/javascript">
$('.question').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
// lets find the div that matches this question and update it
var questionNum = $(this).attr('id').replace('select_Q', '');
var divId = 'update_Q' + questionNum;
$('#' + divId).html(data);
}
);
});
</script>
<p>Q1</p>
<select name="select_Q1" id="select_Q1" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>
Yes you could do
//For every select whose id ends with select
$('select[id$=select]').change(function(event) {
//getthe id so that you can post it
var id = this.id;
//save the variable this to another one to use in the callback
var that = this;
//post the selected value and thew id of the select
$.post('formupdate.php', { selected: $(this).val(), id : id },
function(data) {
update the next element after the select
$(that).next().html(data);
}
);
});
how can I pass the option value to the filename below? My purpose is to create files e.g. 1.php 2.php 3.php .... but I dont know how to pass it as a variable.
Thanks.
<form>
<select id="termid">
<option value="">- select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="other">Other</option>
</select>
</form>
Is this what you meant?
$('#termid').change(function() {
var val = $(this).val();
$('#some_div_below_select').load(val + '.php',
{
value: val
});
});
$('#termid option:selected').val() instead of THE OPTION VALUE should work.
Here's a jsfiddle to demonstrate getting the value.
You can use jQuery val() to get the value of the selected option when you handle the change event, and you can then use that to build up the string for your URL, like this:
$(document).ready(function() {
$('#termid').change(function() {
var selectedVal = $(this).val();
$('#some_div_below_select').load(selectedVal + '.php', { "value" : selectedVal });
});
});