Web Hosting Talk






PDA

View Full Version : AJAX question (forms)

synchronized
02-21-2007, 06:59 PM
Hello,

Thanks for taking the time to look at my question.

I use ajax to create a dynamic form:
step 1) form has some <input type=radio> and <input type=checkbox> fields to start with.
step 2) this value is sent via ajax to somefile.php file. That somefile.php file generates a new part of the form (containing <input type=radio>, <input type=checkbox> and <inpu typet=text> fields) > so the user will fill in more variables than he started with.

When I submit this form (<input type=submit>, no javascript involved), only the original form variables are transferred.


I use a basic javascript to transfer data between the form & somefile.php

<script LANGUAGE="javascript" TYPE="text/javascript">
<!--
//Browser Support Code
function showfieldsbyclass(theclass,initiate){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
ajaxclass.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET', 're_ajax.php?function=showfieldsbyclass&class='+theclass+'&initiate='+initiate, true);
ajaxRequest.send(null);
}


//-->
</script>

and this is the javascript that I use: onclick=\"javascript:showfieldsbyclass('0','');\"

So the ajax to build my additional form fields works great but the problem is that only the original forms variables/values are sent when I press the submit button.

o jeah.. one more thing: The new form variables/values are transmitted on IE, but not on firefox!

Thanks,
Cedric
Patiek
02-21-2007, 07:44 PM
I am not sure about using AJAX as well as how the browsers handled transfered data.

However, you may have better luck with this problem using javascript to show / hide elements of the form depending on questions (rather than fetching).

For example (the javascript):

<script language="JavaScript" type="text/javascript">
function showDiv(id)
{
divObject = document.getElementById(id);
divObject.style.display = "block";
}

function hideDiv(id)
{
divObject = document.getElementById(id);
divObject.style.display = "none";
}

function showhideDiv(id)
{
if (document.getElementById(id).style.display == "none")
showDiv(id);
else
hideDiv(id);
}
</script>



And then (for example):

Do you like the color blue? <input type="radio" name="colorblue" value="1" onClick="javascript: showDiv('yesAnswer1'); hideDiv('noAnswer1');"> Yes <input type="radio" name="colorblue" value="0" onClick="javascript: showDiv('noAnswer1'); hideDiv('yesAnswer1');">
<div id="yesAnswer1">
... yes answer elements....
</div>
<div id="noAnswer1">
... no answer elements....
</div>


However, that code is particularly nasty as you have to:
1) Generate the actual code (or manually write it). If you know some scripting language such as PHP you could automate this process.
2) You have to build into the script that is accepting the results the ability to recognize the values and process accordingly. In other words, in the example above it would have to see element colorblue and act on the other elements according to colorblue's value.

I would try fixing your script (if possible) first... but if nothing else works you can use something similar to the above code. Hopefully someone else can offer some insight.
synchronized
02-22-2007, 12:50 PM
The php script receives data from a mysql database, so I don't think the previous solution is suited for my problem
synchronized
02-22-2007, 03:40 PM
I'm going to repost this with all of my code!

Thanks for taking the time to look at my question.

I use ajax to create a dynamic form. Example: cedriccolpaert.be/ajaxtest/

When I submit this form, only the original form variables/values are transferred.index.html
<html><head><title>test</title></head><body>
<script LANGUAGE="javascript" TYPE="text/javascript">
<!--
//Browser Support Code
function showareas(cat){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
ajaxareas.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET', 'ajax.php?cat='+cat, true);
ajaxRequest.send(null);
}
//-->
</script>

<table cellpadding="1" cellspacing="1">
<FORM METHOD=POST ACTION="printvariables.php">
<tr><td><input type="radio" name="category" value="category_one" onclick="javascript:showareas('category_one');" checked>category one</td></Tr>
<tr><td><input type="radio" name="category" value="category_two" onclick="javascript:showareas('category_two');">category two</td></Tr>
<tr><td><input type="radio" name="category" value="category_three" onclick="javascript:showareas('category_three');">category three</td></Tr>
<tr><td>&nbsp;</td></tr>
<tr><td ID="ajaxareas" align="left"> </td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td><input type="submit" value="submit"></td></tr>
</FORM>
</table>



ajax.php
<?
if ($_GET['cat'] == 'category_one') {
echo '
variable category_one_var: <input type="text" name="category_one_var"> <br>
variable category_one_var2: <input type="checkbox" name="category_one_var2" value="some value"> <br>
';
}
elseif ($_GET['cat'] == 'category_two') {
echo '
variable category_two_var: <input type="text" name="category_two_var"> <br>
variable category_two_var2: <input type="checkbox" name="category_two_var2" value="some value"> <br>
';
}
elseif ($_GET['cat'] == 'category_three') {
echo '
variable category_three_var: <input type="text" name="category_three_var"> <br>
variable category_three_var2: <input type="checkbox" name="category_three_var2" value="some value"> <br>
';
}
?>



printvariables.php
<?
print_r ($_REQUEST);
?>
o jeah.. one more thing: The new form variables/values are transmitted on IE, but not on firefox!

Thanks,
Cedric