i have simple modal dialog box below on page, on click of go button, user should navigate page, based on selected option in dropdown; looks mysite.com/<cfoutput>#product_name#</cfoutput>; error , taking me nowhere. tried couple different things, must missing real small. insights? thanks
<div id="home-choose-spec" class="modal fade home-spec-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallmodallabel" aria-hidden="true"> <div class="modal-dialog modal-sm login-modal"> <div class="modal-content white-bg rounded"> <div class="modal-body"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button> <div class="reg-block border-none"> <div class="reg-block-header"> <h2 class="dark-blue bold">select product:</h2> </div> <div class="margin-bottom-20"> <form class="reg-page" method="post"> <select name="pid" id="pid" class="form-control input margin-bottom-20"> <cfoutput query="products"> <option value="#pid#">#product_name#</option> </cfoutput> </select> <a class="btn btn-lg btn-block btn-home-spec-choice light-blue-bg white bold rounded" href=’mysite.com/<cfoutput>#product_name#</cfoutput>’>go!</a> </form> </div> </div> </div> </div> </div> </div>
it's unclear problem is... whether you're getting javascript error or cf error seems you're trying use product name within same instance of same page population.
this entirely possible, not how you're doing it. looks you're trying value of box changes without submitting page.
add id link, chose mlink.
you can, on initial load, use cf populate value equal default selected option's value
<div class="modal-body"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button> <div class="reg-block border-none"> <div class="reg-block-header"> <h2 class="dark-blue bold">select product:</h2> </div> <div class="margin-bottom-20"> <form class="reg-page" method="post"> <select name="pid" id="pid" class="form-control input margin-bottom-20"> <cfoutput query="products"> <option value="#pid#">#product_name#</option> </cfoutput> </select> <a id="mlink" class="btn btn-lg btn-block btn-home-spec-choice light-blue-bg white bold rounded" href=’#’>go!</a> </form> </div> </div> </div> and use javascript this
document.getelementbyid('mlink').onclick = function (e) { var pidselect = document.getelementbyid('pid') this.href = "http://somesite.com/"+ pidselect.options[pidselect.selectedindex].innerhtml; } here's jsfiddle demo 2 more lines of code in function catch link before fires, alert href value, , stop firing (so don't leave jsfiddle page.
note html in jsfiddle different here (i removed cfoutputs , duplicated option there demonstrate working, if copy html, copy page.
