I need to select a specific item of a combobox in my page when i click in a button.
I am using php and javascript code in my page.
Actually i am calling a javascript function at the "onclick" of the button. But i still dont get the right command to do this.
example:
<select id="TEST">
<option> a</option>
<option> b</option>
<option> c</option>
</select>
i want to show the item b when i click in the button.
<select id="select1">
...
</select>
<button onclick="chooseItem('select1', 1)">
<script type="text/javascript">
function chooseItem(id, index){
var selectElement = document.getElementById(id);
selectElement.selectedIndex = index;
}
</script>
or with jQuery:
<select id="select1">
...
</select>
<button id="button1">
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(e){
$("#select1").each(function(){
this.selectedIndex = 1;
});
});
});
});
use selectedIndex property.
Related
In my project I want the serialize data of the form, but for the dropdowns it gives the values only not a text of that selected value of drop down.
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
Here it gives attend = 1. I also want the text of that selected option that is "Question".
serialize() will only retrieve the name and value properties from an element.
To do what you require you can use serialize() as normal, then append the selected option text to it:
var data = $('form').serialize() + '&attendText=' + $('select option:selected').text();
console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
</form>
If you wanted to use serializeArray() you would need to push() the data to the resulting object, like this:
var data = $('form').serializeArray();
data.push({
name: 'attendText',
value: $('select option:selected').text()
});
console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
</form>
select id section
script section in head
So this is the situation.
I have this
<select name="users" onchange="showUser(this.value)" id="1">
<option value="">Select a person:</option>
<option value="'.$lectures[4][0].'">'.$lectures[4][0].'</option>
<option value="'.$lectures[5][0].'">'.$lectures[5][0].'</option>
<option value="'.$lectures[6][0].'">'.$lectures[6][0].'</option>
<option value="'.$lectures[7][0].'">'.$lectures[7][0].'</option>
</select>
Like this I have lots of select element in the page. I want to pass two value through ajax.
One is selected option value. Which I have done successfully.
Other is the I want to pass select tag id. In this case it is 1.
So Could you help me in the ajax part
xmlhttp.open("GET","optiondetails.php?q="+str,true);
xmlhttp.send();
How to pass this value through ajax. Please keep in mind that I have to do this for many select tag. So I cannot pass them directly by value.
Thanks for you help.
try this:
$(document).ready(function(){
$('select').change(function(){
var opt = $(this).find('option:selected');
console.log(opt.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="1">
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select id="2">
<option value="chocolate">chocolate</option>
<option value="pizza">pizza</option>
</select>
I used jQuery selector to get the selected option inside the changed select element
I think this is more convenient way to do that:
$(document).ready(function(){
$(document).on('change', 'select', function(){
var optVal = $(this).val();
var id = $(this).attr('id');
$.ajax({
method: "GET",
url: "optiondetails.php",
data: {q:optval, tag_id:id},
cache: false
}).done(function(response){
console.log(response);
});
});
});
Noob here trying to do something simple with Jquery. Basically I have a small select-option dropdown like this:
<select onchange="javascript:swapContent('con3');">
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
Currently it is posted via ajax to a $php variable here:
$contentVar = $_POST['contentVar'];
javascript function is here:
<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
</script>
How can I instead post the value of the select-option dropdown?
I realize this is basic, but I have to start somewhere and cannot find a tutorial that shows me how to do what I need. Thank you for your help.
How can I instead post the value of the select-option dropdown?
If you want to send values yo tour script you should start by giving values to your option elements (and an id to your <select> element to be able to use it and retrieve the selected value):
<select onchange="javascript:swapContent('con3');" id="myselect">
<option value="value1">selection 1</option>
<option value="value2">selection 2</option>
<option value="value3">selection 3</option>
</select>
and then:
// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
$("#myDiv").html(data).show();
});
If on the other hand you wanted to send the text of the selected option you could use this:
// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
$("#myDiv").html(data).show();
});
Now inside your PHP script you could fetch the value:
$_POST['selectedValue']
HTML:
Remove the inline javascript change event from the select.
<select>
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
jQuery:
Bind a change event to your select. Inside this event, this.value with be the value of the select.
$(document).on("change", "select", function(){
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: this.value} ,function(data) {
$("#myDiv").html(data).show();
});
});
var val = $('select option:selected').text();
Using jQuery's selector syntax, you first select the "select" control, and then the "option" child of the select control. You then look for the selected state. Finally, return the text.
Of course, as is, this code will select every "select" control on the page. It would be better to give your select control an id:
<select id="mySelect">
<option>Some option</option>
<option>Some other option</option>
</select>
Then the code becomes
var val = $('#mySelect option:selected').text()
You might want to consider an unobtrusive JavaScript approach and not have the on-change event in your html mark-up, instead attach an event handler as shown below, from the jQuery API site
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>
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
I have this script and I want to get the value of drop down select list in the PHP and check the if (jws1 != "") then show 1 to 10 value in the second drop down box using of for loop...
JavaScript code:
<script language="javascript" type="text/javascript">
function test()
{
var e = document.getElementById("JWSections");
var Sections = e.options[e.selectedIndex].value;
alert(Sections);
}
</script>
HTML code:
<select name="JWSections" id="JWSections" onchange="test();">
<option value="">Select Sections</option>
<option value="jws1">Section 1.1</option>
<option value="jws2">Section 1.2</option>
<option value="jws3">Section 1.3</option>
<option value="jws4">Section 1.4</option>
</select>
I want to get the value like jws1, and check in the PHP.
For PHP to be able to do anything with your HTML form data, you'll have to submit it to PHP.
You can either submit the form itself or use AJAX to pass in the value of jws1 and build the options from the result. Jquery is pretty good with doing that kind of thing, all you gotta do is set your AJAX request's data type to HTML and assign the data from the "success" callback to your destination drop down list.
<select name="JWSections" id="JWSections" onchange="test(this);">
<option value="">Select Sections</option>
<option value="jws1">Section 1.1</option>
<option value="jws2">Section 1.2</option>
<option value="jws3">Section 1.3</option>
<option value="jws4">Section 1.4</option>
</select>
<select name="JWSections" id="secondDropDown"> </select>
<script language="javascript" type="text/javascript">
function test(dropdown)
{
var selectedjws = dropdown.options[dropdown.selectedIndex].value;
var secondDropDown = document.getElementById('secondDropDown');
$.post('path', { selectedjws : selectedjws }, function(key, value){
// Remove all options from second dropdown
for(var i = 0; i < secondDropDown.options.length; i++){
secondDropDown.remove(i);
}
// Add options by key value pair returned from server
secondDropDown.add(new Option(value, key))
});
}
</script>
jsfiddle: http://jsfiddle.net/KTq6y/1/