Get value of radio button

[helenp]

Think this is the last problem....

The validation is not done correctly and loos like its due to that I dont get the value of the radiobutton.
I have a radiobutton with 2 values.

This does not work:

 percentage = document.solicitud.percentage.checked.value();

This works but only if I select the firs button

percentage = document.solicitud.percentage[0].value;

This does not work:

for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { val = document.solicitud.percentage[i].value; // stop searching as soon as one is found
} }
alert( "val = " + val );

This does not work either....

function getvaulue() {
theForm = document.getElementById('solicitud');
radiopercentage = theForm.elements['percentage'];
for (var i=0; i < radiopercentage.length; i++) {
if (radiopercentage[i].checked) radiopercentage[i].value;
}
}

This does not work either:

if (document.solicitud.percentage[i].checked == true ){
percentage = document.solicitud.percentage.value;}

Dont know what to try anymore.
I have tried all this inside this funcion:

function enviarDatosSolicitud(){

divResultado.style.display = "block";

 propiedad = document.solicitud.propiedad.value;
 terms = document.solicitud.terms.value;
 day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value;
 day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value;
 month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value;
 month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

I donīt want to ask however cant get it to work

[helenp]

Dont know what I did,
however finally this worked:

for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { percentage = document.solicitud.percentage[i].value; // stop searching as soon as one is found
} }

And I have it inside the function where the rest of the vars are declared:

function enviarDatosSolicitud(){
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block";
propiedad = document.solicitud.propiedad.value;
terms = document.solicitud.propiedad.value;
for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { percentage = document.solicitud.percentage[i].value; // stop searching as soon as one is found
} }
day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value;
day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value;
month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value;
month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

[helenp]

Am going to go mad!
Last night it worked or at least I thought it did.
I have a php file for php only and one for javascript enabled wich are equal except in of the responses.

The php script validates that all fields are filt in
and the php script starts with:

if (!empty($percentage) && !empty($terms)) {
if ($salida > $llegada){

If these values are missing on the form an error is showned by the php, and should be showned by the php called by Ajax.
However when using Ajax the error is not shown.

And the only reason I have is that I dont get the vars for percentage and terms correctly to the Ajaxfile.
Those fields are radiobutton and a checkbox.
However its very strange, if I submit the form without filling in the fields nothing happens (an error should be shown) but if I fill in the fields and print out the vars showing problem they are printed out....

This is where I declare the vars in the Ajaxfile:

function enviarDatosSolicitud(){
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block";
propiedad = document.solicitud.propiedad.value;
terms = document.solicitud.terms.value;
for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { percentage = document.solicitud.percentage[i].value; // stop searching as soon as one is found
} }
day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value;
day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value;
month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value;
month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

This is not correct I think where terms is a checkbos and percentage a radiobutton:

terms = document.solicitud.terms.value;
for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { percentage = document.solicitud.percentage[i].value; // stop searching as soon as one is found
} }

[helenp]

Tired to trying to get the values of the radiobuttons, and thinking of not using the php vars in the ajaxversiona and validate with javascript directly.

Maybe its possible to do something like this:

<script type="text/javascript">
function checkpayment() {
if ( ( document.percentage.s[0].checked == false ) && ( document.percentage.s[1].checked == false ) )
{ alert ( "Please choose payment option" );
return false
}
else {
return true;
}
}

function checkterms() {
if (document.getElementById('terms').checked == false) {
alert ("You didn't agree to the terms");
return false;
} else {
return true;
}
}



</script>

And instead of the Alerts, add the errors into the Ajaxdocument and display as divResultado.innerHTML = ajax.responseText

Is this possible?

[daveVk]

Please show HTML involved

[helenp]

This is the html.
I think the checkbox sends the value terms even if its not checked:

<form name="solicitud" class="formenquirer" id="solicitud" action="page.php?propiedad=<?php echo $propiedad; ?>" method="post">
 <input name="percentage" class="percentage" type="radio" value="25">25% as a deposit and balance 8 weeks before arrival <br>
<input name="percentage" class="percentage" type="radio" value="50">50% as a deposit and balance on arrival</p>
<input name="terms" type="checkbox" title="Please accept terms" value="terms">
<input class="boton roundedcorner border" size="10" type="submit" onClick="enviarDatosSolicitud();" name="enviar" id="enviar" value="Book Now">

[Fotiman]

You don't want to handle this in the onClick of the submit button, you want to handle it in the form onsubmit handler so you can prevent the form from submitting (if you're submitting it via AJAX instead). I suspect the reason why you're seeing inconsistent results is because you have a race condition between the onclick of the submit button and the onsubmit of the form, where the form is continuing the submit process (thus trashing your existing document).

So you need something more like this:
<form name="solicitud" class="formenquirer" id="solicitud" action="page.php?propiedad=<?php echo $propiedad; ?>" method="post" onsubmit="return enviarDatosSolicitud();">
<input name="percentage" class="percentage" type="radio" value="25">25% as a deposit and balance 8 weeks before arrival <br>
<input name="percentage" class="percentage" type="radio" value="50">50% as a deposit and balance on arrival</p>
<input name="terms" type="checkbox" title="Please accept terms" value="terms">
<input class="boton roundedcorner border" size="10" type="submit" name="enviar" id="enviar" value="Book Now">

And then in your enviarDatosSolicitud method don't forget to declare variables with "var", otherwise you're creating global variables which is sloppy and dangerous. Something like this:

function enviarDatosSolicitud(){
  var i,
    divResultado = document.getElementById('resultado'),
    f = document.solicitud,
    propiedad = f.propiedad.value,
    terms = f.terms.value,
    percentage = null,
    day = f.day.options[f.day.selectedIndex].value,
    day2 = f.day2.options[f.day2.selectedIndex].value,
    month = f.month.options[f.month.selectedIndex].value,
    month2 = f.month2.options[f.month2.selectedIndex].value; 

  divResultado.style.display = "block";
  for (i = 0; i < f.percentage.length; i++ ) {
    if (f.percentage[i].checked) {
      percentage = f.percentage[i].value;
      break; // stop searching as soon as one is found
    }
  }
  // ... whatever you need to do with these values
  return false; // prevent form from submitting
}

[helenp]

You don't want to handle this in the onClick of the submit button, you want to handle it in the form onsubmit handler so you can prevent the form from submitting (if you're submitting it via AJAX instead). I suspect the reason why you're seeing inconsistent results is because you have a race condition between the onclick of the submit button and the onsubmit of the form, where the form is continuing the submit process (thus trashing your existing document).

Thanks,
Sorry, I took sometime, however has some kind of allergy to these pages after weeks of improvement.
Sometimes the best is to take a break.

Actually the onclick is no problem as It also works without javascript. If javascript is disabled it works the same but using php wich refreshes the page.
Didnīt post I have this to make it work with both php and javascript:
<script type="text/javascript">
//Going to hide the formbutton and text since the above will work.
document.getElementById('enviar').type = 'button';
</script>
The scripts works perfectly if I dont use the vars terms and percentage with Ajax, however I need to validate them in some way.
In my php I have this validation and works perfect with javascript disabled:
if (!empty($percentage) && !empty($terms)) {

do.......
ends with the error wich are printed on screen if form incorrectly filt in:

else { echo "Please fill in bookingoptions choosen (25% or 50%) and accept booking terms and conditions to proceed with the booking."; }
}

So the validation of the form is done with php.
The problem is with the var terms wich is a checkbox and with percentage wich is a radiobutton.
This is what happens:

1. If I donīt fill in the form at all and clic on submit nothing happens, the errormessage above in the php should be shown as the vars terms and percentages are empty, but it doesnīt.

2. If I check the checkbox and the radiobutton then the script works, and print out the value of the boxes.

3. If I check the radiobutton (percentage) but leave unchecked the checkbutton (terms) and click on submit the script is ejecuted, but does not fire the error, it just ignore the var terms
Conclusión:
The radiobutton percentage looks to work ok.
I think the problem is with the checkbox.
It does not check if the var terms is checked.
Suppose have to do something similar as with the radiobutton, check if checked.

Anyway I tried what you posted and it does not work either.

[helenp]

This does not work:
if ( ( document.solicitud.terms.checked == true ) )
{ terms = document.solicitud.terms.value;
}

Am I wrong in my thought that I should only get the value of vars terms and percentage if they are checked?
Because if they are not checked I want the value of the vars empty so the php validation is done correctly.
Maybe I should add an else and declare the var null, or is there something like empty in ajax?

[helenp]

I had it,
this works, however displaying an annoying alert.
Is there a way to change the alert to be displayed inside the dive instead of a pupup?
The Ajax code complete:

function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function dataChanged() {
document.getElementById("resultado").style.display = "none";
}
function enviarDatosSolicitud(){
if ( ( document.solicitud.terms.checked == false ) )
    { alert ( "Please accept terms" );
}
if ( ( document.solicitud.percentage[0].checked == false ) && ( document.solicitud.percentage[1].checked == false ) )
    { alert ( "Please choose payment option" );
}
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block";
propiedad = document.solicitud.propiedad.value;
terms = document.solicitud.terms.value;
for( i = 0; i < document.solicitud.percentage.length; i++ )
{
if( document.solicitud.percentage[i].checked == true ) { percentage = document.solicitud.percentage[i].value; // stop searching as soon as one is found
}
 }
day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value;
day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value;
month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value;
month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

ajax=objetoAjax();

ajax.open("POST", "page.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
if ( ajax.responseText === "Loading, please wait" ) {
window.location='page.php';
}
 else {
divResultado.innerHTML = ajax.responseText
LimpiarCampos();
}
} 
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("propiedad="+propiedad+"&enviar="+enviar+"&day="+day+"&day2="+day2+"&month="+month+"&month2="+month2+"&percentage="+percentage+"&terms="+terms+"")
} 

[Fotiman]

document.getElementById('enviar').type = 'button';

That's a nifty trick. :)

However, what if the user hits the Enter key instead of clicking the button? When a text input has focus, the Enter key will trigger the form's default submit action, which is why it's important to put all validation in the form's onsubmit handler instead of in a button's click handler.

[Fotiman]

Maybe I should add an else and declare the var null, or is there something like empty in ajax?

Yes, similar to what I did in my example, which was to initialize it to null, and then only update it if it's checked.

[Fotiman]

function enviarDatosSolicitud() {
  var divResultado = document.getElementById('resultado'),
    valid = true,
    invalidStr = '';

  if (!document.solicitud.terms.checked) {
    invalidStr += "<div>Please accept terms.<\/div>";
    valid = false;
  }

  if ((!document.solicitud.percentage[0].checked) && 
    (!document.solicitud.percentage[1].checked)) {
    invalidStr += "<div>Please choose payment option.<\/div>";
    valid = false;
  }

  divResultado.style.display = "block";
  if (!valid) {
    divResultado.innerHTML = invalidStr;
    return; // stop right here
  }
 
  var propiedad = document.solicitud.propiedad.value,
    terms = document.solicitud.terms.value,
    day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value,
    day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value,
    month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value,
    month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

  for (i = 0; i < document.solicitud.percentage.length; i++) {
    if (document.solicitud.percentage[i].checked) {
      percentage = document.solicitud.percentage[i].value;
      break; // stop searching as soon as one is found
    }
  }

  ajax = objetoAjax();

  ajax.open("POST", "page.php", true);
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
      if (ajax.responseText === "Loading, please wait") {
        window.location = 'page.php';
      } else {
        divResultado.innerHTML = ajax.responseText
        LimpiarCampos();
      }
    }
  }
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.send("propiedad=" + propiedad + "&enviar=" + enviar + "&day=" + day + 
       "&day2=" + day2 + "&month=" + month + "&month2=" + month2 + 
       "&percentage=" + percentage + "&terms=" + terms + "");
}

[helenp]

Thanks a lot.
That works, with onclick but not with onsubmit

function enviarDatosSolicitud() {
var divResultado = document.getElementById('resultado'),
valid = true,
invalidStr = '';

if (!document.solicitud.terms.checked) {
invalidStr += "<div>Please accept terms.<\/div>";
valid = false;
}

if ((!document.solicitud.percentage[0].checked) &&
(!document.solicitud.percentage[1].checked)) {
invalidStr += "<div>Please choose payment option.<\/div>";
valid = false;
}

divResultado.style.display = "block";
if (!valid) {
divResultado.innerHTML = invalidStr;
etc....

However, what if the user hits the Enter key instead of
clicking the button?

Didnīt thought about that.
Anyway I tried before and tried again to use onsubmit but it does not work.
With the new code onsubmit works but only the validation for the 2 vars in question

Yes, similar to what I did in my example, which was to initialize it to null, and then only update it if it's checked.

I tried to but didnīt manage :(

[helenp]

Trying again with the onsubmit.
Using this in the form element:
onsubmit="return enviarDatosSolicitud();"
The validation for vars terms and percentage works, however text only stays some seconds, nothing else works.
without the return just the same:
onsubmit="enviarDatosSolicitud();"
I deleted the javascript to convert the sumbit button into button.

<form name="solicitud" class="formenquirer" id="solicitud" action="page.php?propiedad=<?php echo $propiedad; ?>" onsubmit="return enviarDatosSolicitud();" method="post">
<input type="hidden" id="propiedad" name="propiedad" value="<?php print($propiedad); ?>">
<p>Arrival: <?php include '../includes/day.php'; ?><?php include '../includes/month.php'; ?>
Departure: <?php include '../includes/day2.php'; ?><?php include '../includes/month2.php'; ?> 
 <input name="percentage" class="percentage" type="radio" value="25">25% as a deposit and balance 8 weeks before arrival <br>
<input name="percentage" class="percentage" type="radio" value="50">50% as a deposit and balance on arrival
<input name="terms" type="checkbox" title="Please accept terms" value="terms">
<input class="boton roundedcorner border" size="10" type="submit" name="enviar" id="enviar" value="Book Now">

<div id="resultado"></div> 
</form>
<script type="text/javascript" src="/ajax.js"></script>

[Fotiman]

Using this in the form element:
onsubmit="return enviarDatosSolicitud();"

Make sure your enviarDatosSolicitud function returns false (to prevent the form from submitting), as updated here:

function enviarDatosSolicitud() {
  var divResultado = document.getElementById('resultado'),
    valid = true,
    invalidStr = '';

  if (!document.solicitud.terms.checked) {
    invalidStr += "<div>Please accept terms.<\/div>";
    valid = false;
  }

  if ((!document.solicitud.percentage[0].checked) &&
    (!document.solicitud.percentage[1].checked)) {
    invalidStr += "<div>Please choose payment option.<\/div>";
    valid = false;
  }

  divResultado.style.display = "block";
  if (!valid) {
    divResultado.innerHTML = invalidStr;
    return false; // stop right here
  }

  var propiedad = document.solicitud.propiedad.value,
    terms = document.solicitud.terms.value,
    day = document.solicitud.day.options[document.solicitud.day.selectedIndex].value,
    day2 = document.solicitud.day2.options[document.solicitud.day2.selectedIndex].value,
    month = document.solicitud.month.options[document.solicitud.month.selectedIndex].value,
    month2 = document.solicitud.month2.options[document.solicitud.month2.selectedIndex].value;

  for (i = 0; i < document.solicitud.percentage.length; i++) {
    if (document.solicitud.percentage[i].checked) {
      percentage = document.solicitud.percentage[i].value;
      break; // stop searching as soon as one is found
    }
  }

  ajax = objetoAjax();

  ajax.open("POST", "page.php", true);
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
      if (ajax.responseText === "Loading, please wait") {
        window.location = 'page.php';
      } else {
        divResultado.innerHTML = ajax.responseText
        LimpiarCampos();
      }
    }
  }
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.send("propiedad=" + propiedad + "&enviar=" + enviar + "&day=" + day +
    "&day2=" + day2 + "&month=" + month + "&month2=" + month2 +
    "&percentage=" + percentage + "&terms=" + terms + "");
  return false
}

[helenp]

Make sure your enviarDatosSolicitud function returns false (to prevent the form from submitting), as updated here:

Thanks,
I tried with return false on the "stop right here" and did not work, however didnt add the one I can see at end of your updated version.
Will try in an hour and let you know.
Doing dinner, thanks again.

[helenp]

Make sure your enviarDatosSolicitud function returns false (to prevent the form from submitting), as updated here:

Like a charm adding the second return false.
Many thanks!

[Fotiman]

:)

[helenp]

Celebrated to quickly :(
Why does things ever end?

Just checked with the ie version I have that is nš11
and the validation works, and there it stops to work, the ajax.open looks like its not executed as the php file is opened and ejexuted instead of the ajax file....

Also am adding the update to the same file but in another language and everything works except the redirection, and as far as I am see the script is equal....must be something stupid I cant see.
But the internet explorer thing.....
Am searching for a bug.
There are no bugs in firebug, only the bug saying LimpiarCampos is not defined (clean fields)
I donwloaded Fiddler, but does not understand much of it.

[helenp]

Puf, it works now,
the var for the submit button was undefined...
had to declare that var to make it work in ie.