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.');
};
});
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 two dropdown. I am using Jquery to load second dropdown. without jqyery My php code is working fine. but when I use with jquery second dropdown becomes empty on selection of first drop down.
First Dropdown ( Education )
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
Second Drop Down ( Degree)
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>
</select>
Second dropdown is using juery to load on selection of first dropdown Education.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#education').on('change',function(){
var educationID = $(this).val();
if(educationID){
$.ajax({
type:'POST',
url:'education-career.php',
data:'education_id='+educationID,
success:function(html){
$('#degree').html(html);
}
});
}else{
$('#degree').html('<option value="">Select Education first</option>');
}
});});</script>
Try change below line
data:'education_id='+educationID,
to
data:{education_id : educationID},
Try this.(second select tag have to place in first page in order to use $('#degree').html(...))
First Dropdown
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
</select>
Second Dropdown
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>
Here in ajax, you are using the
data:'education_id='+educationID,
Which is used to post the data. and the variable name will be here education_id.
And in your second page you are trying to get:
isset($_POST["education"])
this only. So on second page you have to replace education with education_id.
change:
$('#education').on('change',function(){
To:
$('select#education').change(function(){
Need experts opinion on below mentioned code, i am not good with javascript. please help
what i need is,i have 2 drop downs. one is catid1 and 2nd is catid ...
catid loads some values from databases, and catid1 have some manual entries, few of them are same and few are different. but i want is when i will select catid1 value from list like "abc" then catid value should be changed to same as catid1 "abc"
i have tried some different ways but can't resolve this, any one please suggest either this could be possible or not.
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId1" id="catId1" onChange="qt();">
<option> Select Base Query Type </option>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId" id="catId">
<?php
$tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1 ";
$rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
?>
<option value="..."><?php echo $selectOption; ?></option>
<?php while ($tcatrow = mysqli_fetch_assoc($rest)) { ?>
<option value="<?php echo $tcatrow['catId']; ?>"><?php echo clean($tcatrow['catName']); ?></option>
<?php } ?>
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>
sample code which i have tried is as below as well but it's not working in my case.
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
You forgot your script tags in the second example:
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<script language="javascript">
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
</script>
jsfiddle: https://jsfiddle.net/ge127u8d/
Yes you can do it by javascript or Jquery. Its easier in Jquery like
function qt() {
var catId1Val = $('#catId1 :selected').val();
$("#catId> option").each(function() {
if (this.value == catId1Val)
$("#catId select").val(this.value);
});
}
Check out the following jQuery method:
http://api.jquery.com/val/
http://api.jquery.com/each/
http://jsfiddle.net/Rx3AP/
I have problems with this particular form, i need first to select a value and then to submit the form. Submit form works good, however the default selection value in all browsers is selected and it is Acceptable, except in IE where no default selection value is selected. In IE there is nothing selected by default.
How do I fix this?
Picture of the problem :
:
<select name="formQuality" id="formQuality" value="acceptable">
<option value="acceptable">Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
<?php
if(isset($_POST['SubmitButton'])){ //check if form was submitted
$input = $_POST['inputText']; //get input text
$varQuality = $_POST['formQuality'];
$message = "Success! You entered: ".$input;
}
?>
<br>
<form action="" method="post">
<h1>Choose Quality:</h1>
<?php
$thequa = htmlspecialchars($_POST['formQuality']);
?>
<select name="formQuality" id="formQuality" value="<?php echo $thequa;?>">
<option <?php if ($thequa1 == 'acceptable') { ?>selected="true" <?php }; ?> value="acceptable">Acceptable</option>
<option selected="true" value="acceptable">Acceptable</option>
<option <?php if ($_POST['formQuality'] == 'good') { ?>selected="true" <?php }; ?> value="good">Good</option>
<option <?php if ($_POST['formQuality'] == 'better') { ?>selected="true" <?php }; ?> value="better">Better</option>
<option <?php if ($_POST['formQuality'] == 'excelent') { ?>selected="true" <?php }; ?> value="excellent">Excellent</option>
<option <?php if ($_POST['formQuality'] == 'best') { ?>selected="true" <?php }; ?> value="best">Best</option>
</select>
<textarea name="inputText" cols="100" rows="20" style="border:solid 1px orange;"><?php echo $thetext;?></textarea>
<p>
<input type="submit" value="Rewrite" name="SubmitButton"/>
</form>
The intended way to preselect an option is setting the selected attribute on the option element, rather than adding a value attribute to the select field.
<select name="formQuality" id="formQuality">
<option value="acceptable" selected>Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
This produces the expected result in all browsers, including IE.
Use selected="selected"
Like,
<option value="My Default" selected="selected">
to make an option as default selected value. This works in all browsers.
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.