I'm trying to change the value in an input when a different option gets selected from a select:
View image here.
The idea is that for each ad package you can have a different number of images (free gets 0 images, $20 for 4 images etc.). With this number I then want to display the correct amount of upload fields for images.
I'm already retrieving the values from the database for the number of images for each package as you can see in the code below:
<select name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
I've tried getting the value from the select directly by doing:
mainform.ad_pack_id.options[selectedIndex].class.innerHTML
but this isn't getting the number of images.
How can I get the number of images for the selected ad package without submitting the form first?
you could also try jquery:
$("#ad_pack_id option:selected").val()
this should get you the value. to show/hide upload fields you can use for example the CSS display attribute:
$("#uploadfield_1").css("display", "none")
$("#uploadfield_1").css("display", "block")
try this:
document.mainform.ad_pack_id.options[Selected].className;
This code will set the input's value to the selected option's value.
I just added "id" attribute to select menu
<select id="ad_pack_id" name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
<script type="text/javascript">
var selectmenu = document.getElementById("ad_pack_id");
selectmenu.onchange = function()
{ //run some code when "onchange" event fires
var chosenoption = this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing")
{
document.getElementById("packimages").value = chosenoption.value ;
}
}
</script>
Related
I have been reviewing similar questions related to select2 data attributes, but couldn't find what I'm looking for. I have been taking time on this.
Basically I have a select2 dropdown inside a while loop which fetch values from sql database. I need to add an additional data attribute and when an option is selected, I need to display the selected data attributed in the input field. My code goes as below
<select class="select2-dropdown form-control" tabindex="-1" id="user" name="user">
<option value="">Select User</option>
<?php
$fetchuser = mysqli_query($link,"SELECT * FROM user ORDER BY name ASC") or die(mysql_error());
while($row=mysqli_fetch_assoc($fetchuser))
{
$id = $row["id"];
$name = $row["name"];
$status = $row["status"];
?>
<option value="<?php echo $id; ?>" data-status="<?php echo $status; ?>"><?php echo $name; ?></option>
<?php } ?>
</select>
<input id="status" />
My JS:
<script type=text/javascript>
$('#user').on('select2:selecting', function() {
var status=$(this).find(":selected").data("status");
$('#status').val(status);
});
</script>
I'm only getting random status (not corresponding to the selected), and some options status is not displayed when selection is changed.
Could anyone suggest where i have made the mistake.
Thank you in advance.
Your code is so weird for me.
Try this:
$('select').on('change', function() {
var status=$(this).find(":selected").data("status");
$('#status').val(status);
});
I think it will change function that you need to use
$('#user').on('change', function() {
var status= $(this).find(":selected").data("status");
$('#status').val(status);
});
When I select one of the year from drop-down list so, how to show the title that related to year into input fields of the form below.
$formationSQL = "SELECT title FROM formationacademique";
$result = $connection->query($formationSQL);
<form method="post">
<label>Select year:</label>
<select>
<?php foreach($result as $formation): ?>
<option id="formationID" name="formationID" value="<?= $formation['ID_Formation']; ?>"><?= $formation['year']; ?></option>
<?php endforeach; ?>
</select>
<label>title:</label>
<input type="text value="">
</form>
Here are some changes that are needed for your html formatting. Would need to know if you are wanting this change to happen with javascript or in php? If you don't know the difference, it is that php is server side that will only parse on page load and javascript can do it without a page refresh or reload.
$formationSQL = "SELECT title FROM formationacademique";
$result = $connection->query($formationSQL);
<form method="post">
<label for="formationID">Select year:</label>
<select id="formationID" name="formationID">
<?php foreach($result as $formation): ?>
<option value="<?php $formation['ID_Formation']; ?>"><?= $formation['year']; ?></option>
<?php endforeach; ?>
</select>
<label for="input_title">title:</label>
<input type="text" id="input_title" name="input_title" value="<?php $formation['ID_Formation']; ?>">
</form>
Add the following script contents to your js file or add the script after the form above for the javascript verse of changing the inputs value.
<script>
var year_select = document.getElementById( 'formationID' );
var year_title = document.getElementById( 'input_title' );
year_select.addEventListener( 'change', function( e ) {
year_title.value = year_select.selectedIndex.value;
});
</script>
I have texbox and dropdown list which is populated from mysql database.I want to change textbox value using dropdown list, without refreshing the page.
Here is my code and Thanks in Advance.
<select name="select" id="dropdownlist1">
<option id="0">-- Select the Company --</option>
<?php
require("dbcon.php");
$getallcompanies = mysql_query("SELECT * FROM ifcandetails6");
while($viewallcompanies = mysql_fetch_array($getallcompanies)){
?>
<option id="<?php echo $viewallcompanies['tcuid']; ?>"><?php echo $viewallcompanies['tcname'] ?></option>
<?php
}
?>
</select>
Here is my Input field code:
<input type="text" id="field1" value="<?php echo $viewallcompanies['tcname']?>" disabled/>
Use following
$(document).ready(function(){
$("#dropdownlist1").change(function(){
$("#field1").val($(this).val());
});
});
As you can do it on front side itself, you dont need to change in your PHP code. Add the following code on DOM ready.
I Have a select list, each option contains a category ($k[3]) in its id.
<select name="page_from_link" class="my_select_list" >
<OPTION VALUE="" >With:</OPTION>
<?php foreach($pages_created as $k) {
$i=0; ?>
<OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>
<?php } ?>
</select>
I have another select list with all options hidden depending on the precedent select category :
AS:
$v) { ?>
" >
my jquery script doesn't work, how would you have done that ?
$(document).ready(function(){
$(".my_select_list").change(function(){
var array = $(this).find('option:selected').attr('id').split('-');
var cat = array[1];
alert("cat");
$("#cat_"+cat).show();
$(".pages_created_option:not(#cat_"+cat).hide();
return false;
});
});
$(this > option).attr(... => $(this).find('option:selected').attr (...
alert("cat"); => alert(cat);
$("#cat_"+cat+")").show(); => $("#cat_"+cat).show();
you should consider using firebug or chrome internal development tools (on F12).
on a side note, you might like to use optgroup instead of a dummy option:
<select name="page_from_link" class="my_select_list" >
<OPTGROUP label="With:">
<?php foreach($pages_created as $k) {
$i=0; ?>
<OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>
<?php } ?>
</OPTGROUP>
</select>
you could use either a php script, or a js script with the data encoded, holding the innerHTML and that changes the innerHTML of the parent object (such as a div) depending on what you selected in the previous select box.
add this in the head for javascript
function showsel()
{if(document.getElementById('parentid').value=="id of the option that will triger the shild ")
{document.getElementById('shild id').style.display="inline";}
else {document.getElementById('shild id').style.display="none";}
}
Then add for the shild
div id="shild id" style="display:none"
and to the parent
div id="parent id" onchange"showsel()"
Having some trouble here with this.
The setup:
A select object with a choice of "Other"
User selects "Other".
Script runs when this specific value is chosen, and dynamically changes the class of input object from "hide" to "show" (hidden and visible with css display).
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<?php
$otherGrade = $_POST['grade'];
if($otherGrade = "otherGrade")
{
echo("<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID)
{
if(document.getElementById(objInputID).className=='hide')
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>");
}
else
{
echo ("");
}
?>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.
Any solutions would be greatly appreciated.
The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..
<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID, currentVal, correctVal)
{
if(correctVal == currentVal)
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Live example at : http://www.jsfiddle.net/MVymF/
why are you putting this in the post event? you can just render this as standard javascript as part of the page.
On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.
The select box is not keep selected after posting. You have to do that.
>Other
As the value of option change the display hide also gone.
Fix that
If no need to submit the page . use this
http://api.jquery.com/val/
check demo of select