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>
Related
I have a view that that I have written in HTML and PHP that is like the following:
<select name="category" id="_category" class="_cateogry" onchange="submitTheForm() >
option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
Now, I want to get <?php echo $contents->name;?> when the onChange function is called.
I tried to resolve it unsuccessfully in JS, and here is the JS code that I attempted:
function submitTheForm () {
var selectElement = document.getElementById('_category');
var selected = selectedElem.options[selectedElem.selectedIndex];
console.log(selected.text);
}
I want to console.log the selected <?php echo $contents->name;?> when the onchange function is called.
There is a missing " after the javascript function and your code could be modified a little like this - to use event rather than rely upon names or ids
<select name="category" id="_category" class="_cateogry" onchange="submitTheForm(event)" >
<option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
function submitTheForm( event ) {
var value=event.target.value;
var text=event.target.options[event.target.options.selectedIndex].text;
console.log('%s -> %s',value,text);
}
<select name="category" id="_category" class="_cateogry" onChange="submitTheForm(this);" >
<option value="">Please select</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<script>
function submitTheForm(sel)
{
console.log(sel.options[sel.selectedIndex].text);
}
</script>
You can do as per below
// select box code whch one you have alredy
<select name="category" id="_category" class="_cateogry" onChange="submitTheForm(this);" >
<option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
//Javascript code to get selected options text value
<script>
function submitTheForm(sel)
{
console.log(sel.options[sel.selectedIndex].text);
}
</script>
Use the function addEventListener to bind the event change.
This is an alternative.
You can get the value and text using the context this.
document.getElementById('_category').addEventListener('change', function() {
console.log(this.value);
console.log(this.options[this.selectedIndex].text);
});
<select name="category" id="_category" class="_cateogry">
<option value="">Please select</option>
<option value="1595">Ele</option>
</select>
You can use jquery easily rather than javascript:
function submitTheForm () {
var optionName = jQuery('#_category option:selected').text();
alert(optionName);
}
i have 4 selectbox ,first one is vehicle selectbox and other three are sub of that vehicle select box ,if i select vehicle select box and click button i want to show a error message ,because one of the sub select is also i want to selected .... any one help ..i am just beginner in jquery/javascript
in simplest words :p ..check one of the sub select box(cars , caravans,buses select box) is selected if i selected main vehicle selectbox...
my code :
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['vehicle'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-vehicle-list" <?php if($_POST['reservation']['vehicle'] == 0) { echo 'style="display: none;"'; } ?> >
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['cars'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['caravans'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<?php for($i=1;$i<5;$i++) { ?>
<option <?php if($_POST['reservation']['buses'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?> </option>
<?php } ?>
</select>
</div>
Take a look at this SO question: How to check if an option is selected?
Using what is suggested in that link, add an alert with whatever message you want if no option has been selected.
There are new lines of code but have certain changes for better understanding for you and test.
HTML code
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-vehicle-list">
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
jQuery Code
$(function(){
$('.members-wrap-vehicle select').change(function(){
var cars = $('.members-wrap-adult select option:selected').val();
var caravans = $('.members-wrap-child select option:selected').val();
var buses = $('.members-wrap-infant select option:selected').val();
if ( cars == 0 || caravans == 0 || buses == 0 ){
alert('please select any of cars or caravans or buses');
}
});
});
Hope this works for you. THank YOu
This should work but there are some caveats. You have to change your <select> element names to ids (id = 'xxx'). Also, this function assumes that the number of vehicles in the sub menus totals the number in the vehicles menu. Please let me know if you need anything further! Cheers
$('#BUTTON_ID').on('click', function() {
var vehicle = $('#reservation[vehicle]').val();
var cars = $('#reservation[cars]').val();
var caravans = $('#reservation[caravans]').val();
var buses = $('#reservation[buses]').val();
if (vehicle == (cars + caravans + buses)) {
//do something
} else {
//error message
alert('Error has occurred.');
};
});
I have a HTML structure like following:
<?php foreach($active_brand as $brand) { ?>
<select name="selector" id="selector">
<?php foreach($options as $option) { ?>
<option <?php if($brand['State'] == $option) { ?>selected="selected"<?php } ?> value="<?=$brand['id']?>"><?php echo $option; ?></option>
<?php } ?>
</select>
<?php } ?>
This basically gives me lets say 10 select lists... Now I need to fetch the each value from the selected item in select list...
I have tried the following:
$('#selector').text();
$('#selector').change(function() {
alert($(this).val());
});
But whenever I select anything from any of the select lists, nothing happens... Can someone help me out ?
Add class to select list;
<?php foreach($active_brand as $brand) { ?>
<select class="my-select" name="selector" id="selector">
<?php foreach($options as $option) { ?>
<option <?php if($brand['State'] == $option) { ?>selected="selected"<?php } ?> value="<?=$brand['id']?>"><?php echo $option; ?></option>
<?php } ?>
</select>
<?php } ?>
Create change event from class name:
$('.my-select').change(function() {
alert($(this).val());
alert($(this).find("option:selected").text()); // to get text of selected option
});
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.
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
}
}