Required field for the textbox when the textbox is show/hide - javascript

I want to give required field for show/hide the textbox when the textbox is shown. when a particular radio button is checked a textbox is shown. When the particular textbox is show it should be a required field. It should not be empty.
Show/hide of textbox works fine for me. How can I give required field for the textbox
Show/hide textbox works fine. Required field doesn't work
$(document).ready(function () {
$(".text").hide();
$("#presentation").click(function () {
$(".text").show();
});
$("#participant").click(function () {
$(".text").hide();
});
});
function getResults(){
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="radio-inline"><input type="radio" name="events"
id="participant" value="Participant" required >Participant</label>
<label class="radio-inline"><input type="radio" name="events"
id="presentation" value="Presentation"
onClick="getResults()">Presentation</label>
</div>
<div class="form-group col-md-6 text">
<label>Title of Presentation:</label><span style="color:red";>*
</span>
<input type="text" name="title" id="title" class="form-control" >
</p>
</div>

You can use .attr() to set the attribute and .removeAttr() to remove the attribute when the element is not displayed:
$(document).ready(function () {
$("#presentation").click(function () {
$(".text").show();
$("#title").attr("required", true);
});
$("#participant").click(function () {
$(".text").hide();
$("#title").removeAttr("required");
});
});
.text{display: none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label class="radio-inline"><input type="radio" name="events" id="participant" value="Participant" required="">Participant</label>
<label class="radio-inline"><input type="radio" name="events" id="presentation" value="Presentation">Presentation</label>
<div class="form-group col-md-6 text">
<label>Title of Presentation:</label><span style="color:red" ;>*
</span>
<input type="text" name="title" id="title" class="form-control">
</div>
<button>Submit</button>
</form>

$(document).ready(function() {
$(".text").hide();
$("#presentation").click(function() {
$(".text").show();
$(".text").attr('required',true);
});
$("#participant").click(function() {
$(".text").hide();
$(".text").attr('required',false);
});
});

Just add required to your input field
<input type="text" name="title" id="title" class="form-control" required>

Related

I am trying to hide an input and show it with jquery but the input is not showing

if($('#yes').prop('checked')){
$('#phone-num').show();
}else{
$('#phone-num').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
You need in order to do that to listen to the click on your checkbox.
You code - as you did it - only execute itself one time at the loading of the page.
In the snippet below, a listener is added to the checkbox and is triggered every time you click on it.
$('#yes').click(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
$('#phone-num').show();
} else {
$('#phone-num').hide();
}
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="yes"> Phone Me concerning this case: </label>
<input type="checkbox" name="phone_me" id="yes" />
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
Add a listener for the checkbox change.
If you don't want the checkbox to be visible the first time, you can add a style with display:none to hide it.
$('#yes').change(
function(){
//console.log("check if checked!");
if ($(this).is(':checked')) {
$('#phone-num').show();
}
else
{
$('#phone-num').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" style="display:none;" />
You can hide the input by default, then add an on click handler to the check box and toggle visibility
$(function() {
$(document).on('click', '#yes', function() {
$('#phone-num').toggle();
});
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />

Input field inside a radio button not working

I tried to make the input field onclick of a radio button work and it seems like not working.
My fiddle: https://jsfiddle.net/6qoe89j2/8/
$("#ddlMth").hide();
$("input[type='radio']").change(function() {
if ($(this).val() == "delivery-yes") {
$("#ddlMth").show();
} else {
$("#ddlMth").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radioFrequency" onclick="myMth()" id="radioFrequency-0" value="delivery-yes" /> Yes.
<input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.
<div class="controls">
<label id="ddlMth" name="ddlMth" class="car-list-step-label" for="country">Test</label>
<input id="ddlMth" name="ddlMth" type="text" placeholder="e.g £50" class="form-control car-list-input">
</div>
You cannot have same Id for multiple elements. I have changed the Id of label and Input.
You don't need jQuery, you can do it with CSS.
See below Snippet :
.controls{
display:none;
}
input[value="delivery-yes"]:checked ~ .controls {
display: block;
}
<input type="radio" name="radioFrequency" id="radioFrequency-0" value="delivery-yes" /> Yes.
<input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.
<div class="controls">
<label id="ddlMthLabel" for="ddlMth" class="ddlMth car-list-step-label">Test</label>
<input id="ddlMthInput" name="ddlMth" type="text" placeholder="e.g £50" class="ddlMth form-control car-list-input">
</div>
You set 2 elements with the same id="ddlMth". id must be unique. Jquery selects only the first one then hide it. If you want to hide the label and the input, you should hide the container of them:
$("#ddlMth").hide();
$("input[type='radio']").change(function() {
if ($(this).val() == "delivery-yes") {
$("#ddlMth").show();
} else {
$("#ddlMth").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="radioFrequency" id="radioFrequency-0" value="delivery-yes" /> Yes.</label>
<label><input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.</label>
<div class="controls" id="ddlMth">
<label name="ddlMth" class="car-list-step-label" for="country">Test</label>
<input name="ddlMth" type="text" placeholder="e.g £50" class="form-control car-list-input">
</div>

Hide a div after selecting a radio

I am working on the following codes where I want the input number to appear only when the radio Mobile Money is selected.
Script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$('#mobilemoneynumber').show();
} else {
$('#mobilemoneynumber').hide();
}
});
});
Html:
<form class="form-basic" method="post" action="#">
<div class="form-row">
<label><span>Select one</span></label>
<div class="form-radio-buttons">
<div>
<label>
<input type="radio" name="radio" id="mobilemoney">
<span>Mobile Money</span>
</label>
</div>
<div>
<label>
<input type="radio" name="radio">
<span>Cash on delivery</span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label>
<span>Number</span>
<input type="text" id="mobilemoneynumber" name="mobilemoneynumber">
</label>
</div>
<div class="form-row">
<button type="submit">Submit Form</button>
</div>
</form>
By default when the page is displayed only the input number is displayed and I want it to be displayed by default.
How can I do that ?
Add value to both radio:
<input type="radio" name="radio" value="mobilemoney">
<input type="radio" name="radio" value="cash">
Jquery:
$('input[type="radio"]').click(function() {
if($(this).val() == 'mobilemoney') {
$('#mobilemoneynumber').show();
}
else {
$('#mobilemoneynumber').hide();
}
});
Radio is wrapped in the element 'form-row'. Which is the previous element of the parent of input element.
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$(this).closest(".form-row").next().show();
} else {
$(this).closest(".form-row").next().hide();
}
});
Fiddle
closest(".form-row") will return the parent element which has the classname form-row

Usage of radio value in ID selector

Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?
First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.
You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});
$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})
Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>
Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>

Categories