I'm having a hard time figuring out how to build a form with conditional logic.
The proces should be pretty simple:
Radiobuttons for: country A & country B
Followed by a dropdown menu which will appear after touching the radiobutton with titles which will redirect the user to a URL of my choosing.
If anyone can point me out how to do this, please help.
Thanks.
Rem
This is workable HTML so you can use it as an example.
<form>
<div id="countryRadios">
<div class="radio">
<label><input type="radio" value="1" name="selectCountry" id="countryA" />Country A</label>
</div>
<div class="radio">
<label><input type="radio" name="selectCountry" value="2" id="countryB" />Country B</label>
</div>
<div id="dynmSelect"></div>
<button class="btn btn-default" type="button" id="submitSelect">Button</button>
</div>
</form>
This is workable and tested Javascript that you can use as an example. It does what I think you are looking for, works with the HTML above.
$(function(){
$("body").on("click", "#countryRadios [id]", function(){
var $this = $(this),
thisSelectedValue = $this.val();
if (thisSelectedValue == 1){
$("#dynmSelect").empty().append("<select name='city'><option value='cac1.html'>Country A City 1</option><option value='cac2.html'>Country A City 2</option><option value='cac3.html'>Country A City 3</option></select>");
}else if (thisSelectedValue == 2){
$("#dynmSelect").empty().append("<select name='city'><option value='cbc1.html'>Country B City 1</option><option value='cbc2.html'>Country B City 2</option><option value='cbc3.html'>Country B City 3</option></select>");
}
});
$("body").on("click", "#submitSelect", function(e){
e.preventDefault();
var $this = $("#dynmSelect select").val();
console.log($this);
if ($this){
document.location.href = $this;
}else{
$("#dynmSelect").text("You must first select a Country");
}
});
});
You should be able to change the JS code to work with your HTML specially if it's something like what I did HTML wise.
Saj
I just ran across this I am basically looking for the same..the only thing I am looking for is Two radio answers yes and no if radio yes then a download button shows..if radio no then it shows a second question.
I have some skills but still learning.
Thanks,
Ok well first off for Rem (@remco), here is an updated working example after I just reread the original post. I don't know why I used a select box :(
HTML (reformatted)
<div id="countryRadios">
<form>
<div class="radio">
<label><input type="radio" value="1" name="selectCountry" id="countryA" />Country A</label>
</div>
<div class="radio">
<label><input type="radio" value="2" name="selectCountry" id="countryB" />Country B</label>
</div>
</form>
</div>
<div id="dynmSelect"></div>
JS Code
$(function(){
$("body").on("click", "#countryRadios [id]", function(){
var $this = $(this),
thisSelectedValue = $this.val();
if (thisSelectedValue == 1){
$("#dynmSelect").empty().append("<div class='dropdown'><button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Select from Country A</button><div class='dropdown-menu' aria-labelledby='dropdownMenuButton'><a href='cac1.html'>Country A City 1</a><a href='cac2.html'>Country A City 2</a><a href='cac3.html'>Country A City 3</a></div></div>");
}else if (thisSelectedValue == 2){
$("#dynmSelect").empty().append("<div class='dropdown'><button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Select from Country B</button><div class='dropdown-menu' aria-labelledby='dropdownMenuButton'><a href='cbc1.html'>Country B City 1</a><a href='cbc2.html'>Country B City 2</a><a href='cbc3.html'>Country B City 3</a></div></div>");
}
});
});
When you select Country A radio it will append a Dropdown of Country A and it's links, if you select Country B will do the same but for B and it's links.
<hr />
Now for @tpallone, there's not really much difference to what your asking, you can just add a second onclick script function that will handle the other set of radio options.
HTML
<div id="yesnoRadios">
<form>
<div class="radio">
<label><input type="radio" value="1" name="didyouwant" id="idid1" />Yes</label>
</div>
<div class="radio">
<label><input type="radio" value="0" name="didyouwant" id="idid0" />No</label>
</div>
</form>
</div>
<div id="dynmSelect"></div>
JS
$(function(){
$("body").on("click", "#yesnoRadios [id]", function(){
var $this = $(this),
thisSelectedValue = $this.val();
if (thisSelectedValue == 1){
$("#dynmSelect").empty().append("<div class='dropdown'><button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Yes Menu</button><div class='dropdown-menu' aria-labelledby='dropdownMenuButton'><a href='yes1.html'>Yes I want this</a><a href='yes2.html'>Yes I really want</a><a href='yes3.html'>Yes I really really want</a></div></div>");
}else if (thisSelectedValue == 0){
$("#dynmSelect").empty().append("<p>OH! My bad you selected No. Are you sure you meant to pick NO?</p><div id='repickyesnoRadios'><div class='radio'><label><input type='radio' value='1' name='redidyouwant' id='reidid0' />Yes</label></div><div class='radio'><label><input type='radio' value='0' name='redidyouwant' id='reidid0' />No</label></div></div>");
}
});
$("body").on("click", "#repickyesnoRadios [id]", function(){
var $this = $(this),
thisSelectedValue = $this.val();
if (thisSelectedValue == 1){
$("#dynmSelect").empty().append("Sweet you picked Yes this time");
}else if (thisSelectedValue == 0){
$("#dynmSelect").empty().append("Sigh... you still picked no :/");
}
});
});
Basically the parts in the above script(s) you would change (based on what radio you selected) is this part $("#dynmSelect").empty().append("[change what's in here]");. Other than that, it's just you updating the scripts to match your IDs and input values you are using etc... The function of the script doesn't need to be change, unless you were looking for it to do something more.
Saj
Sorry @tpallone, I had dropdown on the brain and left that in. If you change the following, $("#dynmSelect").empty().append("<div class='dropdown'>..."); to something like $("#dynmSelect").empty().append("<a href='https://bootstrapstudio.io/assets/img/logo.png'>Download</a>"); then you'll have a download button.
Saj