Develop Reference

passing a html select value to a JS object

So I have a regular HTML form with some inputs and 1 select value that i am passing to a JS object..
I don't know how to grab the value of the selected option.
var dataObj = {
firstName: $("input[name='firstName']", _form).val(),
lastName: $("input[name='lastName']", _form).val(),
lastName2: $("input[name='lastName2']", _form).val(),
email: $("input[name='email']", _form).val(),
oldPassword: $("input[name='oldPassword']", _form).val(),
newPassword: $("input[name='newPassword']", _form).val(),
userType: $("select[name=usertype]", _form).val(),};
I am grabbing al the values of the inputs fine, but the value of the select menu comes undefine... any help for a noob?
<select class="uk-select" name="usertype" id="userType">
<option value="0" <?php if ($UserEdit ->userType == 0) {echo "selected";} ?> >Needs Auth</option>
<option value="1" <?php if ($UserEdit ->userType == 1) {echo "selected";} ?> >Super Admin</option>
<option value="2" <?php if ($UserEdit ->userType == 2) {echo "selected";} ?> >Supervisor</option>
<option value="3" <?php if ($UserEdit ->userType == 3) {echo "selected";} ?> >Operator</option>
<option value="4" <?php if ($UserEdit ->userType == 4) {echo "selected";} ?> >Hotel Admin</option>
<option value="5" <?php if ($UserEdit ->userType == 5) {echo "selected";} ?> >Guest</option>
<option value="6" <?php if ($UserEdit ->userType == 6) {echo "selected";} ?> >Visitor</option>
</select>

You're almost there. You wanna use the :selected psuedo selector:
userType: $("select[name='usertype'] option:selected").val()
// or it could be .text()
userType: $("select[name='usertype'] option:selected").text()
//without the attribute select - give it an id
userType: $("#userType option:selected").text()
Learn jQuery has a great page on exactly what you're doing:
Learn jQuery

I put an id# on the select tag and used this userType: $("#userType option:selected", _form).attr('value'), in my javascript to grab the value. It worked like a charm. The main issues is that I was trying to grab the value of select, which technically it doesn't have. So I needed to grab the attribute value of the selected option.

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>

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.

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/

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() {;}