Setting properties on option from select list using Javascript - javascript

I am attempting to add to an existing script that was created by another developer. The aim is to show an item from a dropdownlist in some instances and hide in others. I added a bit of code and I realised I have been told that what i am trying to select does not exist. Here is what I have running?
var menuNav = document.getElementById("Dir_Drop");
var MenuVal = menuNav.options[menuNav.selectedIndex].value;
menuNav.options["member"].show();
HTML:
<div id="dir-dropdown" >
<select id="Dir_Drop">
<option value="">-- Navigate Here --</option>
<?php if ($pageOrg->getShowTabsMembers() == "1"){ ?>
<option value="member" onchange="return ClearPrintQueue();">Members</option>
<?php } ?>
<?php if ($pageOrg->getShowTabsFamilies() == "1"){ ?>
<option value="family" onchange="return ClearPrintQueue();">Families</option>
<?php } ?>
<?php if ($pageOrg->getShowTabsGroups() == "1"){ ?>
<option value="group" onchange="return ClearPrintQueue();">Groups</option>
<?php } ?>
<?php if ($pageOrg->getShowTabsChurchStaff() == "1"){ ?>
<option value="staff" onchange="return ClearPrintQueue();">Church Staff</option>
<?php } ?>
</select>
The error I see in firefox is: "TypeError: menuNav.options.family is undefined"
I would greatly appreciate any input towards the solution of this problem.

The options takes an index -- not the current text. You will have to iterate and find the current text like so:
for (var i = 0; i < menuNav.options.length; i++) {
if (menuNav.options[i].text == "Members") {
//found the index with text "Members" -- do logic
}
}

Related

How to trigger onChange event dynamically using javascript and PHP

I need one help.i am fetching data from my DB ,i need when data has fetched one Javascript function will called through onChange event.Let me to explain my code.
<?php
$id=$_GET['ids'];
if($id!=""){
$getcustomerobj = $dbobj->getFeedbackData($db,$id);
}
?>
<div style="width:24%; float:left; padding:10px;">Answer Type :
<select class="form-control" id="answer_type" name="answer_type" onChange="selectScale(this.value);">
<option value="">Select Answer Type</option>
<?php
$ustatus=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->answer_type == $v['_id'] or $_REQUEST['answer_type'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['answertype']; ?></option>
<?php } ?>
</select>
</div>
<div style="width:24%; float:left; padding:10px; display:none;" id="scaleid">Scale :
<select class="form-control" id="nscale" name="noofscale">
<option value="">Select No Of Scale</option>
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_scale->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option>
<?php } ?>
</select>
</div>
<script>
function selectScale(id){
console.log('select scale',id);
var data=$.param({'op':'getscale','sid':id});
$.ajax({
method:'POST',
url:"dbcon/DBConnection.php",
data:data
}).done(function(msg){
//console.log('msg',msg);
var dedata=JSON.parse(msg);
//console.log('decode',dedata);
if(dedata[0]['data']==1){
document.getElementById("scaleid").style.display="block";
}
if(dedata[0]['data']==0){
document.getElementById("scaleid").style.display="none";
}
});
}
</script>
Here I need when data are fetching from DB the Answer Type drop down field will set with some value.As the second drop down list(i.e-Scale) is depends on first drop down, i need to call selectScale function which has triggered using onChange event.Please help me.
I think you can call onchange event for your first drop-down on document ready so based on this your second drop-down value will be selected.
$(document).ready(function(){
$("#answer_type").trigger("change");
});
may be this is helpful for you.
As what i have understood ,what you need is simply add this line to your java script
selectScale($('#answer_type').val());
Also this solution could work, by triggering change function using jQuery
$("#answer_type").trigger("change");

How to keep the dropdown menu selected value after form is submitted?

I am creating a very simple form with a dropdown menu and a text filed.
It shows the errors if the form has empty field during the submission.
I want to show the filled values after the form submission if there is any error.
It works on text field as I expected.
Ex: If fill the name and submit the form without filling the title dropdown menu, it showing the name I typed on the filed during the the error is appeared.
But how can I do that for dropdown menu also?
Ex: If I select the title drop down menu and submit the form without filling name field, it should show the selected title dropdown value during the the error is appeared.
how can I do that?
here is my code and it's a wordpress site:
<?PHP
$errors = array();
if($_POST["submit"]) {
$name_title = $_POST["name_title"];
$sender = $_POST["sendername"];
//Check the name title that it is selected or none.
if($name_title === none){
//if selected is none, add error to $errors array.
$errors['name_title'] = "Please select the title of your name!";
}
if(empty($sender)){
//Blank string, add error to $errors array.
$errors['sendername'] = "Please enter your name!";
}
// sending form
if(empty($errors)){
$mail_sent = wp_mail( $to, $subject, $mailBody, $headers );
}
}
if ($mail_sent) {
?>
<h1 style="color: #007f00;">Request sent.</h1>
<?php
} else {
?>
<form id="" name="" action="<?php echo get_permalink(); ?>" method="post">
<div class="label-input-wrapper">
<div class="form-label">Title</div>
<div class="form-input">
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="4">Ms</option>
</select>
<div class="error-msg">
<?php if(isset($errors['name_title'])) { echo '<span style="color: red">'.$errors['name_title'].'</span>'; } ?>
</div>
</div>
</div>
<div class="label-input-wrapper">
<div class="form-label">Name</div>
<div class="form-input">
<input type="text" name="sendername" value="<?PHP if(!empty($errors)) { echo $sender;} ?>" />
<div class="error-msg">
<?php if(isset($errors['sendername'])) { echo '<span style="color: red">'.$errors['sendername'].'</span>'; } ?>
</div>
</div>
</div>
<input type="submit" value="Submit" name="submit">
</form>
<?php
}
?>
although the answer by #CKocer can also work but I like to use variables instead and using $_POST in HTML and also more readable
In declare $name_title out side of if($_POST) and can do it like this <?php $name_title = ''; ?>
For Drop Down code change like this
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr" <?php if($name_title == 'Mr') { ?> selected <?php } ?>>Mr</option>
<option value="Mrs" <?php if($name_title == 'Mrs') { ?> selected <?php } ?>>Mrs</option>
<option value="Miss" <?php if($name_title == 'Miss') { ?> selected <?php }
?>>Miss</option>
<option value="4" <?php if($name_title == 'Ms') { ?>selected <?php } ?>>Ms</option>
</select>
Try this.
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr" <? if(#$_POST['name_title'] == 'Mr') { echo 'selected = \"selected\"'; } ?>>Mr</option>
<option value="Mrs" <? if(#$_POST['name_title'] == 'Mrs') { echo 'selected = \"selected\"'; } ?>>Mrs</option>
<option value="Miss" <? if(#$_POST['name_title'] == 'Miss') { echo 'selected = \"selected\"'; } ?>>Miss</option>
<option value="4" <? if(#$_POST['name_title'] == 'Ms') { echo 'selected = \"selected\"'; } ?>>Ms</option>
</select>
I'll borrow #ThinkingWeb's code and tidy it up a bit. One of the great features of HTML tags is that you can line-break them, which makes for much more readable code. Each if statement here gets its own line:
<select name="name_title" class="name-title-input">
<option value="none"
>Select Title</option>
<option value="Mr"
<?php if($name_title == 'Mr'): ?> selected="selected" <?php endif ?>
>Mr</option>
<option value="Mrs"
<?php if($name_title == 'Mrs'): ?> selected="selected" <?php endif ?>
>Mrs</option>
<option value="Miss"
<?php if($name_title == 'Miss'): ?> selected="selected" <?php endif ?>
>Miss</option>
<option value="4"
<?php if($name_title == 'Ms'): ?> selected="selected" <?php endif ?>
>Ms</option>
</select>
I've dropped the selected="selected" in the first option - this will select automatically if there is no explicit selection, and you don't want more than one! I've switched all the selections to use the attribute="value" format, though I don't think it's mandatory for HTML.
I've used the colon form of the if statement too - for HTML I find it preferable to the brace approach.

Selecting value of a dropdown select in html using javascript

I am using session variables to pass values from one page to another in php. I have passed a value from one page to another, now I want the passed value to be selected in dropdown menu.
Suppose dropdown select has 1,2,3,4,5 and when I pass 2 to the page containing dropdown, 2 should automatically get selected. How to do this?
Something like this will loop $x to 5 and check on each one if Session value is equal to it's value and then select it for you.
<select name="numbers" id="numbers" >
<?php for ($x=1; $x < 5; $x++): ?>
<option <?php if($_SESSION['value'] ==$x){echo "selected";} ?> value="<?php echo $x; ?>"><?php echo $x;></option>
<?php end for ?>
</select>
Roughly something like this should work, but for future reference please show more effort in your question i.e posting your code or some research attempts.
<label for ="Numbers"><span>Numbers</span>
<select name="numbers" id="numbers" >
<option value="" <?php if($_SESSION['value'] ==""){echo "selected";} ?>>Please Select</option>
<option value="1" <?php if($_SESSION['value'] =="1"){echo "selected";} ?>>1</option>
<option value="2" <?php if($_SESSION['value'] =="2"){echo "selected";} ?>>2</option>
</select>
</label>
<select>
<option <?php echo ($_SESSION['your-session'] == 1) ? "selected" : "" ?> value='1'>1</option>
<option <?php echo ($_SESSION['your-session'] == 2) ? "selected" : "" ?> value='2'>2</option>
<option <?php echo ($_SESSION['your-session'] == 3) ? "selected" : "" ?> value='3'>3</option>
</select>
printing "selected" on the option tag will solve your problem, you must check first if the value of the option is the value you stored in your session.

Remember select list option for onchange

Here is my code;
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="">Select Something</option>
<option value="<?php echo site_url(); ?>">Home</option>
<option value="<?php echo site_url(); ?>publications">Publications</option>
<option value="<?php echo site_url(); ?>contact_us">Contact Us</option>
</select>
When an option is selected, that page will immediately load. However, the drop-down list does not "remember" that that option was selected. The drop-down list will just default back to Select Something. How can I get the list to display what was selected instead?
Before I began using Frameworks I might have tried something like this;
<option value="<?php echo site_url(); ?>contact_us" <?php if($value == "contact_us") {echo "selected"; } ?> >Contact Us</option>
And I would have created a $value using $_REQUEST['value'] or something. But I am using the CodeIgniter framework so I don't think I can do that anymore.
This may help you:
<?php if($value == $_SERVER["REQUEST_URI"]) {echo "selected"; } ?>
I suggest from your code that you have some php $value-es equal to every option value. So, you can compare it with web page URI
More about $_SERVER global

Show div base on onchange from dropdown option, help

I try to show some information inside of <div> as following:
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
by choose from drop down option e.g.
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
and the full code as following,
<tr>
<td>Book Option</td>
<td>
<select name="books">
<?php foreach ($others as $other) { ?>
<?php if ($other == $other['other']) { ?>
<option value="<?php echo $other['other']; ?>" selected="selected"><?php echo $other['title']; ?></option>
<?php } else { ?>
<option value="<?php echo $other['other']; ?>"><?php echo $other['title']; ?></option>
<?php } ?>
<?php } ?>
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
</select></td>
</tr>
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
Is there some way to fix this?
<script type="text/javascript">
function showDiv()
{
// hide any showing
$(".details_div").each(function(){
$(this).css('display','none');
});
// our target
var target = "#details_" + $("#test_select").val();
// does it exist?
if( $(target).length > 0 )
{
// show it
$(target).css('display','block');
}
}
$(document).ready(function(){
// bind it
$("#test_select").change(function(){
showDiv();
});
// run it automagically
showDiv();
});
</script>
<style>
.details_div
{
display:none;
}
</style>
{/literal}
<select id="test_select">
<option value="">- Select - </option>
<option value="book" selected="selected">Books</option>
<option value="movie">Movie</option>
</select>
<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>
It looks like you're using jquery so I would first suggest to remove all javascript from the html / php and put it in a separate section or file.
You can then simply do stuff like:
$("#art_indicator").change(function() {
// do what you want to do
});
Also, the html for #show_details seems to be wrong:
style="'display:block;' : 'display:none;'"
is no valid style declaration.
I don't think <option> registers the onchange event. What you want instead is to use its parent <select onchange=''> to define the change event.
<script type='text/javascript'>
function selOnChange() {
if ($('#selectList').value == "art" {
$("#show_details").css('display', 'block');
} else {
$("#show_details").css('display', 'none');
}
}
Now you need to have a default "unselected" option. I have it here with value="-1"
When the select list changes, if its value is the value of #art_indicator, the div will be shown. otherwise, the div will not be shown.
<select id='selectList' name="books" onchange="selOnChange()">
<option value="-1">Select something</option>
<option id="#art_indicator" value="art">Art choice...</option>
<?php // list all your other options ?>
</select>

Categories