I have modal popup which opens on button click. I have a select dropdown which has user type, according to that user type , it fetches respective data from mysql table and populates in another select drop down. I am using .on(change) function , here is my modal popup's select dropdown:
<label for="inputEmail3" class="col-sm-4 col-form-label">User Type</label>
<select name="user_type" id="user_type" class="form-control form-control-sm" style="width: 100%;" required="">
<option selected="selected" value="">Select user type </option>
<option value="admin">Admin </option>
<option value="manager">Manager </option>
<option value="executive">Executive </option>
</select>
<label for="inputEmail3" class="col-sm-4 col-form-label">Employee/User</label>
<select name="user" id="user" class="form-control form-control-sm" style="width: 100%;" required="" disabled>
<option selected="selected" value="">Select Employee </option>
</select>
My Javascipt originally I had:
<script type="text/javascript">
$(document).ready(function(){
$('#user_type').on(function() {
var usertype = $(this).val();
$('#user').prop( "disabled", false );
$.ajax({
type:'POST',
url:'T_userData.php',
data:'usertype='+usertype,
success:function(html){
//alert(html);
$('#sub_prod').html(html);
//$('#city').html('<option value="">Select state first</option>');
}
});
});
});
</script>
then I changed it to
<script type="text/javascript">
$(document).ready(function(){
$('#trgtmodal').on("change","#user_type",function() {
var usertype = $(this).val();
$('#user').prop( "disabled", false );
$.ajax({
type:'POST',
url:'T_userData.php',
data:'usertype='+usertype,
success:function(html){
//alert(html);
$('#sub_prod').html(html);
//$('#city').html('<option value="">Select state first</option>');
}
});
});
});
</script>
still not working. If needed I can post the whole Modal Popup HTML markup. Please advise
Related
I have the db called rec where i store records like:
Id Name Surname
1 John smith
2 Roger jhonson
I wish to display all records in 2 drop-down menus. Say if I select Roger then the value of surname should be changed to Jhonson if it was already on Smith.
If I select John then value of the surname should go back to smith but if I want I should be able to change the surname of John to Jhonson which should not change the value of Name, the selected value should remain as John Jhonson.
Can someone please show me how this can be done?
Really appreciate your kind help and time in advance.
HTML
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
Use jQuery Onchange Event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
I have this problem ... I want to make the show hide some dropdowns with ajax, I don't know where to place the show hide code ... it only shows the first country, after selecting the country will appear and choose the city state to appear. ... can you help me fix this code?
this is my code and script
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value disabled selected>Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select State</option>
</select>
</div>
<div class="row">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
</select>
</div>
</div>
function
getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data: 'country_id=' + val,
success: function(data) {
$("#state-list").html(data);
getCity();
}
});
}
function
getCity(val) {
$.ajax({
type: "POST",
url: "getCity.php",
data: 'state_id=' + val,
success: function(data) {
$("#city-list").html(data);
}
});
}
You can use .prop for that. You can refer here.
You must start your script with $(document).ready(function()) so that JS will know if the page is loaded and ready.
Then consider this logic here. (Example code)
if($("#country-list option:selected").index() == 0){
$("#state-list").prop("hidden", true);
}else{
$("#state-list").prop("hidden", false);
}
The code above actually checks if the country-list items is not selected when the page loaded, the other dropdown will consider it as hidden, or else it is shown.
Add a hidden class to state and city drop-downs in HTML to hide them from initial state.
Display the state drop-down when country is selected.
If 'Select' option is selected/ value is cleared, then add the hidden class to the cascading drop-downs
var
stateContainer = $('.state-container'),
cityContainer = $('.city-container'),
countryList = $('#country-list'),
stateList = $('#state-list'),
cityList = $('#city-list');
countryList.on('change', function() {
if (this.value === '') {
stateContainer.addClass('hidden');
cityContainer.addClass('hidden');
stateList.val('');
cityList.val('');
} else {
stateContainer.removeClass('hidden');
//getState(this.value);
}
});
stateList.on('change', function() {
if (this.value === '') {
cityContainer.addClass('hidden');
cityList.val('');
} else {
cityContainer.removeClass('hidden');
//getCity(this.value);
}
});
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" >
<option value="" selected>Select Country</option>
<option value="A">Country A</option>
</select>
</div>
<div class="row state-container hidden">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" >
<option value="">Select State</option>
<option value="A">State A</option>
</select>
</div>
<div class="row city-container hidden">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
<option value="A">City A</option>
</select>
</div>
</div>
I have two selects, the second one is hidden and it should be shown if the first select has been changed, I checked it through on('change', function(){ ... and it is working so far. I've checked and also showed a console.log when the first select box is changed.
The main problem here is when I picked a option from the first select box, it should send some request using AJAX. I've sent some request to fetch_sections.php and it should append or add data in my second select box.
This is my updated script:
<script>
$(document).ready(function() {
$('select').material_select();
$('#school-list').on('change', function() {
$.ajax({
url: 'fetch_sections.php',
type: 'post',
dataType: 'html',
data: {parent: $(this).val() },
success: function(data)
{
$('#section-list').empty();
$('#section-list').html(data);
console.log(data);
}
});
$('#hideThis').show("slow");
});
});
</script>
This is my fetch_sections.php (working, checked with PostMan):
<?php
require '../assets/php/init.php';
if ($_POST)
{
$schoolID = Essentials::sanitize($_POST['parent']);
$fetchSQL = "SELECT `sectionid`, `name` FROM `sections` WHERE schoolid = ?";
$fetch = $conn->prepare($fetchSQL);
$fetch->execute([$schoolID]);
$fetchRes = $fetch->fetchAll(PDO::FETCH_ASSOC);
if(!$fetchRes) {
echo '
<option value="" disabled selected>Unfortunately, there is no section here.</option>
';
} else {
foreach ($fetchRes as $section)
{
echo '
<option value="'.$section['sectionid'].'"">'.$section['name'].'</option>
';
}
}
}
This is my select HTML also updated:
<div class="row margin">
<div class="input-field col s12">
<select id="school-list" name="school-list">
<option value="" disabled selected>Choose your school</option>
...
</select>
<label>School</label>
</div>
</div>
<div class="row margin" id="hideThis" style="display:none">
<div class="input-field col s12">
<select id="section-list" name="section-list">
<option value="" disabled selected>Choose your section</option>
</select>
<label>Section</label>
</div>
</div>
Update [as suggested by ccKep]:
I can now see the data that I want through console.log(data), the thing that it outputs is:
<option value="9-1">9-A...</option>, now I want to add it to my main select list but it doesn't let me.
The output should be:
<select id="section-list" name="section-list">
<option value="" disabled selected>Choose your section</option>
<option value="9-1">9-A...</option>
</select>
I am having problem passing two select to $_POST
i have two select and when i post from the first the value is not been saved ,so when i post from the second select doesn't remember the first select value ,I want to pass the first select and save the value to select.
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="Van">Vancouver</option>
<option value="vic">Victoria</option>
</form>
<form method="post" action="index.php">
<select id="dept" name="dept" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="1">First</option>
<option value="2">Second</option>
</form>
and i am using jquery to submit the form in change
when first form submitted select does not save the value of the selected option
$(document).ready(function() {
$('#city').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
$('#dept').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
});
I noticed you were missing some commas and that you didn't pass any data. Try this instead.
$("#city").change(function()
{
var selected = $("#city").find(':selected').val();
$.ajax({
url: "index.php",
type: 'POST',
data: {
"city": selected
},
success: function(data) {
console.log("success");
}
});
});
Also, you should be able to get the value of a select via val() e.g. $("#city").val().
For normal submit:
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" <?php echo $_POST['city']==="all" ? "selected" : "" ?>>all</option>
<option value="Van" <?php echo $_POST['city']==="Van" ? "selected" : "" ?>>Vancouver</option>
<option value="vic" <?php echo $_POST['city']==="vic" ? "selected" : "" ?>>Victoria</option>
</form>
In a "contact us" form, I need to insert a country code (ie 972, 1, 91) to the phone input field after choosing the country from the select list.
For example;
If a user chooses "US" from the list, than the phone input field will start with the number "1" and than the user will continue to write his number. How do I do that with jQuery?
Thank you
You can do this buy adding the value as code of the Country like for US the value of option should be 1
Your HTML should be,
<select id="country">
<option value="">Select Country</option>
<option value="1">US</select>
<option value="91">IN</select>
</select><br/>
Code: <input type="text" id="code" />
Jquery
$(function(){
$('#country').on('change',function(){
$('#code').val(this.value);// changing the code textbox value by current country value
});
});
HTML:
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="+44 ">UK</option>
</select>
<input id="phone" type="text" name="phone">
jQuery:
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="91">IN</option>
</select>
<br><br>
Code: <input type="text" id="code" />
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});`enter code here`