I use select as below:
<select name="account_type" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
Now I want to catch those option values using php variable, and here is the important part: I will have an input field, and based on the values I want to enable/disable that input filed.
How can I do that?
Using jQuery give your select an id like below
<select name="account_type" id="account" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
<!--input to be disabled -->
<input type="text" id="disable">
jQuery
$('#account').on('change', function(){
if($(this).val() === '1') {
$("#disable").prop('disabled', true);
//you can also send data to PHP here using AJAX
//var data = {one: $(this).val()};
//$.post( "test.php", data, function( data ) {
//$( ".result" ).html( data );
//});
}else if($(this).val() === '2') {
//code here
}
//check for other values
});
example
You could do this with jQuery. If you don't know jQuery, check this out: jQuery.com
After you "installed" jQuery, you can use this in your js-File. I hope that you know how to create and use a js-File.
The next thing is to implement a good method for your select-button.
This could look like this in your js-File:
$('#my-select').change(function(){ // "#my-select" is the ID of your select. You need to implement a ID.
//do stuff here, eg.
if ($(this).val() == '5') { //check the selected option etc.
$("input").prop('disabled', true);
} else {
$("input").prop('disabled', false);
}
});
Here's a jsFiddle.
Hope this helps you.
html code
<select>
<option data-id="1">1</option>
<option data-id="2">2</option>
</select>
JQuery code
$(document).ready(function(){
$("select").change(function(){
var display= $("select").val();
if(display == 1){
$("select").attr("disabled", 'disabled');
}
});
});
I am not sure what you want exactly.check out this may be it will be helpful for you JSFiddle
Related
I need to run a jquery function if a certain dropdown option is selected.
<select name=dropdown size=1>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
I have the commands in the function ready, Im just not sure on how to make it so if option 2 is currently active in the dropdown, then run the function.
(dropdown doesnt have a submit button, i want it ran when the user highlights the option)
Try this demo http://jsfiddle.net/JGp9e/
This will help, have a nice one!
code
$('select[name="dropdown"]').change(function(){
if ($(this).val() == "2"){
alert("call the do something function on option 2");
}
});
HTML
<select name="dropdown" size=1>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
use
$("#idofselectbox").change(function(){
// your code here
});
hope this helps....
Try this one, Demo on JsFiddle
$('select[name="dropdown"]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
alert($(this).val());
});
});
You need to use change function
$('select[name=dropdown]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
if($(this).val()==2){
//do what u want here
}//u can check your desired value here
});
});
I think you want this.
A simple way can be as following:
<select name="select" id="select" onChange="window.location = this.value">
<option value="/en">English</option>
<option value="/ps">Pashto</option>
</select>
I have custom registration system based on url parameters.
Step1: I have some buttons and when you click one of the buttons it will pass value to next page, where i'm able to get value by using <?php echo $_GET['step1'];?> (this works fine)
Step2: I want to use just two select boxes (don't want to use form here) and on <a> click I want to pass that selection to url.
Here is my code:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
So here is what I want to pass to the next page:
http://domain/step1/step2/step3?parameterfromstep1=something&gender=male&color=red
How should I make it? Should I use php on a button click or jquery?
Thanks
<a id="next" href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
use below code
$('#next').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var gender = $('[name="gender"]').val();
var color = $('[name="color"]').val();
if( gender && color ){
window.location.href = url+'?&'+gender+color;
}
});
Well, this is maybe not the best or most beautiful approuch but i think the code below will work for you:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on('click', '#nextButton',function( event ) {
// Stop default action
event.preventDefault();
window.location.href = $(this).attr('href') + '&gender='+$('select[name="gender"] option:selected').text()
+ '&color='+$('select[name="color"] option:selected').text();
});
</script>
I'm new with this JQuery Mobile thing. And the first problem i met in this is i can't set "selected" attr on multiple select option to "false" / unselected in JQuery mobile using Javascript.
A documentation i found told me to refreshing a select so i can manipulate it via javascript here in the bottom of it's page:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html
I've done it. But i don't know if i did it wrong or what. Here is my code :
<script type="text/javascript">
function SelectAll(){
var select=document.getElementById('sfruit');
if (select.options[1].selected == true){
alert('All Selected');
for (x in select.options){
if(x > 1){
if (select.options[x].selected == true){
alert(select.options[x].value+' selected');
RefreshSelect();
select.options[x].selected == false;
}else{
alert(select.options[x].value+' unselected');
}
}
}
}
}
function RefreshSelect(){
var myselect = $("select#sfruit");
myselect[0].selectedIndex = 5;
myselect.selectmenu("refresh");
}
</script>
<select onChange="SelectAll()" data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
What i actually want is when i select "All" option, other option that have been selected become unselected.
I'll attaching the image if u all still doesn't understand what i mean, later, it's already late here.
Thanks guys. And please help me. .. :)
I think this is what you want
$(window).load(function(){
$("select#sfruit").change(function () {
$("select#sfruit option:selected").each(function (obj) {
if($(this).index()==1){
alert('All Selected');
$("select#sfruit option:selected").removeAttr("selected");
$("select#sfruit option:eq(1)").attr("selected","");
}
});
});
});
<select data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
http://whodateswhere.com/auto/
This is my site I'm building.
Where it shows:
Make:
Model:
I'd like to know, after the first is chosen, how do I let the second drop down know it will be from that make?
Here is the code:
<script type="text/javascript">
$(function(){
$.get('makes_models.php', function(data){
$('#ajax_make_select').html( data );
});
// on change of dropdown1 populate dropdown2 with the respective data
$('#ajax_make_select').change(function(){
$.get('models.php',{ make: $('ajax_make_select').val() }, function(data){
$('#ajax_model_select').html( data );
});
});
});
</script>
with the makes_models.php code is:
<select>
<option value=999>Select a Make</option>
<option value=1>Acura</option>
<option value=2>Audi</option>
<option value=3>BMW</option>
</select>
How would I go about coding the second file? "models.php"
if Acura is chosen, I would like it to display
<option value=1>MDX</option>
<option value=2>RDX</option>
<option value=3>RL</option>
<option value=4>TL</option>
<option value=5>TSX</option>
<option value=6>ZDX</option>
I suggest you check out my answer here.
http://jsfiddle.net/tBrXt/2/
In response to how you would code the second file, use the switch/case statement:
<?php
switch($_GET['make']) {
case "acura":
echo json_encode(array("MDX","RDX","RL","TL","TSX","ZDX"));
return;
case "ford":
echo json_encode(array('f150','mustang','etc'));
return;
}
?>
i need some clarification on how to populate select(s) with data from mysql. Basically what I am trying to do is:
There will be a first select box with some data in it.
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
when the user selects a option in the first select,
there is a second select below that, which should reflect the values according to the selection made in the first select.
<select>
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
</select>
The data is commin from MySQL. I am not sure if need to post to same page, but if I do, how to retain the values alredy selected in the previous select boxes? do i need to use javascript?
any help?
Thanks.
You should use javascript so you don't need a page refresh. I just re-read your question and I'll have a solution involving an AJAX request in a second to pull dynamic data:
HTML
<select name="select1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select2" id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#select1').change(getDropdownOptions);
});
function getDropdownOptions() {
var val = $(this).val();
// fire a POST request to populate.php
$.post('populate.php', { value : val }, populateDropdown, 'html');
}
function populateDropdown(data) {
if (data != 'error') {
$('#select2').html(data);
}
}
</script>
populate.php
<?php
if (!empty($_POST['value'])) {
// query for options based on value
$sql = 'SELECT * FROM table WHERE value = ' . mysql_real_escape_string($_POST['value']);
// iterate over your results and create HTML output here
....
// return HTML option output
$html = '<option value="1">1</option>';
$html .= '<option value="b">B</option';
die($html);
}
die('error');
?>