vendredi 21 juin 2019

How to create a checkbox that goes to a certain link under specific conditions

So I am trying to create a function in which I have various checkboxes of territories. The only thing is that I have pages for only some of the territories. So when a user selects a territory and it has a link to a page, then on submit it will take the user to that page. If the checkbox does not have a link then it will go to contact page. But if they select more than one territory and one of them has a link, it should still take them to that same contact page. The second part is that I want the selections to be parsed to the url to go to the contact page which will be a contact form 7 form so it auto fills the territory they selected.

so far I have created a function which recognizes how many checkboxes have been selected. I tried to add links and identify if those links that were selected with the checkbox. Im not sure if it is recognizing it with its corresponding element.

Html

<a href="https://corporate.territory.place/advertising-sandiego" 
id="salesURL"><input type="checkbox" name="territories" value="San 
Diego, CA">San Diego, CA</a>
<a href="https://corporate.territory.place/advertising-orlando" 
id="salesURL"><input type="checkbox" name="territories" 
value="Orlando, FL">Orlando, FL</a>
<a href="#" id="nosalesURL"><input type="checkbox" 
name="territories" value="Miami, FL">Miami, FL</a><br>
<button onclick="printChecked()">Click here</button>



jquery

function printChecked(){
var items=document.getElementsByName('territories');
/*below list the value of the selections*/
  var selectedItems="";
    for(var i=0; i<items.length; i++){
        if(items[i].type=='checkbox' && items[i].checked==true)
            var itemz = selectedItems+=items[i].value+" ";}

    var n = $("input[name=territories]:checked").length;/*Counts 
number of box selected*/
    var salesUrl = 
document.getElementById("salesURL").getAttribute("href");
    var salesID = 
document.getElementById("salesURL").getAttribute('id');

 if( n >= 1 && salesID == "salesURL"){
$("#info").html("Selected only 1" + " " + salesUrl+" "+itemz);
 }else if(n >= 1 && salesID == "nosalesURL"){
 $("#info").html("Go to contact sales");      
       }else{
$("#info").html("none selected");
}
}

Here's a link to where I am building it out!

For some reason when I try to set the condition for more than one selected it gives me the result of the first condition. I want the function to recognize the checkbox and determine if they have a url. if more than one then go to this page. it only one selected and it has a url then go to another page. etc




Aucun commentaire:

Enregistrer un commentaire