Help Needed in Javascript/Ajax

[anujmadaan]

Hello everyone. I am building a web application having various tables and 4-5option buttons in each table. When user check on one of these option buttons then the option is saved at server.

I want whenever user returns the option marked by him earlier should be preloaded. For example if user marks option 'a' to Q1, then option 'a' of Q1 should be checked automatically(on loading of page).

Here's the code of how table and options were made--

<table width="891" cellspacing='5' id = "1" style='font-family:verdana, Times, serif; font-size:11pt;text-align:justify;'>
              <tr>
                <td  width="877" colspan="2" ><b>Q 1. </b>&nbsp;Consider four digit numbers for which the first two digits are equal and the last two digits are also equal. How many such 
                  numbers are perfect squares?</td>
      </tr>
         
              <tr> 
                <td style='display:inline;' valign='top'>
                
                <b>
                  
              <input name='opt0' type='radio' id='opt0' onClick=" processRadio(1,'a')" value='a' >  a)</b>&nbsp;&nbsp;2</td>
              </tr>
              <tr>
                <td style='display:inline;' valign='top'><b>
                  <input type='radio' id='opt1' name='opt0' value='b' onClick="processRadio(1,'b')" >
                b)</b>&nbsp;&nbsp;4</td>
              </tr>
              <tr>
                <td style='display:inline;' valign='top'><input type='radio' id='opt2' name='opt0' value='c' onClick="processRadio(1,'c')" >
                  <b>c)</b>&nbsp;&nbsp;0</td>
              </tr>
              <tr>
                <td style='display:inline;' valign='top'><input type='radio' id='opt3' name='opt0' value='d' onClick="processRadio(1,'d')" >
                  <b>d)</b>&nbsp;&nbsp;1</td>
              </tr>
              <tr>
                <td style='display:inline;' valign='top'><input type='radio' id='opt4' name='opt0' value='e' onClick="processRadio(1,'e')" >
                  <b>e)</b>&nbsp;&nbsp;3</td>
              </tr>
    </table>

[SikoSoft]

Well, typically this sort of thing is usually best left processed on the server-side, using a language like PHP as the page's data itself is generated. Are your pages even in PHP, Perl or some other sort of server-side dynamic language?

If they are, then you basically could make a special variable for each different option you have, which will either have a value of null (nothing) or the HTML code to tick the radio field... For example, if the actual form page(s) themselves were in PHP you could do:

$opt0_e = '';
if ($database_opt0_e == 'e')
{
$opt0_e = " selected='selected'";
}
<input type='radio' id='opt4' name='opt0' value='e' onClick="processRadio(1,'e')"$opt0_e >

But like I said, this is just a server-side approach. If you are insist on doing things without the use of a server-side processor for the form page, then you would basically need to do something along this line:

1) after the page is finished loading (perhaps in your document's head, with jQuery's onload/onready method) make an AJAX request to a page which will retrieve nothing but the data related to what the current database values are - I would suggest having this dynamic page generating XML.

2) run through a javascript loop through all the different radio fields you have and tick the appropriate field based on the XML value retrieved from the database.

Hypothetically, let's assume that you have an AJAX request to a URL like mySettings.php - this URL generates dynamic XML, which could have a structure like this:

<?xml version='1.0' encoding='UTF-8'?>
<myValues>
<option0>c</option0>
<option1>a</option0>
</myvalues>

Your XML could look like anything else (or you could even use JSON for that matter), but that's just an idea.

Then in your document's head, you could use code like this (assuming you are using jQuery - otherwise it might take a lot more code):

$(
function ()
	{
	$.get
		(
		'mySettings.php',
		null,
		function (xml)
			{
			for (var q = 0; q < numberOfQuestions; q++)
				{
				// retrieve selected value for this question:
				var selectedValue = $(xml).find('option'+q).text();
				// now, tick the appropriate radio button:
				$('#opt'+selectedValue).attr('selected', 'selected');
				}
			},
		'xml'
		);
	}
);
</script>

Thus, if you used this code here, you would need to assign IDs to your radio buttons a little different - like instead of giving the ID "opt4", you would write the ID as "opte" (the e is the value of the field, which is what will be saved to the database).

You will also want to assign IDs differently anyhow, since when you have more than one question, the option IDs will collide which will cause problems and technically isn't permitted anyhow.

Hope this at least gives you a rough start - if you need more specific info, let us know exactly what sort of approach you are now aiming to do. In any event, it seems quite probable that you will pretty much be using some sort of server-side scripting (whether it handles the pre-ticking itself, or generating the XML of the selected values). I'd go with the first approach though and just make your form a php page.