We Keep Coding

Changing input text value with jQuery in form

I have 2 checkbox input and 1 input text.
When i click on checkbox #1 i want to disabled checkbox #2 then, add a text (my-text-1) in input text and make it unchangeable
When i click on checkbox #2 i want to disabled checkbox #1 then, add a text (my-text-2) in input text and make it unchangeable
with jQuery 3.4.1
So, it works but ...
When i submit the form, the value of the input text is not recorded in my database. It's like the field is empty.
$(document).ready(function(){
$("#checkbox1").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-1").prop('disabled', true);
$("#checkbox2").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox2").prop('disabled', false);
}
});
$("#checkbox2").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-2").prop('disabled', true);
$("#checkbox1").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox1").prop('disabled', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Checkbox #1</label>
<input id="checkbox1" type="checkbox" value="" name="checkbox1"><br/>
<label>Checkbox #2</label><input id="checkbox2" type="checkbox" value="" name="checkbox2"><br/>
<label>Text : </label><input name="inputtext" id="inputtext" type="text" size="50" maxlength="50" value="" />

Instead of using disabled property on the input[text] element use readonly property. Data for disabled elements does not get submitted:
$("#inputtext").val("my-text-1").prop('readonly', true);
Another alternative would be to enable the element prior to submitting the form.
Reference

Validation of input field after value is inserted without button click Laravel HTML

I have a user with certain number assigned to them let's say 100. I have the value 100 passed to my view. There is an input field such that user can enter any value but if the value user enter is greater than 100 a warning must be displayed. I want this warning to be displayed as soon as user is finished entering the value and move to next input field. I want the warning to be shown without any button click.

Just add an oninput event to your input field and validate it with JavaScript.
<input type="text" value="100" oninput="validate()">
<script>
function validate() {
// validate
}
</script>
Or do it like here setting oninput event with Javascript

Suppose <input type="text" id="number" /> is input field.
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
$(document).ready(function(){
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Number: <input type="text" id="number" /></label><br>
<label>Another Input<input type="text" id="number" /></label>

Jquery Form Validation

I have been looking at a few post on Stack trying to get a simple form validation working but all it does is disabled my submit button. Its meant to remove the disable once they've entered text inside the input field.
So Far
Jquery
$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('input:submit').attr('disabled',true);
} else {
$('input:submit').removeAttr('disabled');
});
HTML
<form action="send.php" method="post">
<input id="name" name="name" type="text" required placeholder="Name"/>
<input id="email" name="email" type="email" required placeholder="Enter a valid email address"/>
<input name="submit" id="subscribe" type="submit" value="Subscribe for free"/>
</form>

You should look for every input by using classes that are added to all fields that are requiered. If the user changes one of them and there is still no input, then the button while stay disabled:
jQuery:
$('input.required').change(function(){
if($(this).val() != ''){
$(this).removeClass('required',true);
}else{
$(this).addClass('required',true);
}
//check the length to enable or disable submit
if($(".required").length == 0){
$('#subscribe').attr('disabled',false);
}else{
$('#subscribe').attr('disabled',true);
}
});
html:
<form action="send.php" method="post">
<input id="name" name="name" type="text" class="required" placeholder="Name" />
<input id="email" name="email" type="email" class="required" placeholder="Enter a valid email address" />
<input name="submit" id="subscribe" type="submit" value="Subscribe for free" />
</form>
Here is a fiddle.
However keep in mind that this solution only works with javascript enabled.

I think you need to change your statements in if-else, let me know if you are trying something different apart from this--
$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('input:submit').removeAttr('disabled');
}else{
$('input:submit').attr('disabled',true);
}
});
Fiddle- http://jsfiddle.net/UcQhw/

Hey I have refined your code a bit, and its working as you intended
JS CODE:
$('#subscribe').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('#subscribe').attr('disabled',false);
}else{
//$('input:submit').removeAttr('disabled');
$('#subscribe').attr('disabled',true);
}
});
LIVE DEMO on JS Fiddle
happy Coding :)

Try Below code:
//$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){ alert(1);
$('input:submit').attr('disabled',false);
}else{alert(2);
$('input:submit').attr('disabled', true);
}
});
Code: http://jsfiddle.net/WchJ9/

You got to swap statements in if-else block. Also use $(this) to get the source of event.
Live Demo
$('input:submit').attr('disabled', true);
$('input').change(function () {
if ($(this).val() !== '') {
$('input:submit').attr('disabled', false);
} else {
$('input:submit').prop('disabled', true);
}
});
if you want to check that all text field must not be empty then you have to iterate through all inputs. You should assign class to get sepecific textboxes instead of getting all on page. You can use class selector to get elements by class.
Live Demo
$('input:submit').attr('disabled', true);
$('.cls').change(function () {
blankFields = $('.cls').filter(function () {
return this.value == '';
});
if (blankFields.length === 0) $('input:submit').attr('disabled', false);
else $('input:submit').prop('disabled', true);
});

Bootstrap tooltip for form validation

I am fairly new to bootstrap and cant seem to get this right. I am using tooltip javascript functionality, on form validation, which popsup when there is validation errors in the input field, i want tooltip to appear when ever there is validation check errors in the input field onBlur and disappear on focus
My HTML is:
<input class="span2" id="formName" rel="tooltip" data-placement="top" type="text" placeHolder="" onBlur="return validateName();" >
my javascript is
function validateName()
{
var x=document.getElementById("formName").value;
if (x==null || x==""){
$('#formName').tooltip({ 'title': 'Name Must Not Be Empty!' });
} else { $('#formName').tooltip('hide') }
}
Currently it is following default behaviour of appearing on mouseover, i want to make it appear whenever cursor leaves the input filed

i guess you should go through this http://api.jquery.com/blur/
<html>
<head>
<title>temp-stackoverflow</title>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="field" class="text-field">toggle cursor in and out of text box</input>
</body>
<script type="text/javascript">
$('.text-field').blur(function() {
$('body').attr('bgcolor', "#"+((1<<24)*Math.random()|0).toString(16))
});
</script>

Change the event trigger to onkeyup:
<input class="span2" id="formName" rel="tooltip" data-placement="top" type="text" placeHolder="" onkeyup="return validateName();" >

Enable submit button when filling in some field with text

I have the following form and javascript:
<script type="text/javascript">
function toggleButton(ref,bttnID){
document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>
<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>
When I first load my site the SUBMIT button is disabled, as I wanted, since the text field has no text in it. Now I would like to enable the button once some text has been placed within the text field.
Any help please?

The existing code in the question worked fine, but gets disabled when the text is removed. This may be desired by others but you could make a small change to have it permanently removed without needing jquery (jquery wasn't in the tags)
function toggleButton(ref,bttnID){
document.getElementById(bttnID).removeAttribute("disabled");
}
and add onkeyup="toggleButton(this,'bttnsubmit') to any fields that need to enable the button

Using jQuery:
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
});
});
source: jQuery disable/enable submit button

Adding the final code that did the trick:
<script type="text/javascript">
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('#subEmail').keyup(function() {
if($(this).val() != '') {
$('#bttnsubmit').removeAttr('disabled');
}
else {
$('#bttnsubmit').attr('disabled','disabled');
}
});
});
</script>