html - Based on Multiple checkbox selection, “mailto:” link changes to “mailto: multiple variables” using javascript -
i'm trying make form. way work user chooses 3 options 10 multiple selection checkboxes. click confirm location button. click send email link. when click confirm location button, changes mailto link in send email link, based on selection (up 3) in multiple checkboxes. however, cannot figure how set multiple selection checkboxes(with max limit of 3 , min of 1), , add single/multiple email values in mailto link. have managed drop-down list (only 1 selection, hence 1 email), cannot figure out above. please help!
<form>select place: <select id="myselect"> <option value="email@domain.com">location 1</option> <option value="email2@domain.com">location 2</option> <option value="email3@domain.com">location 3</option> <option value="email4@domain.com">location 4</option> </select> </form> <button type="button" onclick="displayresult()">confirm location</button> <a id="myemaillist" href="mailto:">send email</a> <script type="text/javascript"> function displayresult() { var x = document.getelementbyid("myselect"); t = x.value document.getelementbyid("myemaillist").href = "mailto:"t; } </script>
js
function displayresult() { var se = document.getelementbyid("myemaillist"), send = document.getelementbyid("send"), x = document.getelementbyid("myselect"), l = [], // checkboxes inside our fieldset checked list = x.queryselectorall(":checked"); // loop list , push email stored in value our array list (i = 0; < list.length; i++) { l.push(list[i].value); } // use array.join(",") create nice email list deliminated commas send.href = "mailto:" + l.join(", "); se.innerhtml = l.join(", "); }
html
<input type="checkbox" value="email1@domain.com">l1 <br> <input type="checkbox" value="email2@domain.com">l2 <br> <input type="checkbox" value="email3@domain.com">l3 <br> <input type="checkbox" value="email4@domain.com">l4 <br> </fieldset> </form> <button type="button" onclick="displayresult()">confirm location</button> <a id="send" href="mailto:">send email</a> <div id="myemaillist"></div>
fiddle demo:
Comments
Post a Comment