I read the discussion on how to check outstretched by HTML select and add in HTML text input.
Does not work in my case having a select dynamic that takes while loop with the data from DB. Could you help me find a solution?
I want to display the value and the text that is chosen in the select, in the form below in a text field.
<select name="auto" id="auto">
<option value="false">Auto non presente</option>
<?php while ($row = mysqli_fetch_array($result_modello)):; ?>
<option value="<?php echo $row['id_modello']; ?>"><?php echo $row['nome_modello']; ?></option>
<?php endwhile; ?>
</select>
<select name="marca">
<option value="false">Marca non presente</option>
<?php while ($row = mysqli_fetch_array($result_marca)):; ?>
<option value="<?php echo $row['id_marche']; ?>"><?php echo $row['nome_marche']; ?></option>
<?php endwhile; ?>
</select>
Not using jQuery but with plain old regular Javascript something along these lines should do it.
<form>
<select id='auto' name='auto'>
<option value=1>Banana
<option value=2>Apple
<option value=3>Cherry
<option value=4>Pomegranate
<option value=5>Mango
</select>
<div id='results'></div>
</form>
<script type='text/javascript'>
function display(e){
var el=e.target;
var div=document.getElementById('results');
var value=el.options[el.options.selectedIndex].value;
var text=el.options[el.options.selectedIndex].text;
div.innerHTML=value+text;
}
document.getElementById('auto').addEventListener('change',display,false);
</script>
this will work
var e = document.getElementById("auto");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
Try this :
$("input[type=text]").val($("select[name=marca]").val());
Or
$("input[type=text]").val($("#auto").val());
If you want display both select use this :
var one = $("#auto").val();
var two = $("select[name=marca]").val();
$("input[type=text]").val(one + " , " + two);
I thank you for your attention to my post .
Only in my case being dynamic text field appear in the select all values .
I wished that in the two text boxes in the second form comparissero only two values chosen in the two select .
you can use .val() for value and .text() for getting text.
var text_val = 'val : ' + $("select").val() + 'text : ' +$("select").text();
$("input[type=text]").val(text_val);
Related
I have a HTML modal containing a form with a select tag and an input text.
Select options are extracted from a database like this.
<select id="select_1" name="select_1">
<?php
A code that access to DB
$sql = $bdd->query('SELECT * FROM my_table;');
while(#$fetch = $sql->fetch(PDO::FETCH_ASSOC)){
$id = $fetch['id'];
$name= $fetch['name'];
?>
<option id="<?php echo $id ; ?>"><?php echo $name; ?></option>
<?php } ?>
</select>
<input type="text" id="input_1">
What I'm trying to do is when I choose an option from the select tag I want to output a field from a database relative to that select option in an input text.
For example let's pretend that my_table is defined this way and contains these:
| id | name | price |
+--------------+----------------+-----------------+
| 1 | A | 500 |
| 2 | B | 1000 |
My select tag will then contains the two options A & B:
<Option 1> A
<Option 2> B
When I select Option 1 (A) I want to output it's price in the input text so it will contain 500.
When I select Option 2 (B) 1000 will be output in the input text.
How Can I do that without submiting the form with POST and without closing the MODAL?
This is what I would do
<select id="select_1" name="select_1">
<?php
$sql = $bdd->query('SELECT * FROM my_table;');
while($fetch = $sql->fetch(PDO::FETCH_ASSOC)){ ?>
<option id="opt-<?php echo $fetch['id']; ?>" data-price="<?php echo $fetch['price']; ?>" ><?php echo $fetch['name']; ?></option>
<?php } ?>
</select>
<input type="text" id="input_1">
Then you can use (jQuery)
$('#select_1').on('change', function(){
$('#input_1').val($(this).find('option:selected').data('price'));
});
There is actually no need for AJAX, because the price comes from the same table. You can simply store it as a data attribute and then access it when the select changes.
But, remember it's an attribute of the option not the select. So you need to get the option that is selected. Which we can do with the sudo-selector :selected
$('#select_1').on('change', function(){
$('#input_1').val($(this).find('option:selected').data('price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_1" name="select_1">
<option id="opt-0" data-price="" >Pick an Option</option>
<option id="opt-1" data-price="500" >A</option>
<option id="opt-2" data-price="1000" >B</option>
</select>
<input type="text" id="input_1">
P.S. You are not really supposed to start an id with a number. So I added opt- to it.
Also you could just do this (use the value attribute):
<select id="select_1" name="select_1">
<?php
$sql = $bdd->query('SELECT * FROM my_table;');
while($fetch = $sql->fetch(PDO::FETCH_ASSOC)){ ?>
<option id="opt-<?php echo $fetch['id']; ?>" value="<?php echo $fetch['price']; ?>" ><?php echo $fetch['name']; ?></option>
<?php } ?>
</select>
I don't really see the need for the text input. Because when you submit this the value of select_1 in the Post or Get part of the submission will be the value of the select not the text of it.
But with out more about what you are doing, who can say.
You can do this using javascript or Jquery with and AJAX request.
Example using Jquery:
$(document).on('change','#select_1',function({
var value = $(this).value;
//DO your ajax request here and send the value inside the data
})
Because you have the values already loaded, passed into the select options values, using GlobalEventHandlers and an arrow function.
select_1.onchange = (()=> {
input_1.value = select_1.value
})
<select id="select_1">
<option value="1" selected> A </option>
<option value="2"> B </option>
</select>
<input type="text" id="input_1" value="1">
Good morning, I have a problem that is: I can not keep several options selected after submitting the form and I would like someone to help me.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>"><?php echo $reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>
this is my code to have the various options in the select box
You have to check if $_POST['utilizadores'] or $_GET['utilizadores'] it depends on your request type. I will use $_POST in here for explain my answer.
your select is multiple, you can use in_array function for checking that if result from db record is in array of $_POST['utilizadores']
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
**<option value="<?php echo $reg_sql['ID_USER']; ?>"
<?php
if(isset($_POST['utilizadores'])){
if(in_array($reg_sql['ID_USER'], $_POST['utilizadores'])){
echo 'selected';
}else{
echo '';
}
}
?>
>**<?php echo
$reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>
You may be able to do it more efficiently if your database result also contains which rows are selected, but when you loop through, just add the selected="selected" attribute to the <option> tag.
Assuming your $_POST array exists in this scope, you can use the in_array function in PHP to determine if the option has been selected (docs).
The ternary based operation is as follows:
in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : ''
Which says "if the ID_USER is in the post array, then print the selected attribute, otherwise, print a blank string"
Putting it all together:
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>" <?= in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : '' $?>>
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>
An example of how you can do this. Either add the "selected" string if yes or leave blank if no. You can also write selected="selected". You can do the same thing to set disabled or readonly.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<?php $selected = isset($reg_sql["mi_variable"]) ? "selected" : ""; ?>
<option value="<?php echo $reg_sql['ID_USER'];?>" <?php echo $selected; ?> >
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>
When I am select dropdown option then does'not assign the value of selected option in hidden field.
Please correct Where I am doing wrong. Thanks in advance.
<?php
include("../common/config.php");
$time = time();
$id=$_REQUEST['dr_id'];
$allEst = $db->select(array("*"),PREFIX."obligation_pharmacy","obligation_id IN ($id)");
}
?>
<script type="text/javascript">
function populate(unique,sel){
alert(sel.value);
$("#pharmacy_id"+unique).val(sel.value);
}
</script>
<select name="pharmacy_name[]" class="name" id="pharmacy_name<?php echo $time?>" style="width:180px; font-size:11px;" onchange="populate(<?php echo $time?>,this)">
<option value="">Select Pharmacy Name</option>
<?php
foreach($allEst as $ss)
{if($ss->pharmacy_name!=''){?>
<option value="<?php echo $ss->id;?>"><?php echo $ss->pharmacy_name; ?></option>
<?php }} ?>
</select>
<input type="hidden" name="pharmacy_id[]" id="pharmacy_id<?php echo $time?>" value="">
Using jQuery, usually something like this:
$('#my-select').change(function(){
var value = $(this).val();
$('#my-hidden-input').val(value);
});
$('#pharmacy_name').change(function(){
// get selected option value
var option_val = $( "#pharmacy_name option:selected" ).val();
// populate hidden field
$('#pharmacy_id').val(option_val);
}
i want to pass selected option value in id to codeigniter controller.
<p>
<select id="quantity" name="quantity" tabindex="2" onchange="calculate(this)" required autofocus>
<option value="">Choose Your Quantity</option>
<?php
if($prodqty)
{
foreach($prodqty as $qty)
{
for($i = $qty->quantity_from; $i <= $qty->quantity_to; $i++)
{
?>
<option value="<?=$i?>" id="<?=$qty->discount?>"><?=$i?></option>
<?php } } } ?>
</select>
</p>
i am already getter selected option value, now i want to get id value also i.e. id="discount?>"
function add_cart_prod()
{
if(isset($_POST['submit']))
{
this is controller where i want to get id value
Use ajax call on change event of the selection of the options:
Just Changed your code little :
<select id="quantity" name="quantity" tabindex="2" onchange="calculate(this)" required autofocus>
<option value="0">Choose Your Quantity</option>
<?php
if( !empty($prodqty)):
foreach($prodqty as $qty):
for($i = $qty->quantity_from; $i <= $qty->quantity_to; $i++): ?>
<option value="<?php echo $i?>" id="<?php echo $qty->discount?>"><?php echo $i?></option>
<?php endfor;
endforeach;
endif; ?>
</select>
Your javascript function :
<script type="text/javascript">
function calculate(id)
{
var id=id;
$.ajax({
type:'POST',
url:'your controller/add_cart_prod',
data:{'id':id},
success:function(data){
// the next thing you want to do
}
});
}
</script>
Your Controller Function:
function add_cart_prod()
{
$id=$this->input->post('id',true);
//send this value to your model
}
If you subitted the data via POST, which I suppose, because you test the POST-Array, you should get them this way:
$this->input->get_post('quantity');
But perhaps you used in your HTML the option GET for the form submission, then this should work:
$this->input->get('quantity');
If you want to get both values XSS-clean you should add a second paramenter, which is set to TRUE:
$this->input->get_post('quantity',TRUE);
As discussed below you should change the value of the option to:
<option value="<?=$i?>_<?=$qty->discount?>"><?=$i?></option>
And then explode the array by this char: "_" to get the two values:
$valuearray = explode ( "_" , $this->input->get_post('quantity'));
$valuearray[0] should contain your $i-part and $valuearray[1] the discount.
Important is, that the delimiter-char cannot be a value of either $i or $qty->discount. Otherwise choose a different char
You should try this, maybe it will work, Inside the calculate(this) function:
var discount = $("select[name='quantity'] option:selected").attr('id');
alert( discount );
$("#discount").val( discount ); //this will save the discount value in the hidden field
EDIT:
Put a hidden field in your form to contain the discount value
<input type="hidden" name="discount" id="discount">
Now, submit the form as usual. Hope it helps.
I have a problem with my javascript. First of all here is my code partitions:
<select class="inputTxt" style="width: 120px;" id="yearCombo" name="yearCombo">
<option value="0">2013</option>
<option value="1">2012</option>
<option value="2">2011</option>
</select>
function searchClicked() {
var operationField = document.getElementById("<%=FeedbackReportCtrl.PARAM_OPERATION%>");
operationField.value = "<%=FeedbackReportCtrl.OPERATION_SEARCH%>";
var yearFilter = document.getElementById("<%=FeedbackReportCtrl.PARAM_YEARFILTER%>");
yearFilter.value = document.getElementById("yearCombo").options[document.getElementById("yearCombo").selectedIndex].text;
var mainForm = document.getElementById("main");
mainForm.submit();
}
Here what goes wrong is the following;
For example, when I choose the year 2011 from the combo box and then hit the search button, it brings me the desired results;however, the selected index of the box returns back to 2013. How can I sustain my selection after search function?
The issue you have isn't a javascript one. When you submit a form you refresh the whole page, removing any client-side (user or javascript) adjustments to it.
It should be set by the php/java that is generating the page you post your form to, to set a selected="selected" or relevant, based on the value you just posted.
In php this would be
if($_POST['year'] == '2013') echo ' selected="selected"';
In java or jsp there are similar ways of doing this. Javascript itself could do the same probably.
Submitting the form refreshes the page (unless done via AJAX), thus returning to the default selected value, i.e the first one.
To overcome this you need to send along with the form the chosen year - assuming that you are self-submitting - and explicitly mark this year as the selected option.
In PHP Your code would then be something like:
<?php $year = $_POST['year']; ?>
<select class="inputTxt" style="width: 120px;" id="yearCombo" name="yearCombo">
<?php for ($i=2013;$i>2010;$i--): ?>
<option value="<?php echo $i; ?>" <?php if ($year==$i) echo "selected"; ?> >
<?php echo $i; ?>
</option>
<?php endfor; ?>
</select>