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