How can i Show an input #f_past_data when the text #f_past_farmaco gets filled in?
#f_past_farmaco is a text input.
I tried this but doesn't work.
$('label[for=f_past_data], input#f_past_data').hide(); // hiding label
$("select#f_past_farmaco").change(function(){
$(this).find("value").each(function(){
if($(this).attr("value")!==""){
$('label[for=f_past_data], input#f_past_data').fadeIn();
$('#f_past_data').css('display','block');
}
else{
$('label[for=f_past_data], input#f_past_data').fadeOut();
$('#f_past_data').css('display','none');
}
});
}).change();
HTML
<label for="f_past_farmaco">Farmaco </label>
<input type="text" id="f_past_farmaco" name="f_past_farmaco" value="" class="form-control">
<label for="f_past_data">Data </label>
<input type="date" id="f_past_data" name="f_past_data" value="2017-02-19" class="form-control">
change event only applied to select fields and checkboxes, you need to use keyup,keydown,keypress, try this
$(document).on('keyup',"#field1",function(){
var val = $(this).val();
if(val.length == 0)
{
$("#field2").hide();
}
else
{
$("#field2").show();
}
})
#field2{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="field1"/>
<input type="text" id="field2"/>
</div>
Pre: Please remove any duplicate ID from your document and then try this code...
$(document).on('keyup click keypress keydown','#f_past_farmaco',function(){
$(this).find("value").each(function(){
if($(this).attr("value")!==""){
$('label[for=f_past_data], #f_past_data').fadeIn();
$('#f_past_data').css('display','block');
}else{
$('label[for=f_past_data], #f_past_data').fadeOut();
$('#f_past_data').css('display','none');
}
});
});
Related
When i click on input then "focus" jquery is working fine, but when i load page then "email-field" has curser, my goal is that if input has curser on page load this should be foucus and also add 'class is-focused' , which is add on input click.
PLease help me.
or if we can do this by add class on fieldset then anyone type any value in input.
// For input focused animation
$("input:text:visible:first").focus();
$(function() {
$("input:text:visible:first").focus();
// Trigger click event on click on input fields
$("form input.form-control, form textarea.form-control").on("click, change, focus", function(e) {
removeFocusClass();
// Check if is-focused class is already there or not.
if(!$(this).closest('form fieldset').hasClass('is-focused')) {
$(this).closest('form fieldset').addClass('is-focused')
}
});
// Remove the is-focused class if input does not have any value
$('form input.form-control, form textarea.form-control').each(function() {
var $input = $(this);
var $parent = $input.closest('form fieldset');
if ($input.val() && !$parent.hasClass('is-focused')) {
$parent.addClass('is-focused')
}
});
// Remove the is-focused class if input does not have any value when user clicks outside the form
$(document).on("click", function(e) {
if ($(e.target).is("form input.form-control, form textarea.form-control, form fieldset") === false) {
removeFocusClass();
}
});
function removeFocusClass() {
$('form input.form-control, form textarea.form-control').each(function() {
var $input = $(this);
if (!$input.val()) {
var $parent = $input.closest('form fieldset');
$parent.removeClass('is-focused')
}
});
}
});
fieldset.is-focused input {
border:5px solid red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form class="user-login-form">
<div class="form-head"><h2 >Sign in</h2>
<div class="description-text" ><p class="small-text" data-drupal-selector="edit-line1">Not a member yet?</p>
Register now<p class="small-text" data-drupal-selector="edit-line2"> and join the community</p>
</div>
</div>
<fieldset class="js-form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name form-group col-auto">
<input type="text" id="edit-name--MmB1Jbss54g" name="name" value="" size="60" maxlength="254" placeholder="Email address" class="form-text required form-control" required="required" aria-required="true" autofocus>
<label class="option js-form-required form-required">Email address</label>
</fieldset>
<fieldset class="js-form-item js-form-type-password form-type-password js-form-item-pass form-item-pass form-group col-auto">
<input type="password" id="edit-pass--Db3_6vLkpJQ" name="pass" size="60" maxlength="128" placeholder="Password" class="form-text required form-control" required="required">Show
<label for="edit-pass--Db3_6vLkpJQ" class="option js-form-required form-required">Password</label>
<small id="edit-pass--Db3_6vLkpJQ--description" class="description text-muted">
<p class="small-text">Forgot your password? Click here</p></small>
</fieldset>
</form>
</body>
</html>
You just need to add class in fieldset on page load. you can do with one single line code.
$("input:text:visible:first").closest('form fieldset').addClass('is-focused');
You can also refer jsfiddle url here
I have this form that has a series of inputs. Input 1 changes the options for Input 2. Input 2 is blank and until input one is filled, I need to make it so that if the user clicks on input 2 to try to fill out first a message tells them to please select from input 1 first.
I have jQuery doing an alert box currently but how can I have the message show up in the input or right below it?
CodePen: https://codepen.io/anon_guy/pen/WXgZQw
HTML:
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
</form>
jQuery:
$( "#two" ).click(function() {
alert( "Please enter Input 1 First" );
});
It would make more sense, and be a better user experience, to only enable input 2 once input 1 has received a value. You can do that using the input event, like this:
$('#one').on('input', function() {
$('#two').prop('disabled', this.value.trim() == '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" disabled="disabled">
</form>
To add it inside the first input box (as a placeholder):
$("#two").click(function() {
if ($("#one").val() == "") {
$("#one").attr("placeholder", "Please enter Input 1 First");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
To add it as a message below the inputs:
$("#two").click(function() {
if ($("#one").val() == "") {
var newDiv = document.createElement('div');
newDiv.id = "newDiv";
newDiv.innerText = "Please enter Input 1 First";
$("form").append(newDiv, $("#two").next());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
The if statement will cause the message to only display if the first input box has no value:
if ($("#one").val() == "")
You can dynamically insert text/html via after() if the criteria isn't met. Though a more ideal approach would be to use focus over click in this case:
$( '#two' ).on('focus', function() {
if (!$('#one').val().length) {
$('#two').after('<p>Please enter Input 1 First</p>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
<p class="warning"></p>
</form>
You need to attach it to the parent.
You can evaluate the first input field to see if it is empty. There are a number of things you can do to remove the appended div.
$( "#two" ).click(function() {
if($("#one").val("")){
$(this).parent().append("<div>Please enter Input 1 First</div>");
}
});
Change the input field name of the checked check box row
Note: Type field may or may not exist in every row.
Like if name[] and type[] fields exists,change both name to name1[] and type1[]. or just change the name of name[] field if type[] does not exists.
$(document).ready(function() {
$(".click1").on('change', function() {
if($(this).is(":checked")) {
alert('checked')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="row_3">
<div class="col-md-6">
<input type="text" name="name[]">
<input type="text" name="type[]">
<input type="checkbox" name="click" class="click1">
</div>
</div>
</li>
You should .find('input[name^="type"]') and check if it exists, if yes, change the name of other input element to name1. Below is the updated code:
$(document).ready(function() {
$(".click1").on('change', function() {
if ($(this).is(":checked")) {
if ($(this).parent().find('input[name^="type"]').length) {
$(this).parent().find('input[name^="name"]').prop('name', 'name1[]');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="row_3">
<div class="col-md-6">
<input type="text" name="name[]">
<input type="text" name="type[]">
<input type="checkbox" name="click" class="click1">
</div>
</li>
Add ids to both elements so that you can easily access them within your code.
<input type="text" id="name" name="name[]">
<input type="text" id="type" name="type[]">
And, within your jQuery, change the names like this:
$(document).ready(function() {
$(".click1").on('change', function() {
if($(this).is(":checked")) {
$("#name").attr("name", "name1[]");
$("#type").attr("name", "type1[]");
}
});
});
The good thing is, if you remove the #type field, $("#type") will return an empty set, and you will not do anything to it.
My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs
$(document).ready(function() {
$('#send').attr('disabled', true);
$('.input,#check').on('keyup', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').attr('disabled', false);
} else {
$('#send').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.
You can put multiple event names in the argument to .on(), to handle both with the same code.
You also have an incorrect class .input, there are no elements with class="input" in the HTML. I've changed it to .input-cpk.
$(document).ready(function() {
$('#send').prop('disabled', true);
$('.input-cpk,#check').on('keyup click', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').prop('disabled', false);
} else {
$('#send').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
It's because you're using the wrong selector.
Try this
$('input,#check').on('keyup', function() {
Instead of this
$('.input,#check').on('keyup', function() {
Additionally you might want to use the .on('change') instead of .on('keyup')
I have a button which looks like an on off Button
Button is by default on but when user will click it should get off and when it is clicked it should disable the input field
my button is as
Button
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
Input field which i want to be disabled if above button clicks
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" required />
</div>
My Jquery code is as
$('#on_off').click(function(){
$('.FullName').prop('disabled', true);
});
I took above help from Disable Input field
Help Please its not working for me
First of your code is missing something. Like the control with class FullName
You can get the value of the checkbox by using $('#on_off').is(':checked') or in this case $(this).is(':checked') because we are using $('#on_off') click event.
Since you dont have a "Fullname" class anywhere in your example I added email to the Id field of the input
$('#on_off').click(function() {
$('.FullName [name="email"]').attr('disabled', $(this).is(':checked') ? false : true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="make-switch" checked id="on_off" name="double_optin" data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="disable me by click on checkbox" required />
</div>
Please try this code.
Here is your updated code:
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" id= "email"required />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#on_off').change(function() {
//alert();
if ($(this).prop('checked')) {
$('.FullName input').prop('disabled', false);
}
else {
$('.FullName input').prop('disabled', true);
}
});
});
</script>
Hope, this may help you.
use .attr('disabled',true) or .removeAttr('disabled') instead of .prop('disabled', true); if not working.
This is the easiest you can get.
Create a checkbox. In click event of checkbox, pass its state as a boolean to buttons disabled value.
Though I would suggest to use ready made toggle button. Link is here
$(document).ready(function(){
$(":checkbox").change(function(){
$(":button").prop("disabled",$(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox />
<input type=button value=Target />