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/
Related
<select id="region_id" onChange="get_region_id()" class="form-control">
<option disabled selected>--Choose Region--</option>
<?php foreach($region as $row){?>
<option value="<?php $row['region_c'];?>">
<?php echo $row['region_m'];?>
</option>
<?php }?>
</select>
<?php ?> -----------------------
<script type="text/javascript">
function get_region_id() {
var select = document.getElementById('region_id');
var options = select.options[select.selectedIndex].value;
alert(options);
}
get_region_id();
</script>
Add the function to an onChange event, so it triggers every time a new value is selected:
var select = document.getElementById('region_id');
function get_region_id() {
var options = select.options[select.selectedIndex].value;
alert(options);
}
select.addEventListener('onChange',get_region_id)
<select id="region_id" onChange="get_region_id()" class="form-control">
<option disabled selected>--Choose Region--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
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 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 have the following <select> inside a <form> that is submitted with ajax. The select is submitting with a value of: Undefined. What is wrong?
<select class="form-control" name="site_theme" id="site_theme" value="<?php $result = mysqli_query($con,"SELECT * FROM settings"); while($row = mysqli_fetch_array($result)) { echo $row['site_theme']; }?>">
<?php
$result = mysqli_query($con,"SELECT * FROM themes");
while($row = mysqli_fetch_array($result))
{
echo "<option VALUE='".$row['theme_name']."'>".$row['theme_name']."</option>";
}
?>
</select>
The javascript copied here to ugly to post so I made a jsFiddle here: http://jsfiddle.net/yz5r4/
Also the above code results as:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
you problems was first a return before ajax call.
second wrong selector for select!
Here is a sample that shows you. http://jsfiddle.net/yz5r4/3/
your selector : $('input$("#site_theme")')
but it should be $("#site_theme") or $("select#site_theme")
HTML:
<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
<option value="Amelia">Amelia</option>
<option value="Cerulean">Cerulean</option>
<option value="Cosmo">Cosmo</option>
<option value="Cyborg">Cyborg</option>
<option value="Flatly">Flatly</option>
<option value="Journal">Journal</option>
<option value="Readable">Readable</option>
<option value="Simplex">Simplex</option>
<option value="Slate">Slate</option>
<option value="Spacelab">Spacelab</option>
<option value="United">United</option>
</select>
<input type="button" id="mclick" value="click" />
JS:
// General Form Submit
$(function () {
$('.error').hide();
$("#mclick").click(function () {
// validate and process form here
var theme = $("#site_theme").val();
alert(theme);
});
});