I am still new at PHP/Javascript/Ajax and am having a very hard time (been going on for weeks) troubleshooting this problem.
My site has a registration to be a member page that requires all fields to be filled out. This is a website for the Cystic Fibrosis community, so there is a section on the form where you choose your relationship to Cystic Fibrosis. (I have it/ Someone I know has it) If you choose I have it, a drop-down box appears and gives you the option Fibro(male) or Cyster(female). If you choose someone I know, a different drop-down opens with various options(aunt, uncle etc.)
I have a myriad of possible errors that can be made. Passwords don’t match, captcha or terms of use not checked/filled out, etc…therefore the page reloads to display the error message. I have put "echo selected" in all of my option values to have the page load the previously selected information as it should. When you choose ‘I have CF’ this is what happens:
When signing up – if I select "I have CF" the first time but forget to fill in "Cyster or Fibro" I get the error message. THEN when I go back and add in Cyster or Fibro, it continues to tell me, that I need to enter my relation to CF, even though it SHOWS in the box that Cyster or Fibro is selected.
If I’m signing up. Have filled in the relation to CF as "I have CF" AND filled in the "Cyster or Fibro" but get ANY error message (wrong email, passwords don’t match etc) the Cyster or Fibro answer falls out (not there) and if I select it again, it will not accept my choice and keeps saying that "you must choose your relation" even though it’s clearly been selected.
Like I said, I’ve been struggling with this for weeks, and as far as I can tell my code looks correct. I’m thinking it has something to do with the Javascript? Here is my code:
(Please let me know if you need surrounding code to help, thank you)
<tr>
<td class="left">
<span style="color:#FF0000;">*</span> Relation to CF:
</td>
<td class="right">
<select name="CFDistance" onchange="switch_distance(this);">
<option value="null" disabled selected>choose one</option>
<option value="self" <?php if($_POST['CFDistance'] == "self") { echo "selected"; } ?>>I have CF</option>
<option value="others" <?php if($_POST['CFDistance'] == "others") { echo "selected"; } ?>>Someone I know has CF</option>
</select>
<div id="self_cf_box" class="signup_dropdowns" style="margin:10px 0px 0px 0px;<?php if($_POST['CFDistance'] != "self") { echo "display:none;"; } ?>">
<span style="color:#FF0000;">*</span> I am a
<select id="RelationToCF_self" name="RelationToCF" <?php if($_POST['CFDistance'] != "self") { echo "display:none;"; } ?>>
<option value="null" disabled selected>choose one</option>
<option value="Fibro" <?php if($_POST['RelationToCF'] == "Fibro") { echo "selected"; } ?>>Fibro (male)</option>
<option value="Cyster" <?php if ($_POST['RelationToCF'] == "Cyster") { echo "selected";} ?>>Cyster (female)</option>
</select>
</div>
Here is the other option (I know someon with CF) that is working just fine:
<div id="others_cf_box" class="signup_dropdowns" style="margin:10px 0px 0px 0px;<?php if($_POST['CFDistance'] != "others") { echo "display:none;"; } ?>">
<span style="color:#FF0000;">*</span> I am this person's
<select id="RelationToCF_others" name="RelationToCF" <?php if($_POST['CFDistance'] != "others") { echo "display:none;"; } ?>>
<option value="null" disabled selected>choose one</option>
<option value="Mom" <?php if ($_POST['RelationToCF'] == "Mom") { echo "selected"; } ?>>Mom</option>
<option value="Dad" <?php if ($_POST['RelationToCF'] == "Dad") { echo "selected"; } ?>>Dad</option>
<option value="Aunt" <?php if ($_POST['RelationToCF'] == "Aunt") { echo "selected"; } ?>>Aunt</option>
<option value="Brother" <?php if ($_POST['RelationToCF'] == "Brother") { echo "selected"; } ?>>Brother</option>
<option value="Caregiver" <?php if ($_POST['RelationToCF'] == "Caregiver") { echo "selected"; } ?>>Caregiver</option>
<option value="Child" <?php if ($_POST['RelationToCF'] == "Child") { echo "selected"; } ?>>Child</option>
<option value="Cousin" <?php if ($_POST['RelationToCF'] == "Cousin") { echo "selected"; } ?>>Cousin</option>
<option value="Friend" <?php if ($_POST['RelationToCF'] == "Friend") { echo "selected"; } ?>>Friend</option>
<option value="Grandma" <?php if ($_POST['RelationToCF'] == "Grandma") { echo "selected"; } ?>>Grandma</option>
<option value="Grandpa" <?php if ($_POST['RelationToCF'] == "Grandpa") { echo "selected"; } ?>>Grandpa</option>
<option value="Guardian" <?php if ($_POST['RelationToCF'] == "Guardian") { echo "selected"; } ?>>Guardian</option>
<option value="Husband" <?php if ($_POST['RelationToCF'] == "Husband") { echo "selected"; } ?>>Husband</option>
<option value="Nephew" <?php if ($_POST['RelationToCF'] == "Nephew") { echo "selected"; } ?>>Nephew</option>
<option value="Niece" <?php if ($_POST['RelationToCF'] == "Niece") { echo "selected"; } ?>>Niece</option>
<option value="Partner" <?php if ($_POST['RelationToCF'] == "Partner") { echo "selected"; } ?>>Partner</option>
<option value="Sister" <?php if ($_POST['RelationToCF'] == "Sister") { echo "selected"; } ?>>Sister</option>
<option value="Uncle" <?php if ($_POST['RelationToCF'] == "Uncle") { echo "selected"; } ?>>Uncle</option>
<option value="Wife" <?php if ($_POST['RelationToCF'] == "Wife") { echo "selected"; } ?>>Wife</option>
</select>
</div>
Here is the JavaScript chunk:
<script type="text/javascript">
function switch_distance(el) {
if(el.value == 'self') {
document.getElementById('self_cf_box').style.display = "block";
document.getElementById('RelationToCF_self').disabled = false;
document.getElementById('others_cf_box').style.display = "none";
document.getElementById('RelationToCF_others').disabled = true;
}else{
document.getElementById('self_cf_box').style.display = "none";
document.getElementById('RelationToCF_self').disabled = true;
document.getElementById('others_cf_box').style.display = "block";
document.getElementById('RelationToCF_others').disabled = false;
}
}
</script>
The best way to accomplish this is to use JavaScript for loading the values and validation. I would use a framework to make it easier.
are a few of the most well known. These have form validators built in along with AJAX functionality to make your like easier.
See http://www.extjs.com/deploy/dev/examples/form/dynamic.html