We Keep Coding

How to remove required attribute after select

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.

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>

on Focus not working when textbox selected

I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>

jQuery - Checking value of various input types

I have no idea what I'm doing wrong here. I have a form with radio buttons and simple text fields. I'm checking to see if there is a value within the form fields or if either of the radio buttons have been checked. If there is no value add a red color to the label. If they have a value I'm adding back the default black. But for some reason no matter if I put a value in the text field it stays red. Also kind of strange but if I check the first checkbox the black text appears. Any help is greatly appreciated.
JS Fiddle: http://jsfiddle.net/5Sacj/
<form name="headerForm">
<label id="gender" for="gender">Gender</label>
<input type="radio" name="customer" value="male" />Male
<input type="radio" name="customer" value="female" />Female
<br/>
<label for="fname">*First Name</label>
<input type="text" class="text" id="fname" name="fname" />
<br/>
<label for="fname">*Last Name</label>
<input type="text" class="text" id="lname" name="lname" />
<input id="submit" type="submit" name="submit" value="submit"
</form>
JQUERY
$(document).ready(function() {
$("#submit").on('click', function() {
$(":text, :radio").each(function() {
if($(this).val() === '' || !$(this).is(':checked')){
$(this).prev('label').css('color','red');
} else {
$(this).prev('label').css('color','black');
}
});
});
});

That is because you are using or operator ||.
It will execute even if one is true. Try using && or have separate if condition for both.

How to disable form submit button if text field value is set to a specific value or blank?

I've created a form using Google Docs which sends data to a google spreadsheet. I've taken the html code and reformatted it to my css/style and it works perfectly. It also displays a custom thankyou page and the only problem I'm facing is that it doesn't validate the data.
So, I'm thinking of disabling the submit button if the user hasn't entered anything in the required fields. Or, you could suggest a way to prevent blank form submission?
Currently My form has 2 text fields, and 4 checkboxes. I require both the text fields, but not the checkboxes. The text fields are currently populated/cleared with html/script:
value="Your Email or Phone No."
onfocus="if (this.value=='Your Email or Phone No.') this.value='';"
I require my form to disable the submit button if no data has been entered.
Here's my full code:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thankyou.htm';}"></iframe>
<form action="Google_Form_ID_Here_(removed-for-stackoverflow-post)" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<ol style="padding-left: 0">
<div dir="ltr"><label for="entry_145">Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.145" value="Enter Full Name" id="entry_145" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">
</div>
<div dir="ltr" ><label for="entry_624">Contact Info
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.624" value="Your Email or Phone No." id="entry_624" dir="auto" aria-required="true" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">
</div>
<div align="center">
<div dir="ltr"><label for="entry_755"><br>Checkboxes
</div><br>
<div dir="ltr">Check which of the functions you'll be attending.</label><br><br>
<table align="center" width="248" height="128" border="0">
<span>
<tr>
<td align="center"><input id="group_418_1" name="entry.418" type="checkbox" value="Event 1"/>
<label class="vis_hide">Event 1</label></td>
<td align="center"><input id="group_418_2" name="entry.418" type="checkbox" value="Event 2"/>
<label class="vis_hide">Event 2</label></td>
<td align="center"><input id="group_418_3" name="entry.418" type="checkbox" value="Event 3"/>
<label class="vis_hide">Event 3</label></td>
<td align="center"><input id="group_418_4" name="entry.418" type="checkbox" value="Event 4"/>
<label class="vis_hide">Event 4</label></td>
</tr>
</span>
</table>
<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">
<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>
Please can someone provide help regarding this? Or a suggestion for alternative to prevent blank submissions or provide a link to the solution? Can this be done with some jquery script too?
Thanks for any help.
EDIT:
I tried this script but that didn't help too...
<script>
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");
var input1 = $("#entry_145"); //for name
var input2 = $("#entry_624"); //for contact
form.addEventListener("submit", function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
}, false);
});
</script>

Use it or leave it ,Dirty code
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="name" />
<input type="text" class="req" id="post" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>
<script>
$(function (){
$('.req').change(function(){
if ($('#name').val() == '' || $('#post').val() == '')
{
$('#button').attr('disabled',true);
}
else
{
$('#button').attr('disabled',false);
}
});
});
</script>

There are two ways for client-side "validation":
Use JavaScript and add a submit event listener to your <form> tag.
Add the required attributes to your text boxes:
<input type="text" required="required" />
But these won't prevent users with an old browser (when using second option) or computer savvy people who just send the form manually.
You have to perform server-side validation, too!
Try this for the change event listeners:
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");
var input1 = $("#my-input1-name");
var input2 = $("#my-input2-name");
form.submit(function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
});
});