CODEWITHSUNDEEP
javascripthtmlforms
JAR
JAR

Reputation: 13

Create page redirects on form submission from specific checked radio buttons using javascript

Apologies straight away for this shoddy looking bit of code. I need a bit of help creating page redirects when a form is submitted while a specific combination of radio buttons are selected or checked. The actual form I am working on is set so it needs to be use javascript. I have a simplified example to show what I have done so far. 

<html> First Question?<br>
<label>Yes<input type="radio" name="1" id="1" value="1"><br></label>
<label>No<input type="radio" name="2" id="2" value="2"><br></label>
Second Question?<br>
<label>Yes<input type="radio" name="3" id="3" value="3"><br></label>
<label>No<input type="radio" name="4" id="4" value="4"><br></label>

</br>
<input type="submit">
<script>
    onFormSubmit: (function sum($form) {

        var ab = document.getElementById("1");
        var bc = document.getElementById("2");
        var cd = document.getElementById("3");
        var de = document.getElementById("4");

        var ef = (ab) && (bc);
        var fg = (ab) && (cd);
        var gh = (ab) && (de);

        if ($form.find("ef").prop("checked")) {
            window.location.href = "url 1"
        } else if ($form.find("fg").prop("checked")) {
            window.location.href = "url 2"
        } else if ($form.find("gh").prop("checked")) {
            window.location.href = "url 3"
        else {
            window.location.href = "url 4"
        }

    });
</script>
</html>

I have tried a few things. This is where I have ended up. Each time I manage to get something working but it just defines the first id and not based on a combination of selected ids etc. I want to eventually expand the form for more questions but my main aim is to get this working first.

Many thanks for the help in advance and once again apologies for this feeble excuse for javascript. J

Upvotes: 1

Views: 45

Answers (1)

Akhil Aravind
Akhil Aravind

Reputation: 6130

This is the workout your are looking for. Checkout the snippet and let me know if you have any issue.

function onFormSubmit($form){
event.preventDefault();
        var ab = document.getElementById("1");
        var bc = document.getElementById("2");
        var cd = document.getElementById("3");
        var de = document.getElementById("4");
     
        if (ab.checked && bc.checked) {
             console.log('url 1');
            window.location.href = "url 1";
        } else if (ab.checked && cd.checked) {
             console.log('url 2');
            window.location.href = "url 2";
        } else if (ab.checked && de.checked) {
             console.log('url 3');
            window.location.href = "url 3";
        }else {
             console.log('url 4');
            window.location.href = "url 4"};
        }
<form id="form_field">
First Question?<br>
      <label>Yes<input type="radio" name="1" id="1" value="1"><br></label>
       <label>No<input type="radio" name="2" id="2" value="2"><br></label>
      Second Question?<br>
       <label>Yes<input type="radio" name="3" id="3" value="3"><br></label>
      <label>No<input type="radio" name="4" id="4" value="4"><br></label>

      </br>
      <input type="submit" value="submit" onclick="onFormSubmit(document.getElementById('form_field'))"> 
</form>

Upvotes: 1

Related Questions