Develop Reference

What is the simplest way to redirect users to different pages using a form (Bootstrap)?

I have a form that asks two questions and therefore has 2 selections to be made, one is a dropdown list and the other radio buttons.
I want clicking the submit button to redirect the user to a certain webpage depending on the selections they make.
<form>
<div class="form-group">
<label for="selectService">I am looking for assistance with</label>
<select class="form-control" id="selectService">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="selectLearning">I want to recieve assistance for this service via</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Written instruction</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Video tutorials</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">Live mentoring</label>
</div>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>

You can do this using both frontend and backend technologies.
the easiest way is to use javascript and pick the values of the options and radio buttons you can do that using
documents.getElementByClass and you will get both values store them in two separate variables and then you can use if else conditioning to select correct webpage to redirect and use location.href to redirect to respective page.

form validation: check that multiple checbox and radio buttons are selected

I'm building a form that has a lot of conditional paths.. for instance..
Q1.a -> triggers the appearance of question 3
Q1.b -> triggers the appearance of question 2
Q1.c -> skips all the way to question 16
All the questions are required if they're visible to the form user. This being the case I can't just put required in the inputs in case it's one that doesn't get shown.
I've been applying my "required" class in this fashion
$('.question2-a').click(function() {
$(".question3").toggle();
$(".question3").addClass("required");
$(".question4").toggle();
$(".question4").addClass("required");
$(".question5").toggle();
$(".question5").addClass("required");
});
$('.question2-b').click(function() {
$(".question5").toggle();
$(".question5").addClass("required");
});
In this way only questions that I know appeared get a class of required.
I now need to do a look-up of all the required inputs that appeared and ensure they were properly selected.
So far I have this...
$('#PWLE').submit(function() {
if ($('.required input:checkbox', this).is(':checked') && $('.required input:radio', this).is(':checked')) {
// everything's fine...
}
else {
alert('Please fill out all required fields');
return false;
}
});
This isn't really doing the trick because as soon as one checkbox and radio are selected the if is satisfied and the form will submit.
Is there a way I can loop through my required class to ensure that if statement logic is running on all of them?
Snippet of HTML Form
<!-- Question #2 -->
<div class="form-group question2">
<p><b><span class="req-notice">*</span>Have you received a newsletter in the past two years?</b></p>
<div class="form-check question2-a">
<input class="form-check-input" type="radio" value="Yes" id="2261_9466_4_42752_1" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_1">
Yes
</label>
</div>
<div class="form-check question2-b">
<input class="form-check-input" type="radio" value="No" id="2261_9466_4_42752_2" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_2">
No
</label>
</div>
</div>
<!-- End of Question #2 -->
<!-- Question #3 -->
<div class="form-group question3">
<p><b><span class="req-notice">*</span>When did you register for the newsletter? (choose only ONE)</b></p>
<div class="form-check">
<input class="form-check-input" type="radio" value="In the past 6 months" id="2261_9466_5_42753_1" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_1">
In the past 6 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 6 to 12 months" id="2261_9466_5_42753_2" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_2">
Between 6 to 12 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 1 to 2 years" id="2261_9466_5_42753_3" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_3">
Between 1 to 2 years
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="More than 2 years" id="2261_9466_5_42753_4" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_4">
More than 2 years
</label>
</div>
</div>
<!-- End of Question #3 -->

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".q1.required").click(function(){
if(this.value == "yes"){
$("#div3").show();
$("#div3 :input").prop('required',true);
}
else{
$("#div3").hide();
$("#div3 :input").prop('required',false);
}
});
});
</script>
</head>
<body>
<form action="" method="">
<div id="div1">
<label><b>Question 1</b></label>
<input name="q1" class = "q1 required" type="radio" value = "yes" required>
<input name="q1" class = "q1 required" type="radio" value = "no" required>
<br>
</div>
<div id="div2">
<label><b>Question 2</b></label>
<input id="q2" name="q2" class = "required" type="radio" value = "no" required>
<input id="q2" name="q2" class = "required" type="radio" value = "yes" required>
<br>
</div>
<div id = "div3" style="display:none;">
<label><b>Question 3</b></label>
<input id="q3" name="q3" class = "" type="radio" value = "yes">
<input id="q3" name="q3" class = "" type="radio" value = "no">
<br>
</div>
<button>Submit</button>
</form>
</body>
</html>
You can use required attribute instead of class for enabling automatic validation on click of submit/button.
Keep class "required" just for triggering the click event.
Refer the code above :
I have displayed 2 questions,and on click of "yes" of first question I display third question and set the input attribute as required and then if you click "no" then I hide the question and remove the 'required' attribute.
This code is a working example, feel free to run it and check.

Trouble making checkboxes required

I'm looking for some help regarding making checkboxes required.
I'm build a form, based on bootstrap 4. I'm validating the form by the JS example in bootstrap documentation, by adding "novalidate" to form, adding "required" to inputs, and adding the following script:
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('forms');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
Everything is going smoothly, but now I got a few checkboxes, and I would like to only validate it if user checks at least one. I was wondering, if I should make a different function to validate this, or build on the current one. Whichever the case, I'd be very grateful if someone could help me out.
This is the code for the checkboxes:
<div class="form-row">
<div class="form-group col-md-4">
<label for="checkboxes">Indícios:</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="" type="checkbox" value="1">
1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2">
2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3">
3
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4">
4
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5">
5
</label>
</div>
</div>
<div class="form-group col-md-4">
<label for="checkboxes1">&nbsp</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="checkboxes1" value="6">
6
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="7">
7.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="8">
8
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="9">
9
</label>
</div>
</div>
</div>
Thanks a ton in advance!

Since you mentioned that you use jQuery here is a function you can add to you checkValidity method
function checkCheckboxes = function() {
return ($('.form-check-input:checked').length > 0);
};
this functions checks if there is any input with class .form-check-input and with the :checked state is available in the html. When it is, the checkbox-validation is valid.

How to use ng-if with radio buttons?

This should be a simple question.
I'm having trouble using ng-if with radio buttons. These are my buttons:
<label class="radio-inline">
<input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
month
</label>
<label class="radio-inline">
<input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
week
</label>
How can I use ng-if to show something if the first radio button is selected?

The binded model day_month will be updated upon select with the value of the input. Checking if the value equals to the value will give you the possibility to check whether the input has been selected. Please see the example below.
<label class="radio-inline">
<input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
month
</label>
<label class="radio-inline" ng-show="day_month == 'option1'">
<input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
week
</label>

Seems like you need to show and hide some content based on selection of radio button. We can directly bind a Boolean value to check box and do it very easily. If you want do it with radio button please find below solution.
HTML :
<body ng-app=”app”>
<div ng-controller="PageController">
<label>
<input type="radio" ng-model="color.name" value="Red"> Red
</label>
<label>
<input type="radio" ng-model="color.name" value="Green"> Green
</label><br>
<div ng-if="color.name==='Red'?true:false">
Hidden Message
</div>
</body>
Angualr controller:
var app =angular.module("app",[]);
app.controller("PageController",function($scope){
$scope.color={name:'Green'};
});
Working example
https://jsfiddle.net/mshyam83/q8vbbd8q/5/

Your model will be updated with whatever value is in the [value] attribute, so you can check the data stored in whatever variable is specified by ng-model:
<div ng-if="day_month === 'option1'">...example...</div>

why is my context selector and .buttonset() taking so long in ie

So I assume this is something I'm doing flagrantly wrong. It is soo slow in ie there must be something fundamentally wrong with this.
Le HTML
<div id='mother'>
<div id="radio">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" />
<label for="radio2">Choice 2</label>
</div>
<div id="radioTwa">
<input type="radio" id="radioTwa1" name="radioTwa" />
<label for="radioTwa1">Choice 1</label>
<input type="radio" id="radioTwa2" name="radioTwa" checked="checked" />
<label for="radioTwa2">Choice 2</label>
</div>
<div id="check">
<input type="checkbox" id="check1" name="check" />
<label for="check1">Choice 1</label>
<input type="checkbox" id="check2" name="check" checked="checked" />
<label for="check2">Choice 2</label>
</div>
</div>​​​​​​​​​​​​
Le JQuery/JQuery UI
var mother = $('​​​​​​​​​​​​​​#mother');
​ mother.find('#radio').buttonset();​​​​​​
mother.find('#radioTwa').buttonset();
mother.find('#check').buttonset();
or
var mother = $(​​​​​​​​​​​​​​'#mother');
​ $('#radio', mother).buttonset();​​​​​​
$('#radioTwa', mother).buttonset();
$('#check', mother).buttonset();
Both of these will bring IE 8 to it's knees and make it cry. To nip some things in the bud I am using the context of mother on purpose. I do not have a unique ID to each radio box, I planned to select them using context, because of the number 'mother' type divs that are on the page though each mother div element I am using only has about 8 or 9 elements within it. Is there no way to select using context in IE 8 that is quick enough to not grind it to a halt?

How many buttons do you have total? There seems to be a few compliants about slow buttonssets on stackoverlow. Also I found bugs.jqueryui.com/ticket/5454 – Nal