How to remove required attribute after select - javascript

I did an asset delivery system so there are two options for the user to select which is NOT YET DELIVERED and ALREADY DELIVERED.
I used javascript to allow date input to display if the user selects ALREADY DELIVERED. I added required for the calendar so that the user cannot submit the details if user doesn't choose a date and it worked perfectly.
However,when the user selects NOT YET DELIVERED, the system doesn't display the calendar and therefore cannot submit the form due to the calendar being required.
I wanted the calendar to be required if the user selects ALREADY DELIVERED but not for NOT YET DELIVERED.
Thank you in advance.
$(function() {
with name = 'status') $(document).on("change", "input[name='status']", function() {
console.log("Testing");
var checkedValue = $(this).val();
console.log(checkedValue);
else;
checkedValue == 1 ? $(".box").show() : $(".box").hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="alignright">
<div>
<br />
<label>
<input type="radio" name="status" value="0" required /> Not yet
delivered
</label>
<br />
<label>
<input type="radio" name="status" value="1" required /> Already
delivered
</label>
</div>
</span>
<span class="alignleft">
<div class="box">DELIVERY DATE<input type="date" name="deliverydate"
id="deliverydate" required="" />
</div>
</span>

Instead of setting the required value on the date input, set it depending on which option the user selects. You can do this at the same time as hiding/showing it.
$(document).on("change", "input[name='status']", function() {
var checkedValue = $(this).val();
if(checkedValue == 1){
$(".box").show();
$(".box").prop("required",true);
} else {
$(".box").hide();
$(".box").prop("required",false);
}
console.log($(".box").prop("required"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="alignright">
<div>
<br />
<label>
<input type="radio" name="status" value="0" required /> Not yet
delivered
</label>
<br />
<label>
<input type="radio" name="status" value="1" required /> Already
delivered
</label>
</div>
</span>
<span class="alignleft">
<div class="box">DELIVERY DATE<input type="date" name="deliverydate"
id="deliverydate" />
</div>
</span>

You can do it this way:
$(function() {
with name='status')
$(document).on("change", "input[name='status']", function() {
console.log("Testing");
var checkedValue = $(this).val();
console.log(checkedValue);
else;
if(checkedValue == 1) {
$(".box").show();
$('input#deliverydate').prop('required',true);
} else {
$(".box").hide();
$('input#deliverydate').prop('required',false);
}
})
});
Hope it helps.

Related

How to get checkbox value checked and show to input element using Javascript or Jquery?

but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!
<script type="text/javascript">
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
}
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
<script>
$('#theloai1').prop('checked', true);
</script>
This is demo : https://anifast.com/includes/test.php, I want to not need to click the checkbox and still display the checked results
Use this code and don't forget to use jquery library.
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
function thayTheLoai() {
if ($('input[name="theloai[]"]:checked').length > 0) {
$("#input").val(1);
}else{
$("#input").val(0);
}
}
You have 2 ways of doing it:
you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:
JS
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
$('#input').val( huunhan_theloai.join(", ") );
}
$(document).ready(function(){
thayTheLoai();
});
HTML
<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>
if you want to update the input field using the $('#theloai1').prop('checked', true);, you should change it so that it also triggers the onchanged event on the input field like this:
$('#theloai1').prop('checked', true).trigger('change');
NOTES
this code is not tested, but it should work
make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)
<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
$("input[type='checkbox']").on("change", function(){
checked_id = $(this).attr("id");
if ($(this).prop("checked") == true) {
$("input[type='checkbox']").each(function(){
if ($(this).attr("id") != checked_id) {
$(this).prop("checked", false);
}
})
$("#input").val($(this).val());
}else{
$("#input").val('some default value');
}
})

value doesn't change when I'm trying to toggling the checkbox

I have this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>

Enable/Disable Controls on selection of Radio using jquery

I am trying to Enable/Disable certain controls depending upon the selection of Radio. it doesn't seem to be working.
I want the disabled text and radio fields to be enabled when yes radio is selected.
Please help!
ASP snippet
<div class="form-group" >
<label class="control-label">Whether any other children of the same family is studying in Primary/ Secondary Section of SVVHS</label><br />
<input type="radio" value="yes" id="chkRelatedStudentYes" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">Yes</label><br />
<input type="radio" value="no" id="chkRelatedStudentNo" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">No</label>
</div>
<div class="form-group">
<label class="control-label">Name of the Student</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name of the Related Student" id="txtRelatedStudentName" runat="server" disabled="disabled" />
</div>
<div class="form-group">
<label class="control-label">Section</label><br />
<input type="radio" value="Primary" id="chkPrimary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Primary</label><br />
<input type="radio" value="Secondary" id="chkSecondary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Secondary</label>
</div>
<div class="form-group">
<label class="control-label">Standard</label>
<input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Standard of the Related Student" id="txtStandard" runat="server" disabled="disabled"/>
</div>
<div class="form-group">
<label class="control-label">Division</label>
<input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Division of the Related Student" id="txtDivision" runat="server" disabled="disabled"/>
</div>
jquery snippet
<script type="text/javascript">
$('#chkRelatedStudentYes').click(function () {
$('#txtRelatedStudentName').removeAttr("disabled");
$('#chkPrimary').removeAttr("disabled");
$('#chkSecondary').removeAttr("disabled");
$('#txtStandard').removeAttr("disabled");
$('#txtDivision').removeAttr("disabled");
});
$('#chkRelatedStudentNo').click(function () {
$('#txtRelatedStudentName').attr("disabled", "disabled");
$('#chkPrimary').attr("disabled", "disabled");
$('#chkSecondary').attr("disabled", "disabled");
$('#txtStandard').attr("disabled", "disabled");
$('#txtDivision').attr("disabled", "disabled");
});
</script>
Hi your way of triggering event is wrong
Please try this, here is complete code that should work
Note : Tested it
$(document).ready(function() {
$("input[name=RelatedStudent]:radio").click(function() { // attack a click event on all radio buttons with name 'radiogroup'
if($(this).val() == 'yes') {//check which radio button is clicked
$('#txtRelatedStudentName').removeAttr("disabled");
$('#chkPrimary').removeAttr("disabled");
$('#chkSecondary').removeAttr("disabled");
$('#txtStandard').removeAttr("disabled");
$('#txtDivision').removeAttr("disabled");
} else if($(this).val() == 'no') {
$('#txtRelatedStudentName').attr("disabled", "disabled");
$('#chkPrimary').attr("disabled", "disabled");
$('#chkSecondary').attr("disabled", "disabled");
$('#txtStandard').attr("disabled", "disabled");
$('#txtDivision').attr("disabled", "disabled");
}
});
});
You can try it here https://jsfiddle.net/abhiyx/fgen1br9/
You could use jQuery prop() method instead of removeAttr(). Try this -
$('#chkRelatedStudentYes').click(function () {
$('#txtRelatedStudentName').prop("disabled", false);
$('#chkPrimary').prop("disabled", false);
$('#chkSecondary').prop("disabled", false);
$('#txtStandard').prop("disabled", false);
$('#txtDivision').prop("disabled", false);
});
I found what the problem was.
The script wasn't able to find the element by ID or its NAME attribute.
I tried all the possible way to fire the script on click of the element and realized that it was working when i used - $("input[type=radio]:radio")
and also using the class name - $(".form-control") I modified the script and used the below script and boom it worked
$("input[type=radio]:radio").click(function () {
if ($(this).val() == 'yes') {
$(".form-control-disable").removeAttr("disabled");
}
else if ($(this).val() == 'no') {
$(".form-control-disable").attr("disabled", "disabled");
}
});
I used the following class for the text and radio controls that had to be disabled ".form-control-disable" and it worked.
I thank Abhi for his patience and help. :)
Since the html elements is rendered on the server, the IDs of the elements will change.
While access the IDs in javascript, Please use as following:
$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");

Limit to One When the Checkbox is Checked

I have a Form where I want to limit the Data from my Drop Downlist when the checkbox is checked
So that When i Save theres a Message window that will Appear and Let the user know that he/she checked the checkbox for the Same Drop Down Value
using (Html.BeginForm("Save", "Worker", FormMethod.Post, new { id = "contactForm" }))
{
<input type="hidden" id="workerId" name="workerId" value="#workerId" />
<p>
<label for="ddlContactType">
Contact Type</label>
<span>
#Html.DropDownList("ddlContactType", new SelectList(ViewBag.ContactTypeList, "ID", "Display_Value", workerContactType), "[Please Select]",
new Dictionary<string, object>
{
{"class","validate[required] inputLong"}
})
</span>
</p>
<p>
<label for="txtContactValue">
Contact Value</label>
<span>
<input type="text" id="txtContactValue" name="txtContactValue" class="validate[required] inputLong" value="" />
<input type="checkbox" name="chkWorkerIsPrimary" id="chkWorkerIsPrimary" value="true"
checked="checked" />
<label>
Is Primary?</label>
</span>
</p>
<p>
<span>
<input type="submit" id="btnAdd" class="styledButton" value="Add" />
</span>
</p>
}
</div>
I need the Validation written in Javascript but i dont know how to start :(
Thanks
Jquery:
if($('#chkWorkerIsPrimary').is(':checked')){
//Your code
}
.is(':checked') if the user has checked the checkbox returns true, else return false
or javascript:
if ($("[name=chkWorkerIsPrimary]:checked").length == 0){
//your code
}

jQuery form validation

I have been working on this jQuery form which would only allow the user to submit once all fields are filled in. So essentially, the submit field (or in my case the 'request' field) is dimmed until all fields are not blank. My button is always dimmed though, would someone help me with this please? I have the following jQuery:
$(function() {
var $submit = $(".request input");
var $required = $(".required");
function containsBlanks(){
var blanks = $required.map(function(){ return $(this).val() == "";});
// the inArray helper method checks if value is within an array
return $.inArray(true, blanks) != -1;
}
function requiredFilledIn(){
if(containsBlanks())
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}
$("#form2 span").hide();
$("input").focus(function(){
$(this).next().fadeIn("slow");
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
//Check all required fields.
requiredFilledIn();
});
requiredFilledIn();
});
This is my form
<div id="form2" title="Request a Call-back">
<p class="validateTips">All form fields are required. The submit button will activate once this is done.</p>
<form action="includes/requestcall.php" method="post">
<fieldset>
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="30" class="required" />
<span>Please enter your Name</span>
<br />
<br />
<label for="number">Number:</label>
<input type="text" name="number" id="number" size="30" class="required" />
<span>Please enter your number</span>
<br />
<br />
<label for="time">Preferred Time:</label>
<input type="text" name="time" id="time" size="30" class="required" />
<span>Please enter your preferred time</span>
<br />
</fieldset>
<p class="request">
<input type="submit" value="Request" class="btn-submit">
</p>
</form>
</div>
I'm still learning jQuery and any help would be much appreciated.
I've adjusted the code slightly to use the filter function to retrieve the empty textboxes along with using the change event.
This is the link to the updated script running your markup on JSFiddle
Here's the updated script:
$(function () {
var $submit = $("input.btn-submit").attr("disabled", "disabled").css("color", "red");
var $required = $(".required");
function requiredFilledIn() {
var blanks = $required.filter(function () {
return $(this).val() === "";
});
if (blanks.length > 0) $submit.attr("disabled", "disabled").css("color", "red");
else $submit.removeAttr("disabled").css("color", "black");
}
$("#form2 span").hide();
$("input:text").focus(function () {
$(this).next().fadeIn("slow");
}).blur(function () {
$(this).next().fadeOut("slow");
}).change(function () {
//Check all required fields.
requiredFilledIn();
});
});

Categories