I am trying to retrieve on server-side the value from the selected option sent using a jQuery .load() call like this:
<script type="text/javascript">
$(function () {
$("#first").change(function () {
$("#second").load('populate_section.php?year=', {first: $(this).val()});
});
});
</script>
<tr>
<td>
<select id="first" name="year">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="second" name="section">
</select>
</td>
</tr>
Then how I try to retrieve the value in my PHP code :
<?php
$year = $_GET['year']; // for test only
echo "<option>" . $year . "</option>";
?>
I assume here that the result will be a dropdown box with a value of whatever I chose on the first dropdown. However, it seems that var $year is empty.
Thanks.
You have not set any value for "year" GET variable in the URL.
If you need to send $(this).val() as the "year", do it like below code.
$("#second").load('populate_section.php', {"year": $(this).val()});
Try this:
$(function () {
$("#first").change(function () {
$("#second").load('populate_section.php', {year: $(this).val()});
});
});
Related
I have an issue. I need to set the select value as text in the select box using jQuery but unable to do it.
<select name="countryCode" class="chosen-select" id="countryCode" required>
<?php foreach ($countrydata as $key => $value) {
if ($value['con_code']=='IN') {
$select='selected';
}else{
$select='';
}
?>
<option data-text="<?php echo $value['country']; ?>" value="<?php echo $value['dial_code']; ?>" <?php echo $select; ?>><?php echo $value['country']; ?></option>
<?php } ?>
</select>
My script part is given below.
$('#countryCode').find(':selected').html($('#countryCode').find(':selected').attr('value')); // already changed onload
$('#countryCode').on('change mouseleave', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
$('#countryCode option:selected').html($('#countryCode option:selected').attr('value'));
$(this).blur();
});
$('#countryCode').on('focus', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
});
What I need is that when the user selects any text, it's value will be shown to the user. In my code it's not happening like this.
1st: a little optimization of your JS :
$('#countryCode option:selected').html($(this).val());// already changed onload
Now, how to select an option using JS :
$(function() {
var $sel = $('.chosen-select');
$('#exists').click(function() {
$sel.val('option3');
console.log($sel.val());
});
$('#disabled').click(function() {
$sel.val('option2');
console.log($sel.val());
});
$('#noExist').click(function() {
$sel.val('option5');
console.log($sel.val());
});
$sel.on('change', function() {
console.log($sel.val());
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="exists">Select 3rd option</button>
<button id="disabled">Select disabled option</button>
<button id="noExist">Select inexistant option</button>
<select class="chosen-select">
<option>option1</option>
<option disabled>option2</option>
<option>option3</option>
<option selected>option4</option>
</select>
<button onclick="console.clear();">X</button>
As you can see, only existant and not disabled options can be selected.
should be something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('#countryCode').on('change', function(){
var val = $(this).val();
$(this).find("option").each(function(){
$(this).text($(this).attr("data-text"));
});
$(this).find(":selected").text(val);
}).trigger("change");
});
</script>
<select id="countryCode" class="chosen-select">
<option data-text="A Text" value="A value">A Text</option>
<option data-text="B Text" value="B value">B Text</option>
<option data-text="C Text" value="C value" selected>C Text</option>
</select>
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>
I have a problem on passing more than one values from a dropdown menu. What I am doing is an attendance system where a dropdown menu containing the choices of attendance status per student. User will then choose the attendance status of each student accordingly, and what I am trying to do is to pass the status that has been chosen to another page.
I am trying to insert the selected attendance status into an array using AJAX and then pass the array to another page. Here's what I have so far:
todaysattendance.php
//dropdown menu
<tr>
<td> $fetched_fName $fetched_lName </td>
<td> <select name='okselect' id='okselect'>
<option value='no'> </option>
<option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
<option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
<option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
<option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
<option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
<option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
</select></td> </tr>
todaysattendance.php
//AJAX code
var tempArr = [];
$("#okselect").change(function()
{
var output = getValues(this, function ()
{
for (var i=0;i<output.length;i++)
{
tempArr.push(output);
};
});
$.ajax({
type: "POST",
url: "add_attendance_check.php",
data: {tempArr: tempArr},
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
});
add_attendance_check.php
$passed_attstatus = array();
$thestatus = $_POST['tempArr'];
array_push($passed_attstatus, $thestatus);
But from this coding, let's say I took the attendance status for 10 students, I only managed to get the last student's attendance status. I need help on this. Thank you very much in advance!
print variable dropdown_value in add_attendance_check you will get the value of selected dropdown.
<form method="post" action="" role="search">
<select name='okselect' id='okselect'>
<option value='no'> </option>
<option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
<option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
<option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
<option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
<option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
<option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
jQuery(document).ready(function() {
jQuery("#okselect").change(function() {
var dropdown_value = $('#okselect').val();
$.ajax({
type: "POST",
url: "add_attendance_check.php",
data: {dropdown_value: dropdown_value},
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
});
});
</script>
I have a great news, I finally solved the problem. All I need to do is to change this line in todaysattendance.php from
<select name='okselect' id='okselect'>
into
<select name='okselect[]' id='okselect'>
In add_attendance_check.php, I simply changed to
$passed_attstatus = array();
$thestatus = $_POST['okselect'];
array_push($passed_attstatus, $thestatus);
No need for AJAX from the very beginning. Anyway I would like to thank everyone who responded. Have a good day!
<select name='okselect' id='okselect' onchange="abc(this.value)">
//your option
</select>
And Ajax call abc function inner abc(value)
With this code I can see each option value printed but the page is refreshed every time I select an option. The server get the post data correctly, so I just need to do it without refreshing.
Thanks. Regards.
<form action="" method="post">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<script type="text/javascript">
$('#day').change(function()
{
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
</script>
<?php
include 'day.php'; ?>
day.php
<?php
$day = $_POST['day'];
echo $day;
?>
I think you need this:
e.preventDefault();
//add your id="day"
<select name="day" id="day" onchange="this.form.submit();">
$('#day').change(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
Update the onchange to call a Javascript function that copies the data to a hidden field in another form, and use Ajax to submit that one instead.
Optionally, you could also submit the data through Ajax directly, without the additional form, but for things that might be done with high frequency, I find it useful to minimize the bandwidth as much as possible.
I could see every option value printed by the <p id=..> without refreshing the page. But the post data is not passed to day.php..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<head>
<script>
function postSelection(selectObject) {
var day = window.dateForm.day.value = selectObject.options[selectObject.selectedIndex].value;
var dataString = "day=" + day;
$.ajax ({
type:"post",
url: "day.php",
data:dataString,
success: function (response) {
$("#list").html(response);
}
});
return false;
}
</script>
</head>
<body>
<form name="displayForm">
<select name="day" onchange="return postSelection(this)">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<form action="" method="post" name="dateForm">
<input type="hidden" name="day">
</form>
<?php include 'day.php'; ?>
</body>
</html>
I'm trying to write this code to retrieve data from the first Select option to the second Select:
Fist Select:
<select name="league">
<option value="0">------------Please Select League-------</option>
<?php
$sql_league="select * from ".$prev."league";
$re_league=mysql_query($sql_league);
while($d_league=mysql_fetch_array($re_league))
{
?>
<option value="<?=$d_league['id']?>" <?php if($_SESSION['id']==$d_league['id']){?> selected="selected" <?php }?>><?=$d_league['title']?></option>
<?php
}
?>
</select>
Second Select:
<select name="team">
<option value="0">------------Please Select team-------</option>
<?php
$sql_team="select * from ".$prev."team where leagueID=".$d_league['id']."";
$re_team=mysql_query($sql_team);
while($d_team=mysql_fetch_array($re_team))
{
?>
<option value="<?=$d_team['id']?>" <?php if($_SESSION['id']==$d_team['id']){?> selected="selected" <?php }?>><?=$d_team['title']?></option>
<?php
}
?>
</select>
Second Select should depend on the selection from the first Select (If I chose League1, the Second select options should show teams assigned to that league).
any Ideas how to make this work?
try this
<select name="league" onChange="bindSecondSelect()">
<option value="0">select</option>
// your php code
</select>
<select name="team">
// your php code
</select>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
function bindSecondSelect()
{
if($('[name="league"]').val() != "0")
{
$('[name="team"]').find('option').css('display','none');
$('[name="team"]').find('option[value="'+$('[name="league"]').val()+'"]').css('display','block');
}
}
</script>
Send an ajax request to a function with the first select value. This function should get the details of that value and returns the details to the browser. Use that details and append it into the second select.
I have created a little fiddle for you http://jsfiddle.net/TqKG3/3/.
I have used some default values to demonstrate, you will have to use ajax call and return json.
For eg :
$("#opt_leg").change(function () {
$("#opt_mem").find('option').remove();
var url = "your_url.php?league_id=" + $(this).val();
$.get(url, function(data){
var list = jQuery.parseJSON(data);
$.each(list, function (i, item) {
$("#opt_mem").append("<option value=\"" + item.id + "\">" + item.name + "</option>");
});
});
});