Why is the javascript slidetoggle function not staying open? - javascript

I have a link on a page that toggles the search form on and off. For example you search for Spring term classes and then you want to search for a new term and click Start a new Search. The link works great and toggles just fine...EXCEPT the toggle automatically closes again. I can't figure out why this is happening, I have searched the stack overflow site and none of the solutions seems to work (Or maybe I am still doing something wrong) Any help you can give me would be greatly appreciated.
Here is the part that calls the function
<div class="course-schedule-wrapper">
<span <?= ($show_form) ? 'style="display:none;"' : null ?> class="toggle-search">Start a new schedule search</span>
<div id="course-schedule-search" <?= ($show_form) ? null : 'style="display:none;"' ?>>
<form name="form" method="post" action="/schedules/">
<input type="hidden" name="search" value="1" />
<table summary="Course schedule search options" id="course-schedule-form">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<label for="area_id" class="label">Semester:</label>
</td>
<td>
<!--<input type="radio" name="semester" value="2014SP" id="S2014SP" checked="checked">
<label class="inline" for="S2014SP">Spring 2014</label>
<br />
--> <?
$sflag = FALSE;
$fflag = FALSE;
if ($_POST['semester'] == '2014SU'){
$sflag = "checked=checked";
}
if ($_POST['semester'] == '2014FA'){
$fflag = "checked=checked";
}
if(!$sflag && !$fflag) {
$fflag = "checked=checked";
}
?>
<input type="radio" name="semester" value="2014FA" id="S2014FA" <?= $fflag; ?>>
<label class="inline" for="S2014FA">Fall 2014</label>
<br />
<input type="radio" name="semester" value="2015SP" id="S2015SP" <?= $sflag; ?>>
<label class="inline" for="S2014SU">Spring 2015</label>
<br />
</td>
</tr>
<tr valign="middle">
<td nowrap="nowrap">
<label for="text" class="label">Search for:</label>
</td>
<td>
<input type="text" name="text" id="text" size="60" value="<?= ( (isset($_POST['text']) ) ? $_POST['text'] : null )?>">
<div class="formtext">in course ID, title, or instructor</div>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="area_id" class="label">Area of study:</label>
</td>
<td>
<select name="area_id" size="1" id="area_id">
<option value="-1">Any Area of Study</option>
<?php
$query = "SELECT * FROM areas WHERE inactive=0 ORDER BY name";
$result = db_query($query)->fetchAll();
?>
<? foreach( $result as $area ): ?>
<option <?= ( isset($_POST['area_id']) && $area->id == $_POST['area_id'] ) ?' selected="selected" ' : null ?> value="<?=$area->id?>"><?= $area->name ?></option>
<? endforeach; ?>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="division_id" class="label">Division:</label>
</td>
<td>
<select name="division_id" size="1" id="division_id">
<option value="-1">Any Division</option>
<?php
$query = "SELECT * FROM divisions ORDER BY name";
$result = db_query($query)->fetchAll();
?>
<? foreach( $result as $division ): ?>
<option <?= ( isset($_POST['division_id']) && $division->id == $_POST['division_id'] ) ?' selected="selected" ' : null ?> value="<?= $division->id ?>"><?= $division->name ?></option>
<? endforeach; ?>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="time1" class="label">Start time:</label>
</td>
<td>
<div class="formtext">from
<select name="time[0]" size="1" id="time1" onchange="document.form.online.checked=false;">
<option value="" selected="selected">anytime</option>
<option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
<option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
<option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
<option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
<option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
<option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
<option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
<option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
<option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
<option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
<option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
<option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
<option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
<option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
</select>
<label for="time2">to</label>
<select name="time[1]" size="1" id="time2" onchange="document.form.online.checked=false;">
<option value="" selected="selected">anytime</option>
<option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
<option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
<option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
<option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
<option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
<option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
<option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
<option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
<option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
<option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
<option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
<option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
<option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
<option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
</select>
(inclusive)
</div>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="duration" class="label">Duration:</label>
</td>
<td>
<select name="duration" size="1" id="duration" onchange="document.form.online.checked=false;">
<option value="-1" selected="selected">any duration</option>
<option <?= (isset($_POST['duration']) && '01:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:00">1 hour</option>
<option <?= (isset($_POST['duration']) && '01:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:30">1.5 hours</option>
<option <?= (isset($_POST['duration']) && '02:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:00">2 hours</option>
<option <?= (isset($_POST['duration']) && '02:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:30">2.5 hours</option>
<option <?= (isset($_POST['duration']) && '03:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:00">3 hours</option>
<option <?= (isset($_POST['duration']) && '03:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:30">3.5 hours</option>
<option <?= (isset($_POST['duration']) && '04:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:00">4 hours</option>
<option <?= (isset($_POST['duration']) && '04:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:30">4.5 hours</option>
</select>
<select name="durcomp" size="1" id="durcomp" onchange="document.form.online.checked=false;">
<option value="less" <?= (isset($_POST['durcomp']) && 'less' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or less</option>
<option value="more" <?= (isset($_POST['durcomp']) && 'more' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or more</option>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap" class="label">Days:</td>
<td>
<table summary="Days of the week">
<tbody>
<tr>
<td align="center"><label for="M" class="formtext">M</label></td>
<td align="center"><label for="T" class="formtext">T</label></td>
<td align="center"><label for="W" class="formtext">W</label></td>
<td align="center"><label for="R" class="formtext">R</label></td>
<td align="center"><label for="F" class="formtext">F</label></td>
<td align="center"><label for="S" class="formtext">S</label></td>
</tr>
<tr valign="top">
<td align="center">
<input type="checkbox" name="M" id="M" <?=( isset($_POST['M']) && "ON" == $_POST['M'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="T" id="T" <?=( isset($_POST['T']) && "ON" == $_POST['T'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="W" id="W" <?=( isset($_POST['W']) && "ON" == $_POST['W'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="R" id="R" <?=( isset($_POST['R']) && "ON" == $_POST['R'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="F" id="F" <?=( isset($_POST['F']) && "ON" == $_POST['F'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="S" id="S" <?=( isset($_POST['S']) && "ON" == $_POST['S'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="left">
<select name="dayop" size="1" id="dayop">
<option value="AND" <?=( isset($_POST['dayop']) && "AND" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>these days only</option>
<option value="OR" <?=( isset($_POST['dayop']) && "OR" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>at least these days</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle">
<td nowrap="nowrap"><label for="online" class="label">Show online<br>courses only:</label></td>
<?php
if($_POST['online'] == "ON") {
$oflag = "checked=checked";
}
?>
<td><input type="checkbox" name="online" id="online" onclick="rst()" value="ON" <?= $oflag; ?>></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currentcourse" id="inprog" value="3">
<br>
<input type="submit"> | <input type="reset" value="Reset"><br>
</form>
<hr />
<p class="body"><strong>To register</strong>, or for more information, contact
the Admissions office at
217.443.8800.
</p>
<p class="body">Some courses have flexible schedules or have schedules that are yet to be
determined; these are listed as TBA (To Be Arranged) and include online
(Internet) courses, video telecourses, internships, et cetera. If you
search based on time, length and/or day, the results will <b>not</b>
include such courses.
</p>
<p class="body">Some courses involve a lab portion that meets at a different time and/or
on different days than the lecture portion. If you search based on time,
length and/or day, the results may include the lecture portion or the lab
portion, but not necessarily both, even though both portions are
required.
</p>
</div>
</div>
Here is the function information (other functions included just to make sure I am not missing anything)
jQuery(function($){
$('#header-logo').click(function(){
window.location = 'http://local.dannew.com/';
});
$(".course-schedule-wrapper .toggle-search a").click(function(e){
e.preventDefault();
$("#course-schedule-search").slideToggle();
});
$("#quicklinks").change(function(){
if( $(this).val() != "0" )
window.location = $(this).val();
});
$(".show-in-progress").click(function(){
$('#inprog').val('1');
$("form[name='form']").submit();
console.log('test');
});
$("a").each(function(i, el){
if( $(el).attr('href') == "/%23" || $(el).attr('href') == "..." ){
$(el).click(function(){
return false;
}).css({
"text-decoration" : "none",
"color" : "#000",
"cursor" : "default"
});
}
});

One click handler for that selector submits a form. Submitting a form will reload a new page based on criteria set in the action url code, unless the form is submitted via ajax.
There is no page state saved when you load a new page.
Thus you are basically seeing the page reset itself to a new version

I found my issue, there was an extraneous copy of the script
$(".course-schedule-wrapper .toggle-search a").click(function(e){
e.preventDefault();
$("#course-schedule-search").slideToggle();
});
in one of the other files that feeds into the page. removed that copy and now it is working great! For the record this was not as simple as it sounds as for this "schedules" page the developers created 6 different files to feed this one page!

Related

Apply javascript to multiple items by class

I have some select boxes that I want to have color coded. There are three per row, by 18 rows.
It is easy to color code the drop down, but I need to use Javascript to color code the display of the selected item. I have cobbled together a script that does it, but only for the first one on the page .. and it changes ALL of them to the same color. I need the script to apply to each one independently. I am very much a beginner at Javascript. I have figured out that I need to use the var i thing, but I can't get it to work.
<td>
<div>
<select type="" name="tee_condition" class="selectcondition" id="tee_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['tee_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['tee_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['tee_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['tee_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="fairway_condition" class="selectcondition" id="fairway_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['fairway_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['fairway_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['fairway_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['fairway_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="green_condition" class="selectcondition" id="green_condition">
<option style="color: #5cb85c;" value="Excellent"<?php if($listresult['green_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good"<?php if($listresult['green_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair"<?php if($listresult['green_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor"<?php if($listresult['green_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
And my javascript is:
//**** Script to Color the Dropdowns
$(document).ready(function () {
colorSelect(); // call this first so we start out with the correct Color
// this will call our function every time the selection value of the field changes
$(".selectcondition").change(function () {
colorSelect();
});
});
// this changes the color of the selected item
function colorSelect() {
if ($(".selectcondition").val() === "Excellent"){
$('.selectcondition').css('color','#5cb85c');
}else if($(".selectcondition").val() === "Good"){
$('.selectcondition').css('color','#0275d8');
}else if($(".selectcondition").val() === "Fair"){
$('.selectcondition').css('color','#f0ad4e');
}else {
$('.selectcondition').css('color','#FF0000');
}
}
.css will set the CSS of all matching elements. Iterate over the selects with each instead, and get a reference to the current one you're iterating over with this.
You can also make the code much more concise by using an object indexed by option values instead of repetitive if/else statements:
function colorSelect() {
const colors = {
Excellent: '#5cb85c',
Good: '#0275d8',
Fair: '#f0ad4e',
Poor: '#FF0000'
}
$(".selectcondition").each(function() {
$(this).css('color', colors[this.value]);
});
}
colorSelect();
$(".selectcondition").change(colorSelect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<div>
<select type="" name="tee_condition" class="selectcondition" id="tee_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'tee_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'tee_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'tee_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'tee_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="fairway_condition" class="selectcondition" id="fairway_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'fairway_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'fairway_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'fairway_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'fairway_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>
<td class="text-center">
<div>
<select type="" name="green_condition" class="selectcondition" id="green_condition">
<option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'green_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
<option style="color: #0275d8;" value="Good" <?php if($listresult[ 'green_condition']=='Good' ){echo 'selected';} ?> >Good</option>
<option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'green_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
<option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'green_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
</select>
</div>
</td>

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

SCRIPT5007 Javascript error in IE9 and lower

I have got this problem that is driving me crazy. I have made this Javascript function that is working in every browser and only in IE9 and lower I get this error.
This is the error I got in dutch.
SCRIPT5007: Kan de eigenschap value van een niet-gedefinieerde verwijzing of een verwijzing naar een lege waarde niet instellen
This is the translated version:
SCRIPT5007: Can the value property of an undefined reference or a reference to an empty value not set.
This is my Javascript function:
function Calculate()
{
var l = document.getElementById('aantal-caps').value;
var l2 = document.getElementById('aantal-paraplu').value;
var l3 = document.getElementById('aantal-blue-tooth').value;
var l4 = document.getElementById('aantal-backpack').value;
var result = l * 12 + l2 * 12 + l3 * 20 + l4 * 50;
document.getElementById('totaal').innerHTML = result;
document.aanvraag.totaal.value = result;
var punten = 345; // Aantal spaarpunten van de klant. Die kan jij hier inschieten.
var bereken = punten - result;
if(bereken < 0)
{
bereken = '<span style="color:#ff0000"><b>Saldo niet toereikend</b></span>';
document.getElementById("Submitform").disabled = true;
} else
{
bereken = punten - result;
document.getElementById("Submitform").disabled = false;
}
document.getElementById('punten-aantal').innerHTML = bereken;
document.getElementById('uwpunten').innerHTML = punten;
}
window.onload=Calculate;
This is my HTML table where I show the selected javascript values:
<table style="float:left; width:350px; height:247px;">
<tr>
<th height="15px">Spaarpunten</th>
</tr>
<tr>
<td>Uw aantal spaarpunten : </td>
<td><strong style="font-size:14px"><span id="uwpunten" style="color:#0acb00;">0<input type="hidden" name="uwpunten" id="uwpunten" value="" /></span></strong></td>
</tr>
<tr>
<td>De huidige selectie kost u : </td>
<td><strong style="font-size:14px"><span id="totaal" style="color:#F00;">0<input type="hidden" name="totaal" id="totaal" value="" /></span></strong></td>
</tr>
<tr>
<td>-------------------------------</td>
<td>-----</td>
</tr>
<tr>
<td>U heeft nog : </td>
<td><strong style="font-size:14px"><span id="punten-aantal" style="color:#0acb00;">0<input type="hidden" name="punten-aantal" id="punten-aantal" value="" /></span></strong></td>
</tr>
This is my selection form:
<table width="700" cellpadding="3" cellspacing="3" style="float:left;">
<tr>
<th>Kies een product</th>
</tr>
<tr>
<td><img src="cap.jpg" /></td>
<td><img src="paraplu.jpg" /></td>
<td><img src="bandenspeaker.jpg" /></td>
<td><img src="backpack.jpg" /></td>
</tr>
<tr>
<td><select id="aantal-caps" name="aantal-caps" onChange="Calculate();">
<option value="0" selected="selected">Kies het aantal</option>
<option value="1" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "1") {echo "selected='selected'"; } ?>>1</option>
<option value="2" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "2") {echo "selected='selected'"; } ?>>2</option>
<option value="3" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "3") {echo "selected='selected'"; } ?>>3</option>
<option value="4" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "4") {echo "selected='selected'"; } ?>>4</option>
<option value="5" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "5") {echo "selected='selected'"; } ?>>5</option>
<option value="6" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "6") {echo "selected='selected'"; } ?>>6</option>
<option value="7" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "7") {echo "selected='selected'"; } ?>>7</option>
<option value="8" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "8") {echo "selected='selected'"; } ?>>8</option>
<option value="9" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "9") {echo "selected='selected'"; } ?>>9</option>
<option value="10" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-caps']) == "10") {echo "selected='selected'"; } ?>>10</option>
</select>
</td>
<td><select id="aantal-paraplu" name="aantal-paraplu" onChange="Calculate();">
<option value="0" selected="selected">Kies het aantal</option>
<option value="1" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "1") {echo "selected='selected'"; } ?>>1</option>
<option value="2" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "2") {echo "selected='selected'"; } ?>>2</option>
<option value="3" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "3") {echo "selected='selected'"; } ?>>3</option>
<option value="4" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "4") {echo "selected='selected'"; } ?>>4</option>
<option value="5" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "5") {echo "selected='selected'"; } ?>>5</option>
<option value="6" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "6") {echo "selected='selected'"; } ?>>6</option>
<option value="7" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "7") {echo "selected='selected'"; } ?>>7</option>
<option value="8" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "8") {echo "selected='selected'"; } ?>>8</option>
<option value="9" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "9") {echo "selected='selected'"; } ?>>9</option>
<option value="10" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-paraplu']) == "10") {echo "selected='selected'"; } ?>>10</option>
</select>
</td>
<td><select id="aantal-blue-tooth" name="aantal-blue-tooth" onChange="Calculate();">
<option value="0" selected="selected">Kies het aantal</option>
<option value="1" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "1") {echo "selected='selected'"; } ?>>1</option>
<option value="2" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "2") {echo "selected='selected'"; } ?>>2</option>
<option value="3" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "3") {echo "selected='selected'"; } ?>>3</option>
<option value="4" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "4") {echo "selected='selected'"; } ?>>4</option>
<option value="5" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "5") {echo "selected='selected'"; } ?>>5</option>
<option value="6" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "6") {echo "selected='selected'"; } ?>>6</option>
<option value="7" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "7") {echo "selected='selected'"; } ?>>7</option>
<option value="8" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "8") {echo "selected='selected'"; } ?>>8</option>
<option value="9" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "9") {echo "selected='selected'"; } ?>>9</option>
<option value="10" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-blue-tooth']) == "10") {echo "selected='selected'"; } ?>>10</option>
</select>
</td>
<td><select id="aantal-backpack" name="aantal-backpack" onChange="Calculate();">
<option value="0" selected="selected">Kies het aantal</option>
<option value="1" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "1") {echo "selected='selected'"; } ?>>1</option>
<option value="2" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "2") {echo "selected='selected'"; } ?>>2</option>
<option value="3" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "3") {echo "selected='selected'"; } ?>>3</option>
<option value="4" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "4") {echo "selected='selected'"; } ?>>4</option>
<option value="5" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "5") {echo "selected='selected'"; } ?>>5</option>
<option value="6" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "6") {echo "selected='selected'"; } ?>>6</option>
<option value="7" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "7") {echo "selected='selected'"; } ?>>7</option>
<option value="8" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "8") {echo "selected='selected'"; } ?>>8</option>
<option value="9" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "9") {echo "selected='selected'"; } ?>>9</option>
<option value="10" <?php if(isset($_POST['Submitform']) && strip_tags($_POST['aantal-backpack']) == "10") {echo "selected='selected'"; } ?>>10</option>
</select>
</td>
</tr>
Sorry for posting all the code but most of the time it is better to understand what I'm doing.
This field:
<td><strong style="font-size:14px"><span id="totaal" style="color:#F00;">0<input type="hidden" name="totaal" id="totaal" value="" /></span></strong></td>
is the only field that is working. Other two fields I get SCRIPT5007 ERROR on page load and when I select another field in my form.
Why is this only happening in IE9 and lower? And is there a way to solve this issue?
document.aanvraag.totaal.value = result;
That was causing my error

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