6 replies to this topic

[bedelc]

Hello,

I am trying to create a form using PHP. I am new to AJAX, but was told it is where I would need to go for the answer to my question. In my form there are the standard input types and stuff, but what I am trying to do is create a question using a yes/no radio button, that when yes is given, nothing happens, but when no is given, a new series of questions will appear that will then be added to my form and upon submitting all data will be added to my database. I hope that made sense.

Thanks,
B

[Demonslay]

Actually from your description, technically you don't need AJAX, unless there is something in how the new 'series of questions' is determined. AJAX (in a nutshell throwing technicalities aside) is when you send a request to a server using JavaScript, and get a response without reloading the page. What you are looking for is a simple event to be provoked when the 'No' radio button is selected.

I'm a bit rusty on my JavaScript, but this should give you a basic idea in pseudo-code atleast. I usually use the Prototype Framework for JavaScript, but you can figure out the equivalent with your style for the selectors I used.

<form method="post">
Question1: Meow? <input type="radio" name="question1" value="yes" onclick="$('moreQuestions').hide()" /> Yes
<input type="radio" name="question1" value="no" onclick="$('moreQuestions').show()" /> No
<div id="moreQuestions">
Question: What could be better than meow? <input type="text" name="question2" value="NOTHING!" />
</div>
</form>

What that does is when the radio button for Yes is clicked, the onclick handler executes code that hides the div tag that holds the extra questions. When the No radio button is clicked, the div is shown. Now when you process the code on your back-end, I assume when the 'Yes' is selected, the extra data is not even parsed, so you don't need to worry about clearing it when hiding the div or anything unless you want to.

I don't remember the equivalent of pure JavaScript for Prototype's $() operator, its just so darn handy.

Hope that helps.

Edited by Demonslay, 04 October 2009 - 12:28 AM.

[bedelc]

Thank you so much, this looks like exactly what I needed, but not working for me. I have added the code, and added the prototype.js file, but it doesnt seem to work. the div just always shows up. I tried setting the "y" as checked, but that doesnt seem to help either. Do i need to change something in prototype to get it to recognize what I am trying to do?

This is the page, if that helps any.
http://www.unionstat.../online_reg.php

[bedelc]

well, i downloaded it again, but it was the same one I had there, so no change. does it show up as different than you were expecting?

[Demonslay]

Whatever that was you gave a link for Adam was not the script referred in the page, he has the correct Prototype file in 'script/prototype.js', the key thing being its not 'scripts'.

Anyways, I found the real way to do what I was thinking of in pure JavaScript without a framework, lol, so easy can't believe I didn't remember. Here's the fixed code with no dependencies.

<form method="post">
Question1: Meow? <input type="radio" name="question1" value="yes" onclick="document.getElementById('moreQuestions').style.visibility='hidden'" /> Yes
<input type="radio" name="question1" value="no" onclick="document.getElementById('moreQuestions').style.visibility='visible'" /> No
<div id="moreQuestions">
Question: What could be better than meow? <input type="text" name="question2" value="NOTHING!" />
</div>
</form>

[bedelc]

Still not working, I hope I am not doing something wrong. Here is the code for my form. Is there some way to make it onload or something? rather than onclick for the "y" value, but onlick just for the "n" value? I am sorry I sound like such a tool, i am just not very familiar with js.

<form name="register" action="online_reg.php" onsubmit="return ValidateRequiredFields();" method=POST></td></tr>
<input type="hidden" name="action" value="add_user">
<tr><td>First Name:* </td><td><input type="text" name="first" width="25"></td><td>Last Name:* </td><td><input type="text" name="last" width="25"></td></tr>
<tr><td>Address:* </td><td><input type="text" name="address" width="25"></td><td>City:* </td><td><input type="text" name="city" width="25"></td></tr>
<tr><td>Zipcode:* </td><td><input type="text" name="zipcode" width="25"></td><td>Email:* </td><td><input type="text" name="email" width="25"></td></tr>
<tr><td>Primary Telephone:* </td><td><input type="text" name="telephone" width="25"></td><td>Additional Telephone: </td><td><input type="text" name="mobile" width="25"></td></tr>
<tr><td>Occupation: </td><td><input type="text" name="occupation" width="25"></td><td>Previous Volunteer: </td><td>Yes<input type="radio" name="prev" value="1">No<input type="radio" name="prev" value="0"></td></tr>
<tr><td>Skills: </td><td colspan="3"><textarea name="skills" rows="4" cols="40"></textarea></td></tr>
<tr><td>Planned Arrival Time: </td><td><select name="time"><option>9:00am</option><option>9:30am</option><option>10:00am</option><option>10:15am</option><option>10:30am</option><option>10:45am</option><option>11:00am</option><option>11:15am</option><option>11:30am</option><option>11:45am</option><option>12:00am</option><option>12:15pm</option><option>12:30pm</option><option>12:45pm</option><option>1:00pm</option><option>1:15am</option><option>1:30pm</option><option>1:45pm</option><option>2:00pm</option><option>2:15pm</option></select></td><td>Today's Date: </td><td><? echo $day; ?></td></tr>
<tr><td colspan="2" align="left">Would you like additional information about volunteer or donation opportunities for Union Station?</td><td><input type="radio" name="info" value="y" checked   >Yes<input type="radio" name="info" value="n">No</td></tr>
<tr><td colspan="2">Are you over 18 years of age or older?</td><td><input type="radio" name="age" value="y" onclick="document.getElementById('moreQuestions').style.visibility='hidden'" />Yes<input type="radio" name="age" value="n"  onclick="document.getElementById('moreQuestions').style.visibility='visible'" />No</td></tr>
<div id="moreQuestions">
<tr><td colspan="2">Do you have your parents permission to take part in this event?</td><td><input type="checkbox" name="perm" value="Y" />Yes</td>
</div>
<tr><td colspan="2">Are you interested in volunteering for Thanksgiving or Christmas?</td><td colspan="2"><input type="radio" name="event" value="1" checked>Thanksgiving<input type="radio" name="event" value="2">Christmas<input type="radio" name="event" value="3">Both</td></tr>
<tr><td colspan="4"><center><input type="submit" name="Submit" value="Submit"></center></form>

Demonslay, on Oct 4 2009, 04:11 PM, said:

Whatever that was you gave a link for Adam was not the script referred in the page, he has the correct Prototype file in 'script/prototype.js', the key thing being its not 'scripts'.

Anyways, I found the real way to do what I was thinking of in pure JavaScript without a framework, lol, so easy can't believe I didn't remember. Here's the fixed code with no dependencies.

<form method="post">
Question1: Meow? <input type="radio" name="question1" value="yes" onclick="document.getElementById('moreQuestions').style.visibility='hidden'" /> Yes
<input type="radio" name="question1" value="no" onclick="document.getElementById('moreQuestions').style.visibility='visible'" /> No
<div id="moreQuestions">
Question: What could be better than meow? <input type="text" name="question2" value="NOTHING!" />
</div>
</form>

[Demonslay]

First off, you can't really put it into 'onload', as it is an event you want invoked whenever the user clicks on the elements, not something you want performed once. You could, however, attach an event handler of a framework at the onload if you wanted it handled that way, but really there is no need for something simple as this unless you had more elaborate things planned.

Maybe I should have explained the code more, I probably assumed you had a little more basic knowledge of JavaScript, sorry, I tend to do that alot.

document.getElementByID('idOfElement')

As the name of the function states, it grabs the element in the document which has the id of what is passed, so here it would be whatever has 'id="idOfElement"' as an attribute. It returns this, so in the example code I gave you, I accessed the CSS style element of the DOMObject returned. From there, the style object can be used as you would anything CSS, so I altered the 'visibility' to change from visible to hidden, depending on which radio button you clicked.

Ok, with that aside, I've taken a look at your page. The main issue I saw was you are missing an ending tag for your table row that the div is in, but that shouldn't break the functionality. I've tested the code myself and it works fine with one error in the error console stating that 'default' is not a value for the CSS display property. Looking into it, you should make it 'display:inline', as that is the default. Should work just fine, I've tested it myself with no problems, though I do see it not working on your source site.