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

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);
});
});

Related

On change trigger id imported with ajax

I have a small script, I did not made it, I want to modify it but Im stuck.
There are two select options, state and city. When state is selected ajax is bringing the specific cities for that state.
I have default value both for state and city but I cant trigger the city to change.
Here is the javascript
$("#state_id").change(function() {
$.ajax({
url: "<?php echo base_url() . "ajaxreq/getcity/"; ?>" + $("#state_id").val(),
success: function(result) {
$("#ajaxcity").html(result);
}
});
});
$('#state_id').trigger('change');
This is html part:
<div class="logininputfield">
<label><?php echo $this->lang->line('region') ?><span>*</span></label>
<div class="inputfieldsection">
<select name="state_id" id="state_id">
<option value=""><?= $this->lang->line("please_select"); ?> </option>
<?php foreach ($state as $key => $state_name) { ?>
<option value="<?php echo $key; ?>" <?php if ($state_id == $key ) { ?> selected <?php } ?> ><?php echo $state_name; ?></option>
<?php } ?>
</select>
<span for="state_id" class="error"></span>
</div>
</div>
<div class="logininputfield">
<label><?php echo $this->lang->line('city') ?><span>*</span></label>
<div class="inputfieldsection">
<span id="ajaxcity">
<select name="city" id="city" class="input span6">
<option value=""><?php echo $this->lang->line('please_select'); ?></option>
</select>
</span>
<span for="city" class="error"></span>
</div>
</div>
The result is this:
<div class="inputfieldsection">
<span id="ajaxcity"> <select name="city_id" id="city_id" class="valid">
<option value="102">München</option>
<option value="103">Nürnberg</option>
<option value="104">Augsburg</option>
<option value="105">Regensburg</option>
<option value="106">Ingolstadt</option>
<option value="107">Würzburg</option>
<option value="108">Fürth</option>
<option value="109">Erlangen</option>
<option value="110">Bayreuth</option>
<option value="111">Bamberg</option>
<option value="112">Aschaffenburg</option>
<option value="113">Landshut</option>
<option value="114">Kempten (Allgäu)</option>
<option value="115">Rosenheim</option>
<option value="116">Neu-Ulm</option>
<option value="117">Schweinfurt</option>
<option value="118">Passau</option>
<option value="119">Freising</option>
<option value="120">Dachau</option>
<option value="121">Straubing</option>
<option value="122">Hof</option>
<option value="123">Memmingen</option>
<option value="124">Kaufbeuren</option>
<option value="125">Weiden in der Oberpfalz</option>
<option value="126">Amberg</option>
<option value="127">Coburg</option>
<option value="128">Ansbach</option>
<option value="129">Schwabach</option>
<option value="130">Germering</option>
<option value="131">Neumarkt in der Oberpfalz</option>
<option value="132">Erding</option>
<option value="133">Fürstenfeldbruck</option>
<option value="134">Deggendorf</option>
<option value="135">Forchheim</option>
<option value="136">Friedberg</option>
<option value="137">Neuburg an der Donau</option>
<option value="138">Landsberg am Lech</option>
<option value="139">Schwandorf</option>
<option value="140">Königsbrunn</option>
<option value="141">Unterschleißheim</option>
<option value="142">Kulmbach</option>
<option value="143">Olching</option>
<option value="144">Garmisch-Partenkirchen</option>
<option value="145">Lauf an der Pegnitz</option>
<option value="146">Zirndorf</option>
<option value="147">Lindau</option>
<option value="148">Pfaffenhofen an der Ilm</option>
<option value="149">Roth</option>
<option value="150">Geretsried</option>
<option value="151">Unterhaching</option>
<option value="152">Herzogenaurach</option>
<option value="153">Starnberg</option>
<option value="154">Waldkraiburg</option>
<option value="155">Vaterstetten</option>
<option value="156">Senden</option>
<option value="157">Weilheim in Oberbayern</option>
<option value="158">Sonthofen</option>
<option value="159">Neusäß</option>
<option value="160">Gersthofen</option>
<option value="161">Bad Kissingen</option>
<option value="162">Ottobrunn</option>
<option value="163">Aichach</option>
<option value="164">Puchheim</option>
<option value="165">Kitzingen</option>
<option value="166">Traunreut</option>
<option value="167">Gauting</option>
<option value="168">Lichtenfels</option>
</select><span for="city_id" class="error"></span>
</span>
<span for="city" class="error"></span>
</div>
I'm a noob with javascript.
I added myself the trigger part and it works but I dont know how to make it work for the city.
It would be something like this but is it doesnt work.
$('#city_id').val(<? echo $city_id; ?>).trigger('change');
Thank you in advance.
This was the answer i was looking for
<?php foreach ($city as $key => $city_name) { ?>
<option value="<?php echo $key; ?>" <?php if($city_id == $key) {?> selected <?php } ?> ><?php echo $city_name; ?></option>
<?php } ?>

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 show/hide div based on selected option's id?

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.

Enabling/ disabling “select” if text input is empty or not

I am trying to disable a <select> depending on if text input is empty or not.
What I need is on page load is for the select to be enabled because the text inputs are empty, but once a date is entered to disable the select.
This is what I've got so far:
<ul>
<li><label for="from_date">From Date:</label> <input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="to_date">To Date:</label> <input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="older_than">Or Older Than:</label>
<select name="older_than" id="older_than" class="input_tbl">
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>
And the JavaScript:
$(document).ready(function() {
$(".item_form_date").change(function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','disabled');
}
});
});
It will work better the way you want it with keyup:
$(document).ready(function() {
$(".item_form_date").on("keyup change", function() {
var checker = $.trim($(this).val()).length === 0;
$("#older_than").attr('disabled', !checker);
});
});
Oh, and if you want the select element disabled or not when you load the page, depending on whether the input's are populated or not, you can check that with your PHP:
<ul>
<li>
<label for="from_date">From Date:</label>
<input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="to_date">To Date:</label>
<input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="older_than">Or Older Than:</label>
<!-- this code -->
<?php $disable = (trim($_POST['from_date']) == "" && trim($_POST['to_date']) == "") ? "" : " disabled"; ?>
<select name="older_than" id="older_than" class="input_tbl"<?php echo $disable; ?>><!-- end of new feauture -->
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>
If you want it to update as the user types, you need to use the input event.
http://jsfiddle.net/rfujjge6/1/
$(document).ready(function() {
$(".item_form_date").on('input',function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','');
}
});
});

Hide/Show new menus based on user's selection

I have this menu:
Classificazione <select onchange="if(this.value == 'D'){ document.getElementById('menu2').style.display = 'block'; } else { document.getElementById('menu2').style.display = 'none'; }" style="margin-top: 5px;" name="classificazione">
<option value="art0"></option>
<option value="C" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="C") echo "selected"; ?> >Articoli</option>
<option value="D" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="D") echo "selected"; ?> >Documentazione</option>
<option value="A" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="A") echo "selected"; ?> >Libri</option>
<option value="G" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="G") echo "selected"; ?> >Materiali</option>
<option value="B" <?php if (isset($getParams['classificazione'])&&$getParams['classificazione']=="B") echo "selected"; ?> >Riviste</option>
</select><br />
Only when the user selects the value 'Documentazione' I want to show another (equal) menu, with different option.
I added this submenu:
<select style="margin-top: 5px;" name="menu2">
<option value="art0"></option>
<option value="C" >Corsi</option>
<option value="D" >Incontri</option>
<option value="A" >Convegni</option>
<option value="G" >Gruppi</option>
<option value="B" >Progetto</option>
</select><br />
But it's not working
Classificazione <select onchange="if(this.value == 'D'){ document.getElementById('menu2').style.display = 'block'; } else { document.getElementById('menu2').style.display = 'none'; }" style="margin-top: 5px;" name="classificazione">
<option value="art0"></option>
<option value="C" <?php if ($getParams['classificazione']=="C") echo "selected"; ?> >Articoli</option>
<option value="D" <?php if ($getParams['classificazione']=="D") echo "selected"; ?> >Documentazione</option>
<option value="A" <?php if ($getParams['classificazione']=="A") echo "selected"; ?> >Libri</option>
<option value="G" <?php if ($getParams['classificazione']=="G") echo "selected"; ?> >Materiali</option>
<option value="B" <?php if ($getParams['classificazione']=="B") echo "selected"; ?> >Riviste</option>
</select>
notice the onchange event.
<select style="margin-top: 5px; display: none;" id="menu2">
<option value="art0"></option>
<option value="C" >Corsi</option>
<option value="D" >Incontri</option>
<option value="A" >Convegni</option>
<option value="G" >Gruppi</option>
<option value="B" >Progetto</option></select>

Categories

Resources