Radiobuttons and AJAX

[sarek]

Hi!

I´m very new to AJAX and would like some help.

I´m trying to do a simple form where I have 2 radiobuttons in a form like this:

[color=brown]<label><input type="radio" name="Script" value="PHP" onclick="talkToServer();"/> PHP</label>
<label><input type="radio" name="Script" value="ASP" onclick="talkToServer();"/> ASP</label>[/color]

In the function talkToServer I´m trying to send the radiobuttons values to Example1.php like this:

[color=brown]var givenValue = document.getElementById("Script").value;
var url = "Example1.php?val=" + escape(givenValue);[/color]

were I try to echo the result.
The problem is that the result is ALWAYS PHP, even though ASP button is checked? Anyone know why?

Thanks in advance
/Sarek

     

[ober]

It's because you're not using an ID for the radio buttons.  You're just using the "name" attribute.  In JavaScript, you must specify the "id" attribute if you plan to use "getElementById" to fetch it's value.  The other way around this would be to use document.insert_your_form_name.Script.value or however you reference the value of a radio button.

Or just give each radio button a unique id and check to see if that radio button is checked or not.

[Zeon]

or:
[code]
<label><input type="radio" name="Script" value="PHP" onclick="talkToServer(this);"/> PHP</label>
<label><input type="radio" name="Script" value="ASP" onclick="talkToServer(this);"/> ASP</label>
[/code]

[code]
function talkToServer(obj){
var givenValue = obj.value
var url = "Example1.php?val=" + escape(givenValue);
// ...
}
[/code]

[sarek]

A million thanks to both of you!
I´ve tried both your example and it works like a charm  :).

[sarek]

Ok, now I came across more problems!

I use the code below to get values from two textfields (name and email) and two radiobuttons were you can vote on your favorite script. Tha values are sent to Example1.php were its echoed back to a div tag in the form that shows the result.

My problem is that I have another set of radiobuttons were you can vote on your favorite operating system. I wanna get the values from these also and send with the submit button. Anyone know how I can do this in the easiest way?

[color=navy]function Submit_form(radioObj){
var radioLength = radioObj.length;
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
var Script=(radioObj[i].value);
var Name = document.getElementById('namn').value;
var Email = document.getElementById('epost').value;
      var url = "Example1.php?script=" + escape(Script) + '&namn=' + escape(Name) + '&epost=' + escape(Email );
      Xml_Http_Object.open("GET", url, true);
      Xml_Http_Object.onreadystatechange = updatePage;
      Xml_Http_Object.send(null);
}}}[/color]

[color=brown]<form name="form1" action="" method="post" >
<label>Namn:<input type="text"  name="name" /></label>
<label>Epost:<input type="text"  name="email" /></label>

<input type="radio" name="f1" value="PHP"  />PHP
<input type="radio" name="f1" value="ASP.NET " />ASP.NET

<input type="radio" name="f2" value="MS Windows"  />MS Windows
<input type="radio" name="f2" value="Linux" />Linux

<input type="button" value="Vote!" class="button" onClick="Submit_form(document.form1.f1);" >
</form>[/color]


Any help appreciated!!!
/Sarek

[ober]

I'm not sure I understand the problem.  You would just use the same method!?

Also, YOU CANNOT USE GETELEMENTBYID UNLESS YOU USE THE ID ATTRIBUTE!

It may work in one browser, but it is NOT cross-browser capable.

[sarek]

[quote author=ober link=topic=121411.msg503100#msg503100 date=1168612521]
I'm not sure I understand the problem.  You would just use the same method!?

Also, YOU CANNOT USE GETELEMENTBYID UNLESS YOU USE THE ID ATTRIBUTE!

It may work in one browser, but it is NOT cross-browser capable.
[/quote]

Ok, I will try to make myself a little clearer.

The form works fine when I press the submit button. The name, email and favorite script values is echoed back from Example1.php and shows correctly in a "result div". But if you look at the submit button, it only catch the value from the radiobuttons named f1.
My question is, is it possible to catch the value from the radiobuttons named f1 AND f2 at the same time? Maybe by changing the code below?

[color=brown]onClick="Submit_form(document.form1.f1);" >[/color]

[ober]

Seperate them with commas.  You could also just grab them from the Submit_form() function.