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 call HTML required attribute when the value is 0?

I have a drop down list where I'm populating data from the database.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<!-- <option value="" selected="selected">?</option> -->
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
</div>
My form,
How values are populated from the database,
My database table,
I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.
Or I would like to disable the option with the '?' mark.
How can I do achieve this?

I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<?php if(($this->session->userdata('Title') == 0)) { ?>
<option value="" selected disabled><?php echo $row->value; ?></option>
<?php } else{?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>

you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then
$('option#yourZeroOption').each(function() {
if ($(this).isChecked())
$("select").attr("required", true);
else
alert('this filled cannot be ?');
});
since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that

If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.
Example
$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');
Note: JS validation works, But keep mind it's not always.

You should mark your <select> field as required, then the first option as disabled (and selected):
<select required>
<option value="" selected disabled>?</option>
<option value="1">Mr.</option>
<option value="2">Miss</option>
<option value="3">Mrs.</option>
</select>
This will make the first entry work as a placeholder basically.

we cant make it require with 0 value it can be done only if value=""
here is my idea,
<form action="/action_page.php">
<select required>
<option value="0">?</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select option:selected").val("");
});
</script>
<style>

angularjs interferes with echoing php variable

I'm trying to pull a php variable ($purpose) and show it on the option select. The code that I have (see below) only works when I took out the element attribute ng-model="purpose". If I left the ng-model in-placed, the option select showed Purpose, which indicated php echoinng is did not go through. It seems echoing php variable and using angularjs conflicting with one another. Does anyone have this issue? Is there a workaround?
<select id="purpose" class="form-control custom-select" name="purpose" value="<?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> value="1050">Financing</option>
</select>

Don't use value attribute when using ng-model. Just initialize a variable purpose & assign PHP variable to it. Like below:
<select ng-init="purpose = <?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> ng-value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> ng-value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> ng-value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> ng-value="1050">Financing</option>
</select>

While you might be able to get it work using this style, it is recommended to use JSON to populate data from back-end to angular.
<?php
$purpose_arr = array(
"1030" => "1Exchange",
"1040" => "Non-exchange",
"1050" => "Financing"
);
echo "<script> var purpose='" + json_encode($purpose_arr) + "'; </script>"
?>
html:
<select id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required
ng-options="value as key for (key, value) in purpose" />
<option value="">Purpose</option>
</select>
controller:
$scope.purpose = purpose;

jQuery multiple click instances

I've made a custom select box that opens when a button is clicked which works fine. However, with multiple select boxes on the same page when one button is clicked all of the select boxes are opened up. Is there a way to do this without applying separate classes to each select box and multiple functions for each select box ?
Here's my HTML.
<div class="select-box-wrap">
<select class="select-box" name="mbpanel_layout_section_options[site_layout]">
<option value="1" <?php if(1 == $options['site_layout']) echo 'selected'; ?>>Left Sidebar</option>
<option value="2" <?php if(2 == $options['site_layout']) echo 'selected'; ?>>Right Sidebar</option>
<option value="3" <?php if(3 == $options['site_layout']) echo 'selected'; ?>>Three Column</option>
<option value="4" <?php if(4 == $options['site_layout']) echo 'selected'; ?>>Full Width</option>
</select>
<input type="button" class="select-click"/>
</div>
<div class="select-box-wrap">
<select class="select-box" name="mbpanel_layout_section_options[post_layout]">
<option value="1" <?php if(1 == $options['post_layout']) echo 'selected'; ?>>Left Thumbnail</option>
<option value="2" <?php if(2 == $options['post_layout']) echo 'selected'; ?>>Right Thumbnail</option>
<option value="3" <?php if(3 == $options['post_layout']) echo 'selected'; ?>>Top Thumbnail</option>
</select>
<input type="button" class="select-click"/>
</div>
and here's the jQuery.
(function($){
$(".select-click").click(function () {
var size = $('.select-box option').size();
if (size != $(".select-box").prop('size')) {
$(".select-box").prop('size', size);
$(".select-box").addClass("select-open");
} else {
$(".select-box").prop('size', 1);
$(".select-box").removeClass("select-open");
}
})
})( jQuery );
and here's a JSFiddle

You need to use DOM traversal to find the .select-box related to the clicked button instead of using the class selector which affects all instances of the element. Try this:
(function($) {
$(".select-click").click(function() {
var $selectBox = $(this).prev('.select-box');
var size = $selectBox.find('option').size();
var sizeDifference = size != $selectBox.prop('size');
$selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference);
})
})(jQuery);
Working example
Note that I also changed the logic slightly with the use of a ternary expression to make the code shorter.

How to get default selected value into javascript and pass it to php on page load?

Here I am trying to select Grade from dropdown list and display Value an output. That is working fine only manually selection of Grade after page loaded.
I want to get by default selected Grade value output when page get loaded first time. As in this form A Grade selected and its output should display.
I try to get this value by using onload="get_value()" function in html body tag which works for default selected Grade value, but it is continuously loading and loading, unable to select another option.
Also only selected Grade option should be display in drop down as it is showing only default selected option every time.
Please guide me suitable solution.
thanks
<?php
if(isset($_GET['grade']))
{
$rest_grade= $_GET['grade'];
echo $rest_grade;
}
else
{
$rest_grade="A";
echo $rest_grade;
}
?>
<html><head>
<script>
function get_value()
{
var get_grade = document.getElementById("grade_id").value;
var url ="?grade="+get_grade;
window.location = url;
}
</script>
</head>
<body>
<form action="" method="post">
<label>Grade</label>
<select name="grade" id="grade_id" onchange="get_value(this.value)">
<option id="1" value="A" selected>A Grade</option>
<option id="2" value="B" >B Grade</option>
<option id="3" value="C" >C Grade</option>
<option id="4" value="D" >D Grade</option>
</select>
</form>
</body>
</html>

This will be helpful to you.
Before using this coding you will need to fetch all the data by using select query.
After fetching the data you can use this code
<?php
$select_A = '';
$select_B = '';
$select_C = '';
$select_D = '';
if($rest_grade == 'A'):
$select_A = 'selected="selected"';
elseif($rest_grade == 'B'):
$select_B = 'selected="selected"';
elseif($rest_grade == 'C'):
$select_C = 'selected="selected"';
elseif($rest_grade == 'D'):
$select_D = 'selected="selected"';
endif;
?>
<form action="" method="post">
<label>Grade</label>
<select name="grade" id="grade_id" onchange="get_value(this.value)">
<option id="1" <?php echo $select_A; ?> value="A" selected>A Grade</option>
<option id="2" <?php echo $select_B; ?> value="B" >B Grade</option>
<option id="3" <?php echo $select_C; ?> value="C" >C Grade</option>
<option id="4" <?php echo $select_D; ?> value="D" >D Grade</option>
</select>
</form>

You can try this one:
<select name="grade" id="grade_id" onchange="get_value(this.value)">
<option id="1" <?php if($rest_grade == 'A') { echo 'selected="selected"';}?> value="A" selected>A Grade</option>
<option id="2" <?php if($rest_grade == 'B') { echo 'selected="selected"';}?> value="B" >B Grade</option>
<option id="3" <?php if($rest_grade == 'C') { echo 'selected="selected"';}?> value="C" >C Grade</option>
<option id="4" <?php if($rest_grade == 'D') { echo 'selected="selected"';}?> value="D" >D Grade</option>
</select>
You can also make it simpler like:
<select name="grade" id="grade_id" onchange="javascript:location.href='page.php?grade='+this.value">
<?php
$rest_grade = (isset($_GET['grade']) && $_GET['grade'] != NULL) ? $_GET['grade'] : 'A';
$id = 1;
foreach (range('A', 'D') as $char) {
$selected = ($char == $rest_grade) ? 'selected="selected"' : "";
echo '<option id="'.$id.'" value="'.$char.'" '.$selected.'>'.$char.' Grade</option>';
$id++;
}
?>
</select>