onclick - jQuery 3 different functions but any of the 3 updates all texareas not the one I need -
i have 3 different jquery functions setup 3 different textarea's on page. way supposed work pick choices , choice pick should populate textarea choice. problem populates whatever choice make 3 textareas. here link jsfiddle if can lend pair of eyes tell me missing appreciate it.
html
<div>sale locations</div> <textarea name="salelocation" col="30" rows="4" id="salelocation"></textarea> <input name="salelocation_required" type="hidden" value="you cannot leave field (sale location) empty."> <div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="salelocationslink" style="color:red;">choose location</span> </div> <div id="salelocationsdiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;"> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">jane doe p.o. box 384 acme, bb 666666</a></pre> </div> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">joe blow 123 main st someplace, aa 55555</a></pre> </div> </div> <div>terms conditions...</div> <textarea name="termsconditions" id="termsconditions" rows="5"></textarea> <div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="salestermslink" style="color:red;">choose terms/conditions</span> </div> <div id="salestermsdiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;"> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">net30</a></pre> </div> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">cash only</a></pre> </div> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">net15</a></pre> </div> </div> <div>contact...</div> <textarea name="contact" id="contact" rows="5"></textarea> <div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="contactinformationlink" style="color:red;">choose contact information</span></div> <div id="contactinformationdiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;"> <div style="padding:2px 0px;"> <pre><a href="./" class="slidedownchoices">mary jane p.o. box 69 high, ny 90210</a></pre> </div> </div> javascript
//code slide down choices //code sale locations slide down if ($("#salelocationsdiv").length) { //does div exist on page $("#salelocationsdiv").hide(); //hide div if not $("#salelocationslink").click(function () { if ($("#salelocationsdiv").is(":hidden")) { //if div hidden slide down , change text $("#salelocationsdiv").slidedown("slow"); $("#salelocationslink").html("hide sale locations"); } else { //if not hidden hide , change text $("#salelocationsdiv").slideup("slow"); $("#salelocationslink").html("choose location"); } }); //code add location text area box $("a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#salelocation"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#salelocationsdiv").slideup("slow"); $("#salelocationslink").html("choose location"); }); } //code terms , conditions slide down if ($("#salestermsdiv").length) { //does div exist on page $("#salestermsdiv").hide(); //hide div if not $("#salestermslink").click(function () { if ($("#salestermsdiv").is(":hidden")) { //if div hidden slide down , change text $("#salestermsdiv").slidedown("slow"); $("#salestermslink").html("hide terms/conditions"); } else { //if not hidden hide , change text $("#salestermsdiv").slideup("slow"); $("#salestermslink").html("choose terms/conditions"); } }); //code add terms text area box $("a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#termsconditions"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#salestermsdiv").slideup("slow"); $("#salestermslink").html("choose terms/conditions"); }); } //code contact information slide down if ($("#contactinformationdiv").length) { //does div exist on page $("#contactinformationdiv").hide(); //hide div if not $("#contactinformationlink").click(function () { if ($("#contactinformationdiv").is(":hidden")) { //if div hidden slide down , change text $("#contactinformationdiv").slidedown("slow"); $("#contactinformationlink").html("hide contact information"); } else { //if not hidden hide , change text $("#contactinformationdiv").slideup("slow"); $("#contactinformationlink").html("choose contact information"); } }); //code add terms text area box $("a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#contact"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#contactinformationdiv").slideup("slow"); $("#contactinformationlink").html("choose contact information"); }); } //end code slide down choices
the problem selector $("a.slidedownchoices") because registering 3 click events a.slidedownchoices elements
you need target specific elements using $("#salelocationsdiv a.slidedownchoices")
try
//code slide down choices //code sale locations slide down if ($("#salelocationsdiv").length) { //does div exist on page $("#salelocationsdiv").hide(); //hide div if not $("#salelocationslink").click(function () { if ($("#salelocationsdiv").is(":hidden")) { //if div hidden slide down , change text $("#salelocationsdiv").slidedown("slow"); $("#salelocationslink").html("hide sale locations"); } else { //if not hidden hide , change text $("#salelocationsdiv").slideup("slow"); $("#salelocationslink").html("choose location"); } }); //code add location text area box $("#salelocationsdiv a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#salelocation"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#salelocationsdiv").slideup("slow"); $("#salelocationslink").html("choose location"); }); } //code terms , conditions slide down if ($("#salestermsdiv").length) { //does div exist on page $("#salestermsdiv").hide(); //hide div if not $("#salestermslink").click(function () { if ($("#salestermsdiv").is(":hidden")) { //if div hidden slide down , change text $("#salestermsdiv").slidedown("slow"); $("#salestermslink").html("hide terms/conditions"); } else { //if not hidden hide , change text $("#salestermsdiv").slideup("slow"); $("#salestermslink").html("choose terms/conditions"); } }); //code add terms text area box $("#salestermsdiv a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#termsconditions"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#salestermsdiv").slideup("slow"); $("#salestermslink").html("choose terms/conditions"); }); } //code contact information slide down if ($("#contactinformationdiv").length) { //does div exist on page $("#contactinformationdiv").hide(); //hide div if not $("#contactinformationlink").click(function () { if ($("#contactinformationdiv").is(":hidden")) { //if div hidden slide down , change text $("#contactinformationdiv").slidedown("slow"); $("#contactinformationlink").html("hide contact information"); } else { //if not hidden hide , change text $("#contactinformationdiv").slideup("slow"); $("#contactinformationlink").html("choose contact information"); } }); //code add terms text area box $("#contactinformationdiv a.slidedownchoices").click(function (e) { //e short event e.preventdefault(); //prevent click event going url //you want append text of anchor link textarea. var innertxt = $(this).text(); //need trim whitespace string innertxt = $.trim(innertxt); var $obj = $("#contact"); //replace textarea selector $obj.val($obj.val() + '\n' + innertxt + '\n'); //reset sale locations slider $("#contactinformationdiv").slideup("slow"); $("#contactinformationlink").html("choose contact information"); }); } //end code slide down choices demo: fiddle
Comments
Post a Comment