Get selection with Bootstrap Drop Down and go to page - javascript

I'm working with the Bootstrap drop down and I've got everything working except the final thing I need it to do. The user will select 1 of 3 options and then click 'Go!'. After clicking go it will check what the user chose and then redirect them to the correct page.
Here's what I had in JavaScript.
function gotopg() {
var s = document.getElementById('selection');
var selection = s.options[s.selectedIndex].value;
if (selection == 1) {
window.location.href = 'OptionOne.html';
}
else if (selection == 2) {
window.location.href = 'OptionTwo.html';
}
else if (selection == 3) {
window.location.href = 'OptionThree.html';
}
}
And here's the HTML
<div>
<select class="selectpicker" title='Choose your form...' id="selection" onChange="changed()" autofocus>
<option style="text-align: left;">OptionOne</option>
<option style="text-align: left;">OptionTwo</option>
<option style="text-align: left;">OptionThree</option>
</select>
<script type="text/javascript">
$(document).ready(function(e) {
$('.selectpicker').selectpicker();
});
</script>
</div>
<br>
<br>
<button id="go" onClick="gotopg()" disabled="disabled" style="font-size: 20px;">Go!</button>
This was working just fine before I added in the Bootstrap Drop Down, now nothing is happening when clicking Go!. What do I have to do to get this working with the Bootstrap Drop Down?

Related

How to direct user to an specific page depending on selection they made after form submission?

I have created a list with 6 options and users can only select one. I want that whenever a user selects an option from the list after they submit the form it directs them to a specific page depending on which selection.
Eg. I have 3 options
Facebook
Youtube
Twitter
If the user selects option 1 after submission it will direct them to the Facebook page, if they select option 2 it will direct them to a youtube page .. etc
This is quite simple. You just have to get the value from the selector & use JS to open that link. Check my solution for reference -
solution on JS Fiddle
function myFunction() {
let link =
document.getElementById("social").value
let fb = "https://facebook.com"
let tw = "https://twitter.com"
if(link == 'fb') {
window.open(fb);
} else if (link == 'tw') {
window.open(tw);
}
}
<select id="social">
<option value="fb">Facebook</option>
<option value="tw">Twitter</option>
</select>
<button onclick="myFunction()">
go to site
</button>
This somehow doesn't work here, working on JS Fiddle
<body>
<form>
<select name="" id="target">
<option value="facebook">Facebook</option>
<option value="youtube">Youtube</option>
<option value="twitter">Twitter</option>
</select>
<button type="button" id="sub_button">submit</button>
</form>
<script>
const data = {
facebook: 'https://facebook.com',
youtube: 'https://youtube.com',
twitter: 'https://twitter.com',
}
document.querySelector('#sub_button').onclick = function() {
let target = document.querySelector('#target').value;
window.location.href = data[target];
}
</script>
</body>

Open a link using onsubmit

I have the following mock snippet:
JS :
function generateLink()
{
var A = document.getElementById('AAA').value;
var B = document.getElementById('BBB').value;
if(B == "1" || B == "2")
link ='http://' + B + '.' + A + '.domain';
else if(B == "3" || B == "4")
link ='http://' + B + '.' + A + '.domain/link.jsp';
else
link ='/404.html';
return link;
}
function showLink()
{
var link = generateLink();
document.getElementById("link").href = link;
document.getElementById("link").innerHTML = link;
}
document.formName.onsubmit = function(){
this.action = generateLink();
}
HTML :
<form name="formName" target="_blank">
<div style="margin: 0 auto; width:600px;">
<div style="float:left;"><span>Pick AAA</span><br>
<select id="AAA" onchange="showLink()">
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
</select>
</div>
<div style="float:right;"><span>Pick BBB</span><br>
<select id="BBB" onchange="showLink()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;">
<br><br>
<input type="submit" value="Go to"><br><br>
<input type="reset" value="Reset Selection">
</div>
When I run this code what happens is that the href opens the correct url in a new tab, while the submit button opens the page I am currrently on in a new tab. I am not sure what I am doing wrong. Doesn't the document.formName.onsubmit suppose to make the submit button work the same as the href?
I tried to setup a fiddle with your code, and it worked well enough. But while doing it, I realized I had to move a piece of code around to avoid a small problem, so I'm going to guess that you are having the same situation.
My guess is that you have all your JavaScript code before the HTML. When this part
document.formName.onsubmit = function(){
this.action = generateLink();
}
is executed, the form does not exist yet, and the onsubmit can't be set (you should see an error about it in your console, too). When you click on your submit button later, the form has no action defined, and just goes to the same page (its default behaviour). Here's a fiddle having with this problem.
The simplest fix is moving the onsubmit assignment after the form. Here's the same fiddle, with the relevant code moved, that actually does what you expect.
You want to set an action="" on the
<form>
tag. When the form is submitted, it will submit to the page defined in action="". If not defined, it will submit back to the same page by default.

jQuery show/hide div based on select option

So I know this has been asked a bunch and I've cycled through several posts and have done, it seems, exactly what has been said, but can't get it to work. You can see my page here.
Essentially I want to show a div and make its inputs/selects required (once shown; if hidden, they are not required). Obviously the div should show/hide depending on the selection.
$('#table-meals, .product-addon-please-choose-your-meal').hide();
$('#purchase').change(function(){
if($(this).val()=="Individual") {
$('#table-meals').show();
$('select').prop('required',true);
}
if($(this).val()=="Table of 10") {
$('.product-addon-please-choose-your-meal').show();
$('input').prop('required',true);
}
});
I figured it out, instead of using $('#purchase').change(function(){ I need to use $('form').on('change', '#purchase', function(){
The following code does work for me on your test page.
It looks like you had the individual/table of 10 elements mixed up.
// Using jQuery instead of $ because it looks like there's some sort of conflict on the site
jQuery('#purchase').change(function(){
// Reset required fields and hide fields
jQuery('select, input').prop('required', false);
jQuery('#table-meals, .product-addon-please-choose-your-meal').hide();
if(jQuery(this).val() == "Individual") {
jQuery('.product-addon-please-choose-your-meal').show();
jQuery('input').prop('required', true);
}
if(jQuery(this).val() == "Table of 10") {
jQuery('#table-meals').show();
jQuery('select').prop('required', true);
}
});
Based on dropdown list selection
jQuery(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
window.onunload = unloadPage;
function unloadPage(){
$('#dropdown').find('option:first').attr('selected', 'selected');
}
if ($(this).attr("value") == "user") {
$(".box").not(".user").hide();
$(".user").fadeIn(3000);
}
else if ($(this).attr("value") == "group") {
$(".box").not(".group").hide();
$(".group").fadeIn(3000);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-sm-12" >
<select class="selectpicker" id="dropdown">
<option value="default" selected="selected">Select Module..</option>
<option value="group">Group Management</option>
<option value="user">User Management</option>
</select>
</div>
<div class="group box" style="display:none">
<h4>Group Management</h4>
<p>Div 2.</p>
</div>
<div class="user box" style="display:none">
<h4>User Management</h4>
</div>

I want to validate drop down menu on value change not on submit button click

I have written this code for fetching data on submission of drop down menu, it is working on submit button click, but now I want this to work only on change of value in drop down menu, here is my working code.
<script language="javascript">
function validFormDataCity() {
if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
alert("Please select a City.");
document.citysearch.jobsbycitymenu.focus();
return false;
}
}
</script>
<div id='jobsbycity'>
<form id="citysearch" name="citysearch" method="POST" action="jobs-by-city-results">
<p id='jobsbycitytitle'>Jobs by City</p>
<select name="city" id='jobsbycitymenu'>
<option value="Not Selected">---Select City---</option>
<option value='Abbottabad'>Abbottabad</option>
<option value='Arifwala'>Arifwala</option>
<option value='Attock'>Attock</option>
<option value='Badin'>Badin</option>
</select>
<input type="submit" name="Submit" value=" Go " id='jobsbycitymenubtn' onclick="return validFormDataCity();"/>
</form>
</div>
will be great thankful for your help
Since you are tagging jQuery you could use:
$('#jobsbycitymenu').on('change', function(){
$(this).closest('form').submit();
});
So your whole code (and please remove the inline script) would be:
$(function () {
$('#jobsbycitymenu').on('change', function () {
if (validFormDataCity()) $(this).closest('form').submit();
});
$('#citysearch').submit(function (e) {
e.preventDefault;
return validFormDataCity();
});
function validFormDataCity() {
if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
alert("Please select a City.");
document.citysearch.jobsbycitymenu.focus();
return false;
}
return true
}
});
Demo
For plain Javascript you can use this.

Array checkbox show a new div

I have some problems with a JavaScript code, because I show a new div if the person checked a checkbox, but if a checked another checkbox the div should disappear, but it does, here my code:
<script type="text/javascript">
var checkDisplay = function(check, form) { //check ID, form ID
form = document.getElementById(form), check = document.getElementById(check);
check.onclick = function(){
form.style.display = (this.checked) ? "block" : "none";
form.reset();
};
check.onclick();
};
</script>
And this is the block of HTML:
<div id="Opciones">
<p style="display: inline-block;">Efectivo</p> <input type="checkbox" value="1" id="efe" name="check"/>
<p style="display: inline-block;">Deposito</p> <input type="checkbox" value="2" id="depo" name="check"/>
</div>
<div id="deposi">
<div class="row">
<input type="checkbox"/>
</div>
</div>
<script type="text/javascript">
checkDisplay("depo", "deposi");
</script>
just one of the checboxes should be marked, if is checked depo checkbox open a new div with a new imput and another things, but if a cheked efe chechbox the div that appeared before should be dissapear, In short, if a checkbox should appear within a form, but if under another, should disappear.
the problem become when shows the div, if i select the other checkbox the form does not disappear
Please... I need help with this code... If you have another code that be great!
The solution to this is create an and a and be related in a javascript to show when the value is the same and hide when it changes
><select name="status" id="status">
> <option value="">pick one...</option>
> <option value="show">show</option>
> <option value="hide">hide</option>
></select>
><div name="razordiv" id="razordiv">Hi!</div>
><script>$(document).ready(function() {
> $("#razondiv").hide();
> $("#status").change(function() {
> if ($("#status").val() == 'show') {
> $("#razondiv").show();
> }
> else {
> $("#razondiv").hide();
> }
> });
> });
></script>

Categories