I have form with two select inputs, what I need to do, is when user choose option from this select, then the value of this option must pass to the function, which will return second select input. So it will looks like (for example):
<select name="firstselect">
<option value="1">Var 1</option>
<option value="2">Var 2</option>
</select>
And there will be a second select, but this input must be returned by the PHP function, which looks like:
<?php echo secondselect($firstselect); ?>
So when user select option with value var1, then the echo should look like:
<?php echo secondselect(1); ?>
But I must do it without page reloading, it is possible?
I know I can make few second select inputs and just show or hide them on change value of first select, but finally there will be a 50+ options, so better will be changing variable in php function.
I cannot imagine the case when you need to do this on PHP.
And without reloading the page.
On JavaScript... Like this:
function secondselect(_first_select){
var out=null;
var select_value=$('[name=firstselect]').val();
$('[name=firstselect] option').each(function(){
if($(this).val()!=select_value){
out=$(this).val();
}
});
return out;
}
$('[name=firstselect]').change(function(){
alert('second value of select : ' + secondselect( $(this).val() ));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="firstselect">
<option value="1">Var 1</option>
<option value="2">Var 2</option>
</select>
Related
I have this dropdown, where I want to change the variable in my js script based on which option is selected. The variable is send to another function which updates the page.
My html file:
//My JS function that is trying to access the data from the dropdown
function updateDD(){
$(".sheetnameSelect").change(function(){
return $(this).find(":selected").text()
})
}
//I want to use that function to update another variable based on selected option
var selected = updateDD()
alert(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>
However the function updateDD() is not returning the selected option (both when the pages loads or when I select different option)
You might not need to return the value, you can call the method whenever there is a change in select:
$(".sheetnameSelect").on('change', function() {
var selected = $(this).val();
createTable(selected);
});
function createTable(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>
I have a problem, it doesn't update the value of 2 selects. The value is a numeric code and a string is stored in DB.
Here is my example in HTML:
<select id="jform_country" name="jform[country]" class="form-control required chzn-done">
<option value="">Select country...</option>
<option value="1012234" selected="selected">Name country 1</option>
<option value="1012257">Name country 2</option>
</select>
<select id="jform_city" name="jform[city]" class="form-control required chzn-done">
<option value="">Select city...</option>
<option value="1982727" selected="selected">Name city 1</option>
<option value="1982739">Name city 2</option>
</select>
I retrieve DB value with a function in php (getData). But here is my problem... I try to pass that variable from PHP to JavaScript, it seems to work correctly and I change the value of the select with jQuery. But when refreshing the page, in some cases it does not work correctly.
Here is my code in PHP and jQuery:
$data = $model->getData();
$country = $data->country;
$city = $data->city;
echo '<script>';
echo 'var selectcountry = '. json_encode($country) .';';
echo 'var selectcity = '. json_encode($city) .';';
echo '</script>';
And with jQuery I recieve those variables:
jQuery(document).ready(function () {
setTimeout(function() {
rescueValue(selectcountry, selectcity);
}, 800);
function rescueValue(selectcountry, selectcity) {
if (selectcountry != null) {
jQuery("#jform_country option:contains('"+ selectcountry +"')").attr("selected", "selected");
jQuery("#jform_country").trigger("liszt:updated");
}
if (selectcity != null) {
jQuery("#jform_city option:contains('"+ selectcity +"')").attr("selected", "selected");
jQuery("#jform_city").trigger("liszt:updated");
}
}
});
Could it be that it works asynchronously? I tried to put a setTimeout but still I don't solve it. How can I make it recover the PHP value and update it in a simple way (similar to this one)? Thanks!
It's more correct to set the value of the select, than finding the option value from the list to set it the selected attribute, which may not always work if, for example, there's already another option with the selected attribute.
You can use jquery.val to set the value directly.
jQuery(document).ready(function () {
setTimeout(function() {
rescueValue(selectcountry, selectcity);
}, 800);
function rescueValue(selectcountry, selectcity) {
if (selectcountry != null) {
jQuery("#jform_country").val(selectcountry).trigger("liszt:updated");
}
if (selectcity != null) {
jQuery("#jform_city").val(selectcity).trigger("liszt:updated");
}
}
});
I have integrated into a third party delivery service which I populate via Jquery.
[town] -> dropdown
[suburb] -> dropdown
On page load all the select elements are blank. When the user selects town, it then populates suburb.
Now in the event of a post to the server and a returned error, I want to set the form to the state the form was posted in by adding a select element to the correct drop down values.
As an example, user selects town_id 5 and suburb_id 105, form is posted, and returned due to an error. At this point I wish to populate town with value 5 and suburb with value 105...
HTML code:
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="town_id" id="mds_towns">
<option value="">Select your town</option>
<option value="2">Town1</option>
<option value="3">Town2</option>
<option value="4">Town3</option>
</select>...
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="suburb_id" id="mds_towns">
<option value="">Select your suburb</option>
<option value="2">Suburb1</option>
<option value="3">Suburb2</option>
<option value="4">Suburb3</option>
</select>...
I am no jquery expert and I am struggling with the concept of how to get the correct values on a return post.
One of my ideas was to have a special span element with each form field, so something like:
<span id="suburb_value" value="105"> <-----------------*** ADD THIS ***
<div class="form-group col-md-6">
Your town<span class="require">*</span>
<select name="suburb_id" id="mds_towns">
<option value="">Select your suburb</option>
<option value="2">Suburb1</option>
<option value="3">Suburb2</option>
<option value="4">Suburb3</option>
</select>...
Now when the page loads, I populate the span field via php
<span id="suburb_value" value="<?=$suburb_id;?>">
Next the javascript does an ajax call to the api and returns with the list of towns. I then check the value in the span fields and if a value is found, I add a select element to the associated select value...
Would this be on the right path?
Try this:
<script>
$(document).ready(function() {
var townId = <?= (isset($_POST['town_id'])) ? (int) $_POST['town_id'] : 0; ?>,
suburbId = <?= (isset($_POST['suburb_id'])) ? (int) $_POST['suburb_id'] : 0; ?>;
if (townId > 0 || suburbId > 0) {
// make your api call here with townId and suburbId
}
});
</script>
If I understand you correctly, you simply want to retain the selected values in the dropdowns after the page is reloaded on submit. In this case, using jQuery you could try something like:
<script>
$(function(){
var town_id, suburb_id = false;
// Here we assign values to these JS variables if they come through via PHP's $_REQUEST.
<?php echo (!empty($_REQUEST['town_id']) ? 'town_id = '.intval($_REQUEST['town_id']).';' : '') ?>
<?php echo (!empty($_REQUEST['suburb_id']) ? 'suburb_id = '.intval($_REQUEST['suburb_id']).';' : '') ?>
// Here we make the correspondings dropdown options selected, if needed.
if (town_id !== false) {
$('select[name=town_id] option[value='+ town_id +']').attr('selected', 1);
}
if (suburb_id !== false) {
$('select[name=suburb_id] option[value='+ suburb_id +']').attr('selected', 1);
}
});
</script>
More elegant way of doing this would be to pre-select the OPTIONs while outputting the page via PHP, but it's hard to suggest anything in this regard not knowing the structure of your application.
I have a <"select'>, with some options and onChange listerner. When an option is selected certain values are set in some hidden fields. So if this change event won't happen, it means the values of those fields will remain in their initial state i.e 0.
What I want to achieve is that, only when an onchange has happened, that means hidden fields values has been set, I get the values from those hidden fields and perform some ajax with the data
This is what I have so far:
<select class="form-control choosedegree" name="sem" id="semester">
<option value="" selected="selected" disabled>Select Semester</option>
<option value="1">Year 1, Semester 1</option>
<option value="2">Year 1, Semester 2</option>
<option value="3">Year 2, Semester 1</option>
</select>
After this has fired, and finished,
$('select#semester').on('change', function(){});
then find some hidden input and set the new value gotten as a result of the onChange.
$('div.tab-content div.tab-pane.active form').find('input[type=hidden]').val()
How can i achieve that! Any kind of help is highly appreciated.
do like this:
$('select#semester').on('change', function(){
if($(this).val() != "")
{
// send ajax call here
setTimeout(SendAjaxCall,3000); // execute SendAjaxCall after 3 secs
}
});
function SendAjaxCall()
{
var val = $('div.tab-content div.tab-pane.active form').find('input[type=hidden]').val();
}
This is really odd, but I am probably missing something simple. I have a simple select statement where a user can choose a value.
onChange calls a function getDrop2() which currently I am trying to get it to alert me which option is chosen.
my html is:
<select onChange= "getDrop2()" id = "drop1" >
<option value="0">All</option>
<option value="1">Alphabetical</option>
<option value="2">Brewery</option>
<option value="3">Style</option>
</select>
My Javascript is:
function getDrop2(){
var choice = $("#drop1").val()
alert(choice);
}
The output of the alert statement is just blank.
In jQuery, you're better off doing something like:
<select id = "drop1" >
<option value="0">All</option>
<option value="1">Alphabetical</option>
<option value="2">Brewery</option>
<option value="3">Style</option>
</select>
With the following JavaScript:
$(function(){
$('#drop1').change(function() {
var choice = $(this).val();
alert(choice);
}
});
The idea is that jQuery is now attaching the change function automatically to the select with the id of "drop1" By using this pattern, you've decoupled the HTML from the JavaScript that's doing the business logic.
Although what others have selected is a better approach. My answer is just to tell you why your code is not working
Try this
var choice = $('#drop1 option:selected').val()
Instead of
var choice = $("#drop1").val()