CODEWITHSUNDEEP
javascriptphphttp-redirectradio-buttonforms
TheNoobUser
TheNoobUser

Reputation: 404

redirecting with javascript if a radiobox is checked

I'm having some issues with a js script that I made (probably because is not the right way but i came up with this idea). Basically I have a form with some radio buttons in it. Yes or No

<form action="#" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>

Now I made this JavaScript script because I'd like to stop the user if none radio button is selected.

    function check() {
    if (document.getElementById('effettuato').checked) {
        window.location = 'processiorari.php';
    }
    else if (document.getElementById('noneffettuato').checked) {
        window.location = 'processiorari.php';
    }
    else {
        alert('Seleziona tutti i campi per continuare!');
        return false;
    }
}

If he has selected an option I'd like to redirect him to another page called

processorari.php

The page where those line are written is

orari.php

Any help? I'm just doing the redirect wrong or the entire concept is wrong? All the files are in the same folder and I'm running everything using xampp

Upvotes: 0

Views: 274

Answers (5)

Love Buddha
Love Buddha

Reputation: 95

To check which check box is checked and redirect page accordingly:

  $(document).ready(function() {

     $('#mychckbx1').prop('checked') ?  window.location.href = 'page1.php' : false;

     $('#mychckbx2').prop('checked') ?  window.location.href = 'page2.php' : false;

  });

Upvotes: 0

ACD
ACD

Reputation: 1431

You can use required="required" in the fields and set the form action to the page you want to redirect.

<form action="processorari.php" method="POST">
  <input type="radio" id="effettuato" name="sicep" value="Effettuato" required="required" />Effettuato <br/>
  <input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" required="required" />Non Effettuato <br/>
  <input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>

Upvotes: 3

TheNoobUser
TheNoobUser

Reputation: 404

I have no clue if this is the right way to do it but somehow this work just fine

    function check() {
    if (document.getElementById('effettuato').checked) {
        return true;
    }
    else if (document.getElementById('noneffettuato').checked) {
        return true;
    }
    else {
        alert('Non puoi lasciare un campo in bianco!');
        return false;
    }
}

and i leave in my form the action just like this

<form action="processorari.php" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>

Upvotes: 0

Jaquarh
Jaquarh

Reputation: 6693

You can use a click event listener to achieve this. When the button is clicked, it checks if the radio button is checked, if it is then it'll redirect using window.location.href. There is no need to use the submit.

document.getElementById("submit-btn").addEventListener("click", function() {
  if(document.getElementById('effettuato').checked) {
    window.location.href = 'processiorari.php';
  } else if(document.getElementById('noneffettuato').checked) {
    window.location.href = 'processiorari.php';
  } else {
    alert('Seleziona tutti i campi per continuare!');
  }
});
<form method="POST" action="#">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" id="submit-btn" type="button" name="submit" value="Invia" button style="height:50px;width:150px">
</form>

Upvotes: 2

Kyle
Kyle

Reputation: 735

The problem is that you are calling the check() function only when the form is submitted. Other than that I can't see anything wrong.

It will work if you change onsubmit to onchange like this: 

<form action="#" method="POST" onchange="check()">
    <input type="radio" id="effettuato" name="sicep" value="Effettuato"  />Effettuato <br/>
    <input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
    <input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>

Upvotes: -1

Related Questions