I want to pass a drop down value through $_GET with a jQuery function
Here is my code:
<div class="span2 text-right">
<label class="f-s15">Choose Exam to take:</label>
</div>
<div class="span3">
<select name="test_tag" id="test_tag">
<?php
foreach($array2 as $value2){ ?>
<option value ="<?php echo $value2['_id']; ?>"><?php echo $value2['score_type']; ?> </option>
<?php
}
?>
</select>
Here is my jQuery function:
function passTag() {
var selectedvalue = jQuery('#test_tag').val();
location.href="test_new.php?id="+selectedvalue;
}
Now when I print_r($_GET), I don't get anything...
Try this
jQuery(document).ready(function(){
jQuery("#test_tag").change(function(){
var selectedvalue = jQuery('#test_tag').val();
location.href="test_new.php?id="+selectedvalue;
})
})
Related
I am fetching acno from table when i select a party name in option.I have so far tired i get the acno from the table but it is not place in the option box.
My controller code:
public function get_states2()
{
$name = $this->input->post('name');
$result = $this->db->query("SELECT TAcNo FROM tipup_payment LEFT OUTER JOIN parmaster on parmaster.pcode = tipup_payment.TName WHERE PName='$name' ")->result_array();
echo json_encode($result);
}
My View page code:
<div class="col-md-6">
<div class="form-group form-group-xs">
<div class="col-lg-9">
Party Name:
<select class="form-control countries" name="City">
<option></option>
<?php foreach ($PName as $row ): ?>
<option value="<?php echo trim($row['PName']); ?>"><?php echo trim($row['PName']); ?></option><?php endforeach ?>
</select>
</div>
</div>
<div class="form-group form-group-xs">
<div class="col-lg-9">
AcNo:
<select multiple="multiple" style="height: 85px;" id="Name" class="form-control states">
<option value=""></option>
</select>
<?php echo form_error('Area', '<div class="text-danger">', '</div>'); ?>
</div>
</div>
<div id="item">
<input type="checkbox" name="item">With Details</center></div>
</div>
</div>
My Script Code:
<script type="text/javascript">
$(document).ready(function(){
$('.countries').change(function(){
var name = $('.countries').val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Tieup/get_states2",
data:{name:name},
datatype: 'json',
success: function (data) {
/*get response as json */
alert(data);
var result = jQuery.parseJSON(data);
var no = result.TAcNo;
$("#Name").val(no);
/*ends */
}
});
});
});
</script>
This is my view page when i select a party name it should display the acno in acno option box( it down the party name).
give a class or id to ur dropdown
ur html
<select class="product">
</select>
ur jquery code
loop through all ur value and set it in ur option value one by one and at the end inject all ur html to ur select option using .html()
var value = [{"TAcNo":"341"}]
var options = '<option value="">Select</option>';
$(value).each((index, item) => { //loop through your elements
console.log(item)
options += '<option value="'+item.TAcNo+'">'+item.TAcNo+'</option>';
});
$('.product').html(options);
Hope it helps
Solution
you need to trigger change like this to update select value
$("#Name").val(no).change();
i'm trying to auto populate text-box when drop-down is selected. I've tried some code but nothing happen i already included the jquery file in my code.
I have a database table called services and the column are service_id, service_name, service_price.
Here's My view
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Service</label>
</div>
<div class="col-lg-4">
<div class="form-select-list">
<select class="form-control custom-select-value" id="service_name" name="service_name">
<option>Select Service</option>
<?php foreach ($service as $services): ?>
<option value="<?php echo $services->service_id; ?>"><?php echo $services->service_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Price</label>
</div>
<div class="col-lg-4">
<input type="text" id="price" name="price" class="form-control" />
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>
Controller
function add_form($patient_id){
$data['service']=$this->services_model->get_all_services();
$data['value'] = $this->patient_model->get_selected_patient($patient_id);
$this->load->view('header/header');
$this->load->view('Records/add_records',$data);
$this->load->view('footer/footer');
}
function getprice($service_id){
$laiza=$this->db->get_where("services",array("service_id"=>$service_id));
foreach ($laiza->result() as $row){
$arr = array('service_price' => $row->service_price);
header('Content-Type: application/json');
echo json_encode($arr);
}
}
I expect that when i select a data from dropdown the textbox will populate the price base on the selected item dropdown
ID selector # missing when your getting the Service_Name value
Change the same to
var service_id=$("#service_name").val();
or
var service_id= this.value;
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("#service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>
My drop down is showing blank then when i select the value of dropdown the same value is showing, but i have to show dropdown value as select first then when I click on button the respective value should show
I am doing a Php program
<form class="form-horizontal" name="form" method="post" action="<?php $_PHP_SELF?>">
<label for="courseDisp" class="col-sm-2" style="margin-top:10px;">Course : </label>
<?php
$course="SELECT * from course";
$res= $conn->query($course);
if($res->num_rows>0)
{
echo '<select name="courseDisp" id="courseDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0" selected> -- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["course_id"].'>'.$row['shortname'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<label for="yearDisp" class="col-sm-2" style="margin-top:10px;">Year : </label>
<?php
$year="SELECT distinct(year) from syllabus";
$res= $conn->query($year);
if($res->num_rows>0)
{
echo '<select name="yearDisp" id="yearDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0">-- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["year"].'>'.$row['year'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<script type="text/javascript">
document.getElementById('courseDisp').value = "<?php echo $_POST['courseDisp'];?>";
document.getElementById('yearDisp').value = "<?php echo $_POST['yearDisp'];?>";
<input type="submit" class="btn col-sm-2" style="margin-left:15px;margin-top:10px;width:60px;font-weight:bold;font-size:15px;" value="GO" name="btnGo" id="btnGo" />
</form>
I think you are doing it in a wrong way:
your code should look like this
<script type="text/JavaScript">
var valueSelected=document.getElementById('course').value;
alert(valueSelected);// do here according to the need
</script>
This is because there is no $_POST variables present before you submit a form.
$_POST variables can only be 'accessed' whenever a POST form is submitted, so when the form is not submitted, $_POST['course'] will be undefined. If you want to use persistant, but also relative variables, use $_GET.
This can be done the following way:
<script type="text/javascript">
document.getElementById('course').value =<?php echo $_GET['course'];?>";
</script>
(this will cause an error if value is not set, make sure to make exceptions for that, using if statements in PHP)
but the value also needs to be fetched from the URL.
so your url needs to have ?course=<course_value> in it, for example:
https://example.com/index.php?course=Course%201
Click here for more about POST vs GET requests
Instead of setting the value with javascript, you should directly write the selected attribute.
<select name="course">
<?php foreach ($options as $key => $value): ?>
<option value="<?= $key ?>"<?php if ($key == $_POST['course']) echo " selected" ?>>
<?= $value ?>
</option>
<?php endforeach; ?>
</select>
If you have to do this in javascript, keep sure, you use the correct syntax. Your example has a wrong " at the end of the line. Also you should use json_encode, if you want to output vars into javascript. And a last thing - if you don't put this inside the document ready event, the script has to be placed after the select element, which you wan't to manipulate
<select name="course">...</select>
...
<script type="text/javascript">
document.getElementById('course').value = <?= echo json_encode($_POST['course']) ?>;
</script>
Needed to keep the <option value="">-Select-</option>
<form action="mydtr" method="post">
<select id="periodname">
<?php foreach($period as $period): ?>
<option><?= $period['period']; ?></option>
<?php endforeach; ?>
</select>
</form>
Im looking for ways to prevent selection options to reset after i select and submit. thank you in advance for the help
Not sure if this is what you asking for but here you go.
<?php $period = array("period1", "period2", "period3", "period4"); ?>
<form action="" method="post">
<select id="periodname" name="periodname">
<?php foreach($period as $period): ?>
<option><?= $period; ?></option>
<?php endforeach; ?>
</select>
<input value="submit" type="submit"></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php if(isset($_POST["periodname"])): echo "Form was submitted and we set that value of the select box to selected ".$_POST["periodname"];?>
<script>
$( "#periodname option" ).each(function( index ) {
var item = $(this).val();
if(item == "<?php echo $_POST["periodname"]?>"){
$(this).prop('selected', true);
}
});
</script>
<?endif;?>
I'm developing an app that have a form that contains two selects populated dynamically with arrays.
The second select is disabled if there isn't a choice in the first of them and i need to filter the options of the second select respect the choice of the first.
Whereas I must to pass these values to another PHP page I mustn't do the filter using the value attribute.
I've tried to use a custom attribute but without results.
This is my code,
<tr>
<td style="color: white;">Seleziona data: </td>
<td>
<select class="form-control" name="data" id="select1">
<option value="prova" disabled selected> Scegli</option>
<?php for ($y=0; $y<count($giorni); $y++){ $giorno=$ giorni[$y];?>
<option value="<?php echo $giorno; ?>" id="<?php echo $y; ?>">
<?php echo $giorno; ?> </option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td style="color: white;">Seleziona ora: </td>
<td>
<select class="form-control" name="ora" id="select2" disabled>
<?php $count=1 ; while ($count <=3 ){ if ($count==1 ){ for ($g=0; $g<count($ora1); $g++){ ?>
<option id="<?php echo $count-1; ?>" value="<?php echo $ora1[$g]; ?>">
<?php echo $ora1[$g]; ?>
</option>
<?php } $count ++; } ?>
<?php if ($count==2 ){ for ($g=0; $g<count($ora2); $g++){ ?>
<option id="<?php echo $count-1; ?>" value="<?php echo $ora2[$g]; ?>">
<?php echo $ora2[$g]; ?>
</option>
<?php } $count ++; } ?>
<?php if ($count==3 ){ for ($g=0; $g<count($ora2); $g++){ ?>
<option id="<?php echo $count-1; ?>" value="<?php echo $ora3[$g]; ?>">
<?php echo $ora3[$g]; ?>
</option>
<?php } $count ++; } } ?>
</select>
</td>
</tr>
JAVASCRIPT:
<script>
document.getElementById('select1').onchange = function() {
document.getElementById('select2').disabled = false;
};
</script>
<script>
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).id();
var options = $(this).data('options').filter('[id=' + id + ']');
$('#select2').html(options);
});
</script>
How can I solve it?
Thanks
There is an issue with your html. There is more than one option with an identical id. On a html document, ids must be unique.
For the same reason, you cannot filter your options on the id value.
What you should do is to use a data- attribute instead the id attribute. This will allow you to filter on it.
You could use the json_encode function to generate JSON objects in your PHP code and create the select2 options dynamically on the client side.
<tr>
<td style="color: white;">Seleziona data: </td>
<td>
<select class="form-control" name="data" id="select1">
<option value="prova" disabled selected> Scegli</option>
<?php
foreach ($giorni as $key => $value) {
?>
<option value="<?php echo $value; ?>" id="<?php echo $key; ?>" ><?php echo $value; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td style="color: white;">Seleziona ora: </td>
<td>
<select class="form-control" name="ora" id="select2" disabled></select>
</td>
</tr>
<script>
// the options object contains the possible option values for select2
// it can be accessed as an associative array using the selected value from select1
var options = {
"0" : <php echo json_encode($ora1, JSON_FORCE_OBJECT) ?>,
"1" : <php echo json_encode($ora2, JSON_FORCE_OBJECT) ?>,
"2" : <php echo json_encode($ora3, JSON_FORCE_OBJECT) ?>
};
// a helper variable to prevent unnecessary work
var prevSelectedValue = null;
// onChange handler for select1
document.getElementById('select1').onchange = function () {
var selectedValue = document.getElementById('select1').value;
if (selectedValue && (prevSelectedValue != selectedValue)) {
// select1 has changed so there is work to do
// 1 - get a handle on select2 to make code more legible
var select2 = document.getElementById('select2');
// 2 - remove all existing options
select2.options.length = 0;
// 3 - add new options
var obj = options[selectedValue];
// iterate through the object to get the keys and values
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var newOption = document.createElement('option');
newOption.text = obj[key];
newOption.value = key;
select2.options.add(newOption);
}
}
// 4 - enable select2
select2.disabled = false;
// 5 - record select1 change in prevSelectedValue
prevSelectedValue = selectedValue;
}
};
</script>