Develop Reference

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>

Why is the javascript slidetoggle function not staying open?

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!

display hidden div after form submit

I have a user drop down menu in my form code where user can select their option to process their request. The div ids ranges from fa1 to fa8.By default I am showing fa1 and fa2 in my form and fa3 to fa8 are set to display: none. I have added a button to add remove additional drop down menu depends upon user requirement( which will display\hide fa3 to fa8)
I am able to keep the user selected options after form submit using
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
The issue I am facing here is if user added a addiotnal div (say fa3), selected drop down option and submit the form, the hidden div not displaying after submit (eventhough it keeping its drop down as user selected)
I would like to show the hidden div(if user added) as well along with the selected option after form submit
My html code:
<div class="block-no-height">
<div class="sub_headings"> Select Your FA director and Port</div>
<div class="wrap-quest-resp" id="fa1">
<div class="input-quest-no-height">FA and port - 1</div>
<div class="input-resp-no-height">
<select id="fa-select-1" name="fa-select-1">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-1']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-1']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-1']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-1']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-1']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-1']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-1']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-1']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-1']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-1']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-1']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-1']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-1']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-1']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-1']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-1" name="proc-select-1">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-1']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-1']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-1']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-1']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-1" name="port-select-1">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-1']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa2">
<div class="input-quest-no-height">FA and port - 2</div>
<div class="input-resp-no-height">
<select id="fa-select-2" name="fa-select-2">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-2']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-2']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-2']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-2']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-2']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-2']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-2']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-2']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-2']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-2']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-2']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-2']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-2']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-2']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-2']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-2" name="proc-select-2">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-2']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-2']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-2']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-2']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-2" name="port-select-2">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-2']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa3" style="display:none;" disabled="true">
<div class="input-quest-no-height">FA and port - 3</div>
<div class="input-resp-no-height">
<select id="fa-select-3" name="fa-select-3">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-3']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-3']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-3']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-3']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-3']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-3']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-3']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-3']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-3']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-3']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-3']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-3']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-3']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-3']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-3']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-3" name="proc-select-3">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-3']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-3']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-3']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-3']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-3" name="port-select-3">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-3']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa4" style="display:none;" >
<div class="input-quest-no-height">FA and port - 4</div>
<div class="input-resp-no-height">
<select id="fa-select-4" name="fa-select-4">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-4']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-4']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-4']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-4']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-4']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-4']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-4']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-4']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-4']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-4']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-4']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-4']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-4']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-4']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-4']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-4" name="proc-select-4">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-4']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-4']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-4']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-4']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-4" name="port-select-4">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-4']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa5" style="display:none;" >
<div class="input-quest-no-height">FA and port - 5</div>
<div class="input-resp-no-height">
<select id="fa-select-5" name="fa-select-5">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-5']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-5']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-5']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-5']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-5']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-5']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-5']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-5']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-5']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-5']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-5']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-5']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-5']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-5']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-5']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-5" name="proc-select-5">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-5']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-5']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-5']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-5']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-5" name="port-select-5">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-5']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa6" style="display:none;" >
<div class="input-quest-no-height">FA and port - 6</div>
<div class="input-resp-no-height">
<select id="fa-select-6" name="fa-select-6">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-6']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-6']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-6']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-6']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-6']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-6']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-6']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-6']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-6']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-6']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-6']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-6']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-6']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-6']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-6']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-6" name="proc-select-6">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-6']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-6']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-6']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-6']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-6" name="port-select-6">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-6']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa7" style="display:none;" >
<div class="input-quest-no-height">FA and port - 7</div>
<div class="input-resp-no-height">
<select id="fa-select-7" name="fa-select-7">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-7']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-7']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-7']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-7']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-7']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-7']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-7']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-7']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-7']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-7']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-7']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-7']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-7']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-7']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-7']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-7" name="proc-select-7">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-7']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-7']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-7']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-7']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-7" name="port-select-7">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-7']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa8" style="display:none;" >
<div class="input-quest-no-height">FA and port - 8</div>
<div class="input-resp-no-height">
<select id="fa-select-8" name="fa-select-8">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-8']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-8']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-8']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-8']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-8']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-8']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-8']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-8']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-8']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-8']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-8']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-8']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-8']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-8']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-8']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-8" name="proc-select-8">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-8']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-8']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-8']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-8']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-8" name="port-select-8">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-8']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="add_remove_column">
<input type="hidden" id="countfa" name="countfa" value="3" readonly>
<button type="button" onClick="AddNewFa();" id="addfa" > + Add New FA </button>
<button type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button>
</div>
</div>
My javascript to add\remove hidden divs(minimum it will show two divs and max 8, I have added to disable add or remove buttons depends upn on its max \min count)
function AddNewFa()
{
var facount = parseInt($('#countfa').val(),9) ;
if( facount < 9)
{
facount = facount+1;
for(i=3;i<9;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==9 )
{ $('#addfa').attr('disabled','disabled');}
if( facount ==4 )
{ $('#removefa').removeAttr("disabled");}
}
//removing fa clicking remove button
function RemoveNewFa()
{
var facount = parseInt($('#countfa').val(),10) ;
if( facount >3)
{
facount = facount-1;
for(i=3;i<10;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==3 )
{ $('#removefa').attr('disabled','disabled');}
if( facount =8 )
{ $('#addfa').removeAttr("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>

Create Profile broken due to jQuery mis-compatibility with IE vs. Firefox vs. Chrome [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I made a certain piece of functionality which works perfectly on Chrome, but not on IE or Firefox. And the problem, it seems, is in jQuery compatibility.
For example, if you go to this page: http://www.problemio.com and click and any link named "important" it will present you with a login dialog. Since you do not have an account, it click on create profile. Once you fill out the create-profile form and press submit, in Chrome it works, but in IE or Firefox, it just refreshes everything and does nothing.
I am importing these jQuery libraries:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.problemio.com/js/problemio.js"></script>
Here is the jQuery code for the create-profile form submit:
$('#create_account_form').live('submit',function()
{
// Showing the wait image
$("#loading").show();
// First set all the validation error divs to not display
$('#create_profile_error').hide();
$('#create_profile_bottom_error').hide();
$('#first_name_error').hide();
$('#email_error').hide();
$('#email_confirm_error').hide();
$('#password_error').hide();
$('#password_confirm_error').hide();
$('#terms_and_conditions_error').hide();
$('#zip_error').hide();
$('#country_error').hide();
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var password = $("#create_pass").val();
var pass_confirm = $("#user_pass_check").val();
var user_email = $("#user_email").val();
var user_email_confirm = $("#user_email_confirm").val();
var zip = $("#zip").val();
var country = $("#country").val();
var dataString = 'first_name='+ first_name + '&last_name=' + last_name + '&user_pass=' + password + '&user_pass_check=' + pass_confirm + '&user_email=' + user_email + '&user_email_confirm=' + user_email_confirm + '&zip=' + zip + '&country=' + country + '&terms_and_conditions=' + terms_and_conditions;
var validation_errors = false;
//alert ("Data string " + dataString);
// Validate and check if they are empty
if( !first_name )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#first_name_error').show();
}
if( !user_email )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#email_error').show();
}
if( !user_email_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#email_confirm_error').show();
}
if( !password )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_error').show();
}
if( !pass_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if ( password != pass_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if ( password.length < 5 )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if( !zip )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#zip_error').show();
}
if( !country || country.indexOf("---") != -1 )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#country_error').show();
}
if ($('#terms_and_conditions').attr('checked'))
{
// alert ("CHECKKEED");
// Not sure what to do here yet :)
}
else
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#terms_and_conditions_error').show();
}
if ( validation_errors )
{
// Not sure what to do here yet :)
}
else
{
// Lets call the AJAX to create the account!!
$.ajax({
type: "POST",
url: "/auth/create_profile_ajax.php",
data: dataString ,
success: function(data)
{
// Showing the wait image
$("#loading").hide();
if ( data.indexOf("Error") !=-1)
{
$('#create_profile_error').html(data);
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
}
else
{
$("#createprofilepopup").dialog( 'close' );
$("<span class='success'>You have successfully created an account and are now logged in. Just close this window and resume what you were doing.</span>").dialog();
}
},
error: function(data)
{
// Showing the wait image
$("#loading").hide();
$('#create_profile_error').html("<p>Server error while creating your profile. Please let us know about this.</p>");
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
}
});
} // End of validation checking else statement.
return false;
});
and here is the HTML for the form:
<div>
<form id="create_account_form" method="post" >
<p><center><h3>Create Profile | Have an account? <a class="regular_link" id="login" href="#">Log In</a></h3></center>
</p>
<p id="create_profile_error" style="display:none;">
<span class="error">Error creating profile. Check below for errors</span>
</p>
<p>
<label for="name"><span>First Name:</span></label> <input type="text" id="first_name" name="first_name" />
<br />(To use a nickname instead of your name, enter it in the first name field and leave the last name blank)
</p>
<p id="first_name_error" style="display:none;">
<span class="error">First name can not be empty</span>
</p>
<p>
<label for="name"><span>Last Name (Optional): </span></label> <input type="text" id="last_name" name="last_name"/>
</p>
<p>
<label for="name"><span>E-mail (Will be your login):</span></label> <input type="email" id="user_email" name="user_email" />
</p>
<p id="email_error" style="display:none;">
<span class="error">Email field can not be empty</span>
</p>
<p>
<label for="name"><span>E-mail Confirm:</span></label> <input type="email" id="user_email_confirm" name="user_email_confirm" />
</p>
<p id="email_confirm_error" style="display:none;">
<span class="error">Email confirm field can not be empty and same as the email field</span>
</p>
<p>
<label for="name"><span>Password (5+ Characters):</span></label> <input type="password" id="create_pass" name="user_pass" >
</p>
<p id="password_error" style="display:none;">
<span class="error">The password must be at least 5 characters.</span>
</p>
<p>
<label for="name"><span>Password Confirm:</span></label> <input type="password" id="user_pass_check" name="user_pass_check">
</p>
<p id="password_confirm_error" style="display:none;">
<span class="error">The passwords must match and be at least 5 characters</span>
</p>
<p>
<label for="name"><span>Postal Code:</span></label> <input type="text" id="zip" name="zip" />
</p>
<p id="zip_error" style="display:none;">
<span class="error">Zip code can not be empty</span>
</p>
<p>
<label for="name"><span>Country:</span></label>
<select id="country" name="country" style="width:150px;">
<option value="">---</option>
<option value="United States" <?php if ( $country == 'United States' ) {echo 'selected';} ?>>United States</option>
<option value="Canada" <?php if ( $country == 'Canada' ) {echo 'selected';} ?>>Canada</option>
<option value="United Kingdom" <?php if ( $country == 'United Kingdom' ) {echo 'selected';} ?>>United Kingdom</option>
<option value="Ireland" <?php if ( $country == 'Ireland' ) {echo 'selected';} ?>>Ireland</option>
<option value="Australia" <?php if ( $country == 'Australia' ) {echo 'selected';} ?>>Australia</option>
<option value="New Zealand" <?php if ( $country == 'New Zealand' ) {echo 'selected';} ?>>New Zealand</option>
<option value="null" >-------------------</option>
<option value="Afghanistan" <?php if ( $country == 'Afghanistan' ) {echo 'selected';} ?>>Afghanistan</option>
<option value="Albania" <?php if ( $country == 'Albania' ) {echo 'selected';} ?>>Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium" <?php if ( $country == 'Belgium' ) {echo 'selected';} ?>>Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile" <?php if ( $country == 'Chile' ) {echo 'selected';} ?>>Chile</option>
<option value="China" <?php if ( $country == 'China' ) {echo 'selected';} ?>>China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica" <?php if ( $country == 'Costa Rica' ) {echo 'selected';} ?>>Costa Rica</option>
<option value="Cote Divoire">Cote Divoire</option>
<option value="Croatia" <?php if ( $country == 'Croatia' ) {echo 'selected';} ?>>Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus" <?php if ( $country == 'Cyprus' ) {echo 'selected';} ?>>Cyprus</option>
<option value="Czech Republic" <?php if ( $country == 'Czech Republic' ) {echo 'selected';} ?>>Czech Republic</option>
<option value="Denmark" <?php if ( $country == 'Denmark' ) {echo 'selected';} ?>>Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt" <?php if ( $country == 'Egypt' ) {echo 'selected';} ?>>Egypt</option>
<option value="El Salvador" <?php if ( $country == 'El Salvador' ) {echo 'selected';} ?>>El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia" <?php if ( $country == 'Estonia' ) {echo 'selected';} ?>>Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland" <?php if ( $country == 'Finland' ) {echo 'selected';} ?>>Finland</option>
<option value="France" <?php if ( $country == 'France' ) {echo 'selected';} ?>>France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany" <?php if ( $country == 'Germany' ) {echo 'selected';} ?>>Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece" <?php if ( $country == 'Greece' ) {echo 'selected';} ?>>Greece</option>
<option value="Greenland" <?php if ( $country == 'Greenland' ) {echo 'selected';} ?>>Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland" <?php if ( $country == 'Iceland' ) {echo 'selected';} ?>>Iceland</option>
<option value="India" <?php if ( $country == 'India' ) {echo 'selected';} ?>>India</option>
<option value="Indonesia" <?php if ( $country == 'Indonesia' ) {echo 'selected';} ?>>Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland" <?php if ( $country == 'Ireland' ) {echo 'selected';} ?>>Ireland</option>
<option value="Israel" <?php if ( $country == 'Israel' ) {echo 'selected';} ?>>Israel</option>
<option value="Italy" <?php if ( $country == 'Italy' ) {echo 'selected';} ?>>Italy</option>
<option value="Jamaica" <?php if ( $country == 'Jamaica' ) {echo 'selected';} ?>>Jamaica</option>
<option value="Japan" <?php if ( $country == 'Japan' ) {echo 'selected';} ?>>Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic Peoples Republic of">Korea, Democratic Peoples Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao Peoples Democratic Republic">Lao Peoples Democratic Republic</option>
<option value="Latvia" <?php if ( $country == 'Latvia' ) {echo 'selected';} ?>>Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico" <?php if ( $country == 'Mexico' ) {echo 'selected';} ?>>Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands" <?php if ( $country == 'Netherlands' ) {echo 'selected';} ?>>Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway" <?php if ( $country == 'Norway' ) {echo 'selected';} ?>>Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay" <?php if ( $country == 'Paraguay' ) {echo 'selected';} ?>>Paraguay</option>
<option value="Peru" <?php if ( $country == 'Peru' ) {echo 'selected';} ?>>Peru</option>
<option value="Philippines" <?php if ( $country == 'Philippines' ) {echo 'selected';} ?>>Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland" <?php if ( $country == 'Poland' ) {echo 'selected';} ?>>Poland</option>
<option value="Portugal" <?php if ( $country == 'Portugal' ) {echo 'selected';} ?>>Portugal</option>
<option value="Puerto Rico" <?php if ( $country == 'Puerto Rico' ) {echo 'selected';} ?>>Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Romania" <?php if ( $country == 'Romania' ) {echo 'selected';} ?>>Romania</option>
<option value="Russian Federation" <?php if ( $country == 'Russian Federation' ) {echo 'selected';} ?>>Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia" <?php if ( $country == 'Slovakia' ) {echo 'selected';} ?>>Slovakia</option>
<option value="Slovenia" <?php if ( $country == 'Slovenia' ) {echo 'selected';} ?>>Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
<option value="Spain" <?php if ( $country == 'Spain' ) {echo 'selected';} ?>>Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland" <?php if ( $country == 'Switzerland' ) {echo 'selected';} ?>>Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey" <?php if ( $country == 'Turkey' ) {echo 'selected';} ?>>Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine" <?php if ( $country == 'Ukraine' ) {echo 'selected';} ?>>Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela" <?php if ( $country == 'Venezuela' ) {echo 'selected';} ?>>Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</p>
<p id="country_error" style="display:none;">
<span class="error">The country field must be set</span>
</p>
<?php
// echo '</p>
// <hr />
// <p>
// <strong>Optional:</strong>
// </p>
// <p>
// Little bit about you. Make your profile more personable and tell other members where and how you like to hike:
// </p>
// <p>';
?>
<!-- <textarea name="bio_blurb" cols=60 rows=6 ><?php echo $_POST['bio_blurb']; ?></textarea> -->
<!--
<p>
<label for="name"><span>Are you human: 4 + 7 = </span></label> <input type="text" name="captcha" />
</p>
-->
</p>
<p><INPUT TYPE=CHECKBOX id="terms_and_conditions" NAME="terms_and_conditions" /> I agree that Problemio.com is not responsible or liable for anything that happens during any of the projects started on the site.</p>
<p>
<p id="terms_and_conditions_error" style="display:none;">
<span class="error">You must agree to the terms and conditions</span>
</p>
<input type="submit" class="button" value="Create Profile" />
</p>
</form>
</div>
If anyone knows why this does not work in IE, please help!! :) Its a bug that was discovered on the live site, and people are not able to make accounts if they are on IE.

Well, you're getting 3 errors in the Firebug console:
showtip is not defined hidetip is not defined terms_and_conditions is
not defined
The last one is a problem in problemio.js on line 699.
Stop those errors and it might work...