if today add class selected - javascript

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/

Related

How to change a second select list based on the first select list option when values are dynamic?

I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects
<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<?php if(count($vehicleType) > 0 ){
foreach($vehicleType as $vt){ ?>
<option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
<?php }
} ?>
</select>
</div>
<div class="fields">
<p>Total No. of Passengers*</p>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<option <?php if(#$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
<option <?php if(#$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
<option <?php if(#$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
<option <?php if(#$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
<option <?php if(#$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
<option <?php if(#$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
<option <?php if(#$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
<option <?php if(#$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>
</select>
</div>
How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..
I would probably do something along these lines:
<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
$number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}
$passengers = 0;
if(!empty($_REQUEST['passengers'])){
$passengers = (int) $_REQUEST['passengers'];
}
?>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<option value="RV/Motorhome">RV/Motorhome</option>
<option value="Campervans">Campervans</option>
</select>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<?php
for($i = 1; $i <= $number_of_passengers; $i++) {
?>
<option
<?php
if($i == $passengers) {
echo ' selected ';
}
?>
>
<?php echo $i ?>
</option>
<?php
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#car_type').change(function() {
$("#passengers").children().removeAttr("selected");
if ($(this).val() === 'Campervans') {
$('#passengers option:nth-child(n+7)').hide();
} else {
$('#passengers option').show();
}
});
</script>
There are cleaner ways of doing this but this should serve to get the point across.
Few things to note about the PHP:
See how I check if the $_REQUEST key is available using empty - this avoids having to use # which is generally not a good idea.
I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)
Hope this helps!
yes you need to add javascript code for that.
insert below code in your page and check if this is what you want?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.car').on('change', function(){
if($(this).val() === 'RV/Motorhome'){
$('.half').find('option').show()
}else if($(this).val() === 'Campervans'){
$('.half').find('option').slice(6).hide();
}
})
</script>

Confirmation page

I have 10 dropdown menus that are like:
Please Select
Item 1
Item 2
Item 3
---Appetizers---
Item 4
Item 5
---Main Courses---
Item 6
Item 7
---Lunch Specials---
Item 8
I want to grab the value if an Item is selected and print it on a confirmation page. Can I do that with a for loop and javascript? Like if I do this, how would I call it in HTML?
function getItems() {
var items = [
document.getElementById("item1").value,
document.getElementById("item2").value,
document.getElementById("item3").value,
document.getElementById("item4").value,
document.getElementById("item5").value,
document.getElementById("item6").value,
document.getElementById("item7").value,
document.getElementById("item8").value,
document.getElementById("item9").value,
document.getElementById("item10").value
];
for (int i = 0; i < items.length; i++) {
var count = 0;
if (
(item[i] != "Please Select") ||
(item[i] != "---Appetizers---") ||
(item[i] != "---Main Courses---") ||
(item[i] != "---Lunch Specials---")
) {
document.getElementById(i).innerHTML = item[i];
count++;
}
}
}
The dropdowns are populated from a MySQL database using php. My HTML/php:
Item 4
<select id="item4">
<option value"">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value"">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value"">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value"">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
</select>
<br>
You seem to generate a single drop down with all options. If that is intended, then make it one in which multiple selections can be made, which is not the default behaviour. For that to happen, add the multiple attribute to the select.
Then you need to add a listener to the change event, so that your code executes whenever the user selects or unselects item(s).
Note that you have forgotten some = after the value attributes. Also, it is not allowed to put a <br> tag after an option element. A select element should only have option children elements.
Here is how the corrected PHP could look:
Item 4
<select id="item4" multiple size="8">
<option value="">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value="">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value="">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value="">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
</select>
The JavaScript could be much simpler, as in this working snippet:
// Listen to the selection changes made:
document.querySelector('#item4').addEventListener('change', function () {
// For this demo, the text is stored in a DIV
document.getElementById('output').textContent =
[...this.selectedOptions] // convert selected options list to array
.filter ( option => option.value.length ) // option must have a value
.map( option => option.textContent ) // get text of option
.join('\n'); // add line breaks
});
Item 4 (hold Ctrl key to add selections)<br>
<select id="item4" multiple size=8>
<option value="">Please Select</option>
<option value="">---Appetizers---</option>
<option value="1">drink 1 - $1</option>
<option value="1.10">drink 2 - $1.10</option>
<option value="">---Main Courses---</option>
<option value="15">dish 1 - $15</option>
<option value="16">dish 2 - $16</option>
<option value="">---Lunch Secials---</option>
<option value="10">lunch 1 - $10</option>
<option value="11">lunch 2 - $11</option>
</select>
<div id="output" style="white-space:pre"></div>

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

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.

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>

using javascript code inside a PHP while loop for multiple text fields

I am selecting data from a database using PHP with some javascript inside the loop:
<script type="text/javascript">
$('#voip_type<?php echo $i; ?>').on('change',function(){
var val = $(this).val();
if( val ==="no"){
$("#producttype<?php echo $i; ?>").show()
}
else if( val ==="extension")
{
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
else {
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
});
</script>
each time it loops round, it adds +1 onto $i
this does the same in the textfield IDs so the code in the JS and the text field IDs match names but the values aren't changing on the textfields and select elements
here is one example of a select element:
<select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
<option value="">VoIP Item?</option>
<optgroup label="No">
<option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
</optgroup>
<optgroup label="Yes">
<option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
<option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
<option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
<option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
</select>
UPDATE - Full code:
<?php
$sql="SELECT * FROM customer_billing where customer_seq = '".$_GET["seq"]."' ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
$i=0;
while($result=mysql_fetch_array($rs)) {
$i++; ?>
<script type="text/javascript">
$('#voip_type<?php echo $i; ?>').on('change',function(){
var val = $(this).val();
if( val ==="no"){
$("#producttype<?php echo $i; ?>").show()
}
else if( val ==="extension")
{
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
else {
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
});
</script>
<input type="hidden" name="sequence<?php echo $i; ?>" size="30" value="<?php echo $result["sequence"]; ?>" />
<select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
<option value="">VoIP Item?</option>
<optgroup label="No">
<option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
</optgroup>
<optgroup label="Yes">
<option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
<option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
<option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
<option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
</select><br />
<select name="producttype<?php echo $i; ?>" id="producttype<?php echo $i; ?>" style="width:120px;">
<option value="">none</option>
<option value="Broadband">Broadband</option><option value="Hosted Exchange">Hosted Exchange</option><option value="Offsite Backup">Offsite Backup</option><option value="PC Maintenance">PC Maintenance</option><option value="Phone Lines (PSTN/ISDN)" selected="selected" >Phone Lines (PSTN/ISDN)</option><option value="Software Development">Software Development</option><option value="VoIP Telephony">VoIP Telephony</option><option value="Web Hosting">Web Hosting</option> </select>
<input type="text" name="productname<?php echo $i; ?>" size="30" value="<?php echo $result["productname"]; ?>" />
<?php
}
?>
Your code is super hard to debug. My suggestion is that you turn your code into 2 separated piece of code one for PHP and one for Javascript. You can mix 2 languages but it doesn't mean that you should mix them. Instead do this
<script type="text/javascript">
var result = <?= json_encode($the_final_query_result) ?>;
</script>
The idea is to turn all your PHP variables that will be used in JS into JS variables. Then in you JS code you can just use normal JS functions to loop through the variables instead of mixing PHP loops and JS code (and HTML code) which makes your code "impossibru" to debug
Another thing is that mysql_fetch_array is deprecated as of PHP 5.5 (http://fi1.php.net/mysql_fetch_array), you should consider switching to something else
if you want to php code inside javascript or jquery then you should do like this..
funciton() {;}

Categories

Resources