JavaScript: Updating <select> list of days given month input - javascript

My raw HTML has three <select> inputs side-by-side like so:
<select id="smonth" name="smonth" onchange="updateSDaysInput()">
<option value="Month">Month</option>
<option value="1" <?php if ($smonth == '1') { echo 'selected'; } ?>>January</option>
<option value="2" <?php if ($smonth == '2') { echo 'selected'; } ?>>February</option>
<option value="3" <?php if ($smonth == '3') { echo 'selected'; } ?>>March</option>
<option value="4" <?php if ($smonth == '4') { echo 'selected'; } ?>>April</option>
<option value="5" <?php if ($smonth == '5') { echo 'selected'; } ?>>May</option>
<option value="6" <?php if ($smonth == '6') { echo 'selected'; } ?>>June</option>
<option value="7" <?php if ($smonth == '7') { echo 'selected'; } ?>>July</option>
<option value="8" <?php if ($smonth == '8') { echo 'selected'; } ?>>August</option>
<option value="9" <?php if ($smonth == '9') { echo 'selected'; } ?>>September</option>
<option value="10" <?php if ($smonth == '10') { echo 'selected'; } ?>>October</option>
<option value="11" <?php if ($smonth == '11') { echo 'selected'; } ?>>November</option>
<option value="12" <?php if ($smonth == '12') { echo 'selected'; } ?>>December</option>
</select>
<select id="sday" name="sday">
<option value="Day">Day</option>
</select>
<select id="syear" name="syear" onchange="updateSDaysInput()">
<option value="Year">Year</option>
<option value="1998" <?php if ($syear == '1998') { echo 'selected'; } ?>>1998</option>
<option value="1999" <?php if ($syear == '1999') { echo 'selected'; } ?>>1999</option>
<option value="2000" <?php if ($syear == '2000') { echo 'selected'; } ?>>2000</option>
<option value="2001" <?php if ($syear == '2001') { echo 'selected'; } ?>>2001</option>
<option value="2002" <?php if ($syear == '2002') { echo 'selected'; } ?>>2002</option>
<option value="2003" <?php if ($syear == '2003') { echo 'selected'; } ?>>2003</option>
<option value="2004" <?php if ($syear == '2004') { echo 'selected'; } ?>>2004</option>
<option value="2005" <?php if ($syear == '2005') { echo 'selected'; } ?>>2005</option>
<option value="2006" <?php if ($syear == '2006') { echo 'selected'; } ?>>2006</option>
<option value="2007" <?php if ($syear == '2007') { echo 'selected'; } ?>>2007</option>
<option value="2008" <?php if ($syear == '2008') { echo 'selected'; } ?>>2008</option>
<option value="2009" <?php if ($syear == '2009') { echo 'selected'; } ?>>2009</option>
<option value="2010" <?php if ($syear == '2010') { echo 'selected'; } ?>>2010</option>
<option value="2011" <?php if ($syear == '2011') { echo 'selected'; } ?>>2011</option>
<option value="2012" <?php if ($syear == '2012') { echo 'selected'; } ?>>2012</option>
<option value="2013" <?php if ($syear == '2013') { echo 'selected'; } ?>>2013</option>
<option value="2014" <?php if ($syear == '2014') { echo 'selected'; } ?>>2014</option>
<option value="2015" <?php if ($syear == '2015') { echo 'selected'; } ?>>2015</option>
</select>
This is the relevant JavaScript code:
syear = document.getElementById("syear");
smonth = document.getElementById("smonth");
sday = document.getElementById("sday");
function updateSDaysInput() {
"use strict";
var monthDays = findSMonthDays(smonth.value), newOption = document.createElement("option"), curLength = sday.length;
if (curLength > monthDays) {
for (i = curLength; i > monthDays; i = i - 1) {
sday.remove(i);
}
}
if (curLength < monthDays) {
for (i = curLength; i < monthDays; i = i + 1) {
newOption.text = i;
newOption.value = i.toString();
sday.add(newOption);
}
}
}
The code is supposed to add or remove options to sday as appropriate given the value of smonth. But instead it simply adds a single option to the bottom of sday. Does anyone know what might be the issue?

Move the newOption = document.createElement("option") inside for loop to create new element for every loop iterations like below
if (curLength < monthDays) {
for (i = curLength; i < monthDays; i = i + 1) {
newOption = document.createElement("option");
newOption.text = i;
newOption.value = i.toString();
sday.add(newOption);
}
}
Hope it helps.

Related

how can i put an add button where a user can add his choice in a select list in html

<label for="Course"> Course </label>
<select name="course" >
<option>select your course`</option>
<?php
$query="SELECT Course_Name FROM courses";
$result=mysqli_query($conn,$query);
if($result)
{
while($row=mysqli_fetch_array($result)) {
$Course_Name=$row["Course_Name"];
echo "<option value='".$Course_Name."'>".$Course_Name." </option>";
}
}
?>
</select>
<label for="Course"> Course </label>
<select name="course" onchange="if(this.value==-1){addop(this)}" >
<option>select your course</option>
<?php
$query="SELECT Course_Name FROM courses";
$result=mysqli_query($conn,$query);
if($result)
{
while($row=mysqli_fetch_array($result)) {
$Course_Name=$row["Course_Name"];
echo "<option value='".$Course_Name."'>".$Course_Name." </option>";
}
}
?>
<option value="-1">Add Another</option>
</select>
<script type="text/javascript">
function addop(r)
{
var c = window.prompt("Add Custom Course");
if(c!=null && c!= -1)
{
var str = '<option value="'+c+'">'+c+'</option>';
r.innerHTML += str;
r.value = c;
}
}
</script>

How to select a selectbox an option value with JS?

This may sound easy but I'm been having a heck of a time to get this to work. Somebody please help. My select box is like below. How do i select the value 3 from the list?
if(!empty($listeDoc))
{
$iGroups = 0;
while($iGroups < count($listeDoc))
{
?>
<tr>
<td>
<input type="checkbox" name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['product_id']" id="productSelectCreation_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" onchange="setValueToOne(this)" ><?php echo $listeDoc[$iGroups]->DOC_CLIENT_NOM; ?>
</td>
<td>
<select name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['quantity']" id="productQty_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" class="form-control1" value="<?php echo $qty; ?>" style="width:100%; height:25px; border : #62270c solid 1px;" tabindex="1">
<option value=""/></option>
<option value="1"<?php if ($qty == 1) echo 'selected="selected"'; ?>>1</option>
<option value="2"<?php if ($qty == 2) echo 'selected="selected"'; ?>>2</option>
<option value="3"<?php if ($qty == 3) echo 'selected="selected"'; ?>>3</option>
<option value="4"<?php if ($qty == 4) echo 'selected="selected"'; ?>>4</option>
<option value="5"<?php if ($qty == 5) echo 'selected="selected"'; ?>>5</option>
</select>
<td>
</tr>
<?php
$iGroups++;
}
}
here's is what i tried:
function setValueToOne(value)
{
checkbox = document.getElementById('productSelectCreation');
if (checkbox.checked == true)
{
document.getElementById("productQtyCreation").value = 1;
}
else
document.getElementById("productQtyCreation").value = '0';
}
If I understand correctly you want to change the select box selected option using vanilla javascript. You will need to loop the selectbox and compare values.
document.getElementById('productSelectCreation').onclick = function() {
var val;
var checkbox = document.getElementById('productSelectCreation');
var sel = document.getElementById('productQtyCreation');
if (checkbox.checked)
{
val = "3";
}
else
val = "0";
}
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}
It seems you are looking something like this.
function setValueToOne(chkbox)
{
if (chkbox.checked) {
alert("checked");
alert(chkbox.value);
document.getElementById("productQtyCreation").value = chkbox.value;
} else {
alert("Unchecked");
document.getElementById("productQtyCreation").value = 0
}
}
<select name="productSelect" id="productQtyCreation" class="form-control1">
<option value=""/></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />Test
function setValueToOne(checkbox) {
if(checkbox.checked) {
document.getElementById('productQtyCreation').value = 3
}else{
document.getElementById('productQtyCreation').value = 0
}
}
<select id="productQtyCreation">
<option disabled selected value=""></option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />

Multiple select not working while submiting please give me to select multiple option code

<form method='post' action=''>
<select name='select1' multiple="true">
<option value='1' <?php if(isset($_POST[ 'select1'])) { if($_POST[ 'select1']=='1' ) { echo 'selected'; } } ?>>imtiyaz</option>
<option value='2' <?php if(isset($_POST[ 'select1'])) { if($_POST[ 'select1']=='2' ) { echo 'selected'; } } ?>>narendra</option>
<option value='3' <?php if(isset($_POST[ 'select1'])) { if($_POST[ 'select1']=='3' ) { echo 'selected'; } }?>>shekar</option>
</select><br><br><br>
<select name='select2' multiple>
<option value='1' <?php if(isset($_POST[ 'select2'])) { if($_POST[ 'select2']=='1' ) { echo 'selected'; } } ?>>sumit</option>
<option value='2' <?php if(isset($_POST[ 'select2'])) { if($_POST[ 'select2']=='2' ) { echo 'selected'; } } ?>>arun</option>
<option value='3' <?php if(isset($_POST[ 'select2'])) { if($_POST[ 'select2']=='3' ) { echo 'selected'; } } ?>>vinay</option>
</select><br><br><br>
<select name='select3' multiple>
<option value='1' <?php if(isset($_POST[ 'select3'])) { if($_POST[ 'select3']=='1' ) { echo 'selected'; } } ?>>rohth</option>
<option value='2' <?php if(isset($_POST[ 'select3'])) { if($_POST[ 'select3']=='2' ) { echo 'selected'; } } ?>>pawan</option>
<option value='3' <?php if(isset($_POST[ 'select3'])) { if($_POST[ 'select3']=='3' ) { echo 'selected'; } } ?>>suresh</option>
</select>
<input type='submit' value='submit' name='submit'>
</form>
My mutiple select box is not working while submiting the form and also i want to display values in select box after refresh the page which i have selected
Try this:
<select name='select1[]' multiple= "true">
The name of the multi select drop down must be an array so that it can accept multiple selected value in it. You can use it by iterating the array using foreach() like:
foreach($_REQUEST['select1'] as $selection)
{
// your code
}

javascript month calculator not working

I have the following code. It is an automatic month generator. If i click submit, the value is getting stored as NOVEMBER in the database. But I want it to be saved as 11.Help me.
<?php
if(isset($_POST['Submit']))
{
$id=$_POST['id'];
$month=$_POST['month'];
$total=$_POST['total'];
$points=$_POST['points'];
$lotsize=$_POST['lotsize'];
$amount=$_POST['amount'];
$sql = 'INSERT INTO total(id,month,total,points,lotsize,amount) VALUES("'.$id.'","'.$month.'","'.$total.'","'.$points.'","'.$lotsize.'","'.$amount.'")';
$msg="<p style=\"color:#3366FF; font-size:13px;\"> Successfull!</p>";
if (!mysql_query($sql, $con))
{
die('Error: ' . mysql_error());
}
echo "<script type='text/javascript'>
alert('Details Submitted');
</script>";
}
?>
<select id="month" name="month"><option value=""><?php echo date('F') ?></option>
<option value="1">January</option><?php if($month == "january"){echo "checked";} ?>
<option value="2">February</option><?php if($month == "february"){echo "checked";} ?>
<option value="3">March</option><?php if($month == "march"){echo "checked";} ?>
<option value="4">April</option><?php if($month == "april"){echo "checked";} ?>
<option value="5">May</option><?php if($month == "may"){echo "checked";} ?>
<option value="6">June</option><?php if($month == "june"){echo "checked";} ?>
<option value="7">July</option><?php if($month == "july"){echo "checked";} ?>
<option value="8">August</option><?php if($month == "august"){echo "checked";} ?>
<option value="9">September</option><?php if($month == "september"){echo "checked";} ?>
<option value="10">October</option><?php if($month == "october"){echo "checked";} ?>
<option value="11">November</option><?php if($month == "November"){echo "checked";} ?>
<option value="12">December</option><?php if($month == "december"){echo "checked";} ?>
</select>
I think the issue is with your HTML code, you are using checked which should be used for check boxes and radio buttons, not drop down menus.
Also you are using if($month == "November") if you want $month to be stored as 11 wouldn't that be if($month == "11")?
So I believe your final code will look like:
<select id="month" name="month">
<option value=""><?php echo date('F') ?></option>
<option value="1" <?php if ($month == "1") echo 'selected' ?>>January</option>
<option value="2" <?php if ($month == "2") echo 'selected' ?>>February</option>
<option value="3" <?php if ($month == "3") echo 'selected' ?>>March</option>
<option value="4" <?php if ($month == "4") echo 'selected' ?>>April</option>
<option value="5" <?php if ($month == "5") echo 'selected' ?>>May</option>
<option value="6" <?php if ($month == "6") echo 'selected' ?>>June</option>
<option value="7" <?php if ($month == "7") echo 'selected' ?>>July</option>
<option value="8" <?php if ($month == "8") echo 'selected' ?>>August</option>
<option value="9" <?php if ($month == "9") echo 'selected' ?>>September</option>
<option value="10" <?php if ($month == "10") echo 'selected' ?>>October</option>
<option value="11" <?php if ($month == "11") echo 'selected' ?>>November</option>
<option value="12" <?php if ($month == "12") echo 'selected' ?>>December</option>
</select>

if today add class selected

I have som problems with javascript code and i have my solution in php but i need it in javascript, can anyone give me some tips how to translate it ?
<select>
<?php
$current_month = date("n");
?>
<option value='1' <?php if($current_month == 1) { echo "selected";} ?>>January</option>
<option value='2' <?php if($current_month == 2) { echo "selected";} ?>>February</option>
<option value='3' <?php if($current_month == 3) { echo "selected";} ?>>Mars</option>
<option value='4' <?php if($current_month == 4) { echo "selected";} ?>>April</option>
<option value='5' <?php if($current_month == 5) { echo "selected";} ?>>May</option>
<option value='6' <?php if($current_month == 6) { echo "selected";} ?>>June</option>
<option value='7' <?php if($current_month == 7) { echo "selected";} ?>>July</option>
<option value='8' <?php if($current_month == 8) { echo "selected";} ?>>August</option>
<option value='9' <?php if($current_month == 9) { echo "selected";} ?>>September</option>
<option value='10' <?php if($current_month == 10) { echo "selected";} ?>>October</option>
<option value='11' <?php if($current_month == 11) { echo "selected";} ?>>November</option>
<option value='12' <?php if($current_month == 12) { echo "selected";} ?>>December</option>
</select>
You can just set the value of the select element to change the selected option with Javascript. (Note that you'll have to give it an id for my example to work.)
var currentMonth = new Date().getMonth() + 1;
document.getElementById('months').value = currentMonth;
http://jsfiddle.net/R8gms/

Categories

Resources