how to show/hide div based on selected option's id? - javascript

I have this vehicles invoice form with 5 rows. each row can be a different vehicle but if a car is selected, it shows you a second select list to chose its color.
here is my javascript:
<script>
$(document).ready(function() {
$("#select1").change(function(event) {
var id = $(event.target).id();
$("#" + id).show();
});
});
</script>
here is my form:
<form name="invoice" action="invoice.php">
<table border="1">
<tr>
<td>SN</td>
<td>Vahicle Type</td>
<td>Quantity</td>
</tr>
<?php $sn = 1 ;
while ($sn < 5){ ?>
<tr>
<td>
<?php echo $sn ?>
</td>
<td>
<select name="vehicles[]" id="select1">
<option id="0" value="0">Select Vehicle</option>
<option id="<?php echo $sn ?>" value="toyota" name="toyota">Toyota</option>
<option id="<?php echo $sn ?>" value="nissan" name="nissan">Nissan</option>
<option id="<?php echo $sn ?>" value="BMW" name="bmw">BMW</option>
<option id="0" value="plane" name="plane">Plane</option>
<option id="0" value="boat" name="boat">Boat</option>
<option id="0" value="bike" name="bike">Bike</option>
</select>
<div id="<?php echo $sn ?>" class="toggleable" style="display:none;">
<select name="color[]" id="select2">
<option id="<?php echo $sn ?>" value="red" name="red">Red</option>
<option id="<?php echo $sn ?>" value="black" name="black">Black</option>
<option id="<?php echo $sn ?>" value="white" name="white">White</option>
</select>
</div>
</td>
<td>
<input type="number" name="quantity[]">
</td>
</tr>
<?php $sn=$sn+1; } ?>
</table>
</form>
im not so good with javascript. i wrote this code by learning from online examples but its not working.

As tomas_b said, you should be using a data-* attribute for this. Element IDs must be unique within the document, if you duplicate them then getElementById will only return the first one (mostly).
If the listener is on the select element, then it will be this within the function, its properties can be accessed directly. There is also rarely any need to add an ID to a form control that already has a name, and select elements should always have one option with the selected attribute so that you know one will be selected by default.
So you might do something like:
window.onload = function() {
document.getElementById('select1').onchange = handleVehicleChange;
}
function handleVehicleChange() {
var opt = this.options(this.selectedIndex);
document.getElementById('carTypes').style.display = opt.getAttribute('data-type') == 'car'? '' : 'none';
}
<select name="vehicles[]" id="select1">
<option id="0" value="0" selected>Select Vehicle</option>
<option data-type="car" value="toyota">Toyota</option>
<option data-type="car" value="nissan">Nissan</option>
<option data-type="car" value="BMW">BMW</option>
<option data-type="aeroplane" value="plane">Plane</option>
<option data-type="boat" value="boat">Boat</option>
<option data-type="bike" value="bike">Bike</option>
</select>
<div id="carTypes" class="toggleable" style="display:none;">
<select name="color[]" id="select2">
<option value="red">Red</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
</div>

To obtain the value of the selected option "id" attribute using jQuery, you can use the following jQuery snippet
var id = $("#select1 > option:selected").attr('data-id');
See it in action: http://plnkr.co/edit/bWj0MzLey0n4dkI03bs1?p=preview
The query here simply gets you the selected option using the ":selected" selector (https://api.jquery.com/category/selectors/).
However as seen in the example, you should use a different attribute name for the option tags, e.g. "data-id", as "id" has its purpose.

Related

How to deselect selected select box in variable using jquery

I have a scenario where i want to deselect all the selected select boxes inside the variable in jquery. Below is my html and jquery code.
I just wanted that when i clicked on a button and get all the html in a variable and then want to deselect all the selected select box and bind it into the variable again in jquery. Below is my code. Please help me anyone.
Thanks in advance.
var html = "<tr>" + '<input type = "hidden" name = "translator_approved_for_id[]" value="-1">' + $("#add_more_service").html() + '</tr>';
$(html).find("option:selected").removeAttr('selected', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<tr><input type="hidden" name="translator_approved_for_id[]" value="-1">
<td>
<select id="translator_service1" name="translator_service[]" class="form-control">
<option value="select">--select--</option>
<option value="Annotation">Annotation</option>
<option value="Assessment" selected="selected">Assessment</option>
<option value="Coding">Coding</option>
<option value="Corporate Training">Corporate Training</option>
</select>
</td>
<td>
<select id="translator_source_language1" name="translator_source_language[]" class="form-control">
<option value="select">--select--</option>
<option value="Abkhazian">Abkhazian</option>
<option value="Achinese">Achinese</option>
<option value="Acoli" selected="selected">Acoli</option>
<option value="Adangme">Adangme</option>
<option value="Afar">Afar</option>
</select>
</td>
<td>
<select id="translator_target_language1" name="translator_target_language[]" class="form-control">
<option value="select">--select--</option>
<option value="Abkhazian">Abkhazian</option>
<option value="Achinese">Achinese</option>
<option value="Acoli">Acoli</option>
<option value="Adangme">Adangme</option>
<option value="Afar" selected="selected">Afar</option>
<option value="Afrikaans">Afrikaans</option>
<option value="Akan">Akan</option>
</select>
</td>
<td>
<select id="translator_industry" name="translator_industry[]" class="form-control">
<option value="">select</option>
<option value="Agriculture">Agriculture</option>
<option value="Automobiles">Automobiles</option>
<option value="Aviation" selected="selected">Aviation</option>
<option value="Banking">Banking</option>
</select>
</td>
<td>
<input type="button" value="Add" onclick="show_approved_clients('14','ODk3NQ==')">
</td>
<td><input type="button" value="Remove" onclick="$(this).parent().parent().remove();"></td>
</tr>
You need to update the html variable after removing attribute, for this .end() to end the most recent filtering operation and return the set of matched elements i.e. $(html) then use .prop() to get outerHTML property.
html = $(html)
.find("option:selected")
.removeAttr('selected') //Removes selected attribute
.end() //End the most recent filtering operation i.e. target back
.prop('outerHTML'); //Get outerHTML of element

When adding name in input field of form and click on submit ajax reloads form

I am opening a form in magento admin popup when i add name to form fields and click on save. form reloads and ajax post get failed without any error.
This is my html code
<form enctype="multipart/form-data">
<table cellspacing="0" id="" class="form-list">
<tbody><tr>
<td class="label"><label for="authnetcim_cc_type">Credit Card Type <span class="required">*</span></label></td>
<td class="value">
<select id="<?php echo $_code ?>_cc_type" class="<?php echo $require.$_code; ?>_require" name="karan">
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="AE">American Express</option>
<option value="DI">Discover</option>
<option value="JCB">JCB</option>
<option value="MC">Mastercard</option>
<option value="VI">Visa</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="authnetcim_cc_number">Credit Card Number <span class="required">*</span></label></td>
<td class="value">
<input type="text" id="<?php echo $_code ?>_cc_number" title="<?php echo $this->__('Credit Card Number') ?>" class="input-text <?php echo $require.$_code; ?>_require validate-cc-number" autocomplete="off" value="" />
</td>
</tr>
<tr>
<td class="label"><label for="authnetcim_expiration">Expiration Date <span class="required">*</span></label></td>
<td class="value">
<select id="<?php echo $_code ?>_expiration" class="month <?php echo $require.$_code; ?>_require">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="<?php echo $_code ?>_expiration_yr" class="year <?php echo $require.$_code; ?>_require">
<option value="">Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class="buttons-set">
<button class="button submit-addccbtn" id="addccbtn" title="Submit"><span><span>Submit</span></span></button>
</div>
</form>
This is my js code..
<script type="text/javascript">
//<![CDATA[
var id = '<?php echo $recordId ?>';
var url = '<?php echo $saveUrl ?>';
function closePopup() {
Windows.close('browser_window');
}
document.getElementById("addccbtn").onclick = function() {saveccard()};
function saveccard() {
var dataString ='id='+id;
new Ajax.Request(url, {
method: 'POST',
parameters: dataString,
onSuccess: function(response) {
var json = response.responseText.evalJSON(true);
if(json.success){
window.parent.closePopup();
}
},
onFailure: function(response) {
//location.reload();
}
});
}
//]]>
</script>
and this is my ajax request failure image.
and if i remove name from the field ajax request working fine.
Please help
i tried it with jquery and its working but i want to implement it with plain js
add attribute to your addccbtn button type="button" . Because if you do not specify type attribute , default it will act like submit button.
And other way to prevent form submit and reloading of page is to use event.preventDefault function.
document.getElementById("addccbtn").addEventListener("click", function(event){
event.preventDefault();
// your savecard() code here
})

How to sum with javascript if data form while()?

I have this code
<script>
function select(val, item)
{
var prize = $(".prize"+item).val();
var prize = prize*val;
$(".dollar"+item).html(prize);
//----- THIS CODE ERROR --------//
$sub_total=$(".dollar1").val()+$(".dollar2").val()+$(".dollar3").val()+..... etc;
$(".total").html($sub_total);
// ---------------------------- //
}
</script>
<input type="hidden" value="140" class="prize1">
<select class="quantity" id="quant2" value="1" onchange="select(this.value, 1)"> src="1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar1" value="140">140</span>
<br>
<input type="hidden" class="prize2" value="150">
<select class="quantity" id="quant2" value="2" onchange="select(this.value, 2)"> src="2">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar2" value="300">300</span>
...... etc
<br><br>
<label> TOTAL </label> : <span class="total">?????</span>
How to make a total element , can compute all amounts on the price? How if I after onchange select, then on dollar1 dollar2 dollar3 ... etc will
summed , because I use while() on this script.
What should I do in this script ?
$sub_total=dollar1+dollar2+dollar3+..... etc;
$(".total").html($sub_total);
IF this php code
<?php
while($loll = $resultu->fetch_array(MYSQLI_BOTH)){
$id_item= $loll['id_item'];
$prize=$loll['prize'];
<input type="hidden" value="<?php echo $prize ?>" class="prize<?php echo $id_item ?> ">
<select class="quantity" value="<?php echo $id_item ?>" onchange="select(this.value, <?php echo $id_item ?>)"> src="<?php echo $id_item ?>">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar<?php echo $id_item ?>" value="<?php echo $prize ?>"><?php echo $prize ?></span>
<br>
}
...... etc
<br><br>
<label> TOTAL </label> : <span class="total">?????</span>
How i can summed $sub_total= ALL --> $(".dollar<?php echo $id_item ?>")?
Here is a simple jQuery example that will run a sum calculation when the user changes the select elements:
HTML
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="result" type="text"/>
JavaScript
$(document).ready(function () {
$('#select1, #select2').change(function () {
var num1 = Number($('#select1').val());
var num2 = Number($('#select2').val());
var sum = num1 + num2;
$('#result').val("$" + sum);
});
});

How to select dynamically in Bootstrap-select with multiple values

How can I select dynamically in Bootstrap-select with multiple values, if my values are 1,3,4, using jQuery?
Here is my select:
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
Use Bootstrap-Select's val method:
$('#myselect').selectpicker('val', [1,3,4]);
http://jsfiddle.net/a4bxnwws/
See Bootstrap-Select's documentation.
If you use selectpicker class then
<select class="selectpicker" id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
And Your jquery code will be like below:
var select_items = ["1","3","4"];
$('#myselect').selectpicker('val', select_items);
You can set the value for the select element using two methods.
For the first one, you can use the method that the bootstrap-select plugin provided: selectpicker(just like the above answer);
The second one is using jquery's method - trigger. Such as:
$('#myselect').val([1,3,4]).trigger('change');
This should work:
$('#MySelectionBox').val(123).change();
<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $value)
{
echo $value."</br>";
}
}
?>
// Check this code in detail
<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $key => $value)
{
$SID = mysqli_real_escape_string($dbCon,$value);
echo $SID ."</br>";
}
}
?>

Multiple select change event handle

html:
<tr><td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td></tr>
js :
$(function() {
$('#fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
});
});
The user can add unlimited select option panel.
I want to handle which select option change.
For example if second select option is changed, i want to change second select option' s input color. How can i handle them ?
Use class instead of ID if you have multiple elements.
$(function() {
$('.fruits').change(function(e) {
var selected = $(this).val();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
</tr>
</table>
1) Id must be unique. Change that to class
<select class="fruits" name = "fruits[]">
and now you can use this to detect the current object
$(function() {
$('.fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
$(this).css("background-color", "colorName"); // or any css property
});
});
Add a class attribute to both selects.
Then you can use that in your jQuery selector. As IDs should be unique.
I.e. if I gave the select an attribute class="fruit" I could then use the following selector.
$(".fruit").change(function() {});

Categories

Resources