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>");
}
});
Related
Is it possible to have a textbox where the user will input a number and in another textbox, which will automatically add 5 to the value of the first textbox and subtract 5 to the value in the third textbox?
For example:
User input: 10
2nd textbox: 15
3rd textbox: 5
Please help
You can do it like this:
<input type="text" id="input1" onkeyup="setValues(this.value);">
<input type="text" id="input2">
<input type="text" id="input3">
<script type="text/javascript">
function setValues(value){
document.getElementById('input2').value = (parseInt(value)+5);
document.getElementById('input3').value = (parseInt(value)-5);
}
</script>
you can find solution Link.
HTML Part
<input type="number" id="input1">
<input type="number" id="input2">
<input type="number" id="input3">
JS Part
$('#input1').bind('click keyup', function(event) {
$('#input2').val(parseInt(this.value)+5);
$('#input3').val(parseInt(this.value)-5);
})
I am trying to create a form validation using HTML and JQuery to check that all the input fields are not empty when a "Submit" button is clicked. If any of them are empty, the Submit button will not process the form, and will change the color of the empty input fields to Yellow and display a message at the bottom of the form (using innerHTML in a .
This are the relevant HTML codes:
<body>
<div id="div_main">
<form action="process.html" method="POST">
<div id="div_left">
<p>Name:</p>
<p>Age:</p>
<p>Gender:</p>
</div>
<div id="div_right">
<p><input type="text" id="name" name="name"></p>
<p><input type="text" id="age" name="age"></p>
<p><input type="text" id="gender" name="gender"></p>
</div>
<input type="submit" id="chksubmit" value="submit"/>
<div id="divmessage"></div>
</form>
</div>
</body>
And these are my relevant JQuery codes to perform the validation:
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$('#chksubmit').click(function(){
if($('#name').val()==''){
$('#name').css('background-color','yellow');
$('#divmessage').append("Please enter Name.")
success = false;
}
});
$('#chksubmit').click(function(){
if($('#age').val()==''){
$('#age').css('background-color','yellow');
$('#divmessage').append("<br>Please enter Age.")
success = false;
}
});
$('#chksubmit').click(function(){
if($('#gender').val()==''){
$('#gender').css('background-color','yellow');
$('#divmessage').append("<br>Please enter Gender.")
success = false;
}
});
});
</script>
When I click the Submit with empty input boxes, the form still goes through instead of stopping. I can't figure out why.
Check the below example
$(document).ready(function() {
$('#chksubmit').on("click", function(e) {
//clean divmessage
$('#divmessage').html("");
//or use $("#div_main form input") to check all inputs
$("#name, #age, #gender").each(function() {
$(this).css('background-color', '');;
if ($(this).val().replace(/\s+/g, " ").trim() == '') {
$(this).css('background-color', 'yellow');
success = false;
$('#divmessage').append("<br>Please enter " + $(this).data("for"))
}
});
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_main">
<form action="process.html" method="POST">
<div id="div_left">
<p>Name:</p>
<p>Age:</p>
<p>Gender:</p>
</div>
<div id="div_right">
<p><input type="text" data-for="Name" id="name" name="name"></p>
<p><input type="text" data-for="Age" id="age" name="age"></p>
<p><input type="text" data-for="Gender" id="gender" name="gender"></p>
</div>
<input type="submit" id="chksubmit" value="submit" />
<div id="divmessage"></div>
</form>
</div>
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');
}
});
});
I have one button that displays number "1" when clicked and three text boxes. I want when the button is clicked the number is displayed on the text box that has focus. Can someone help me please.
function run(){
document.calc.txt1.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
t3">
When you click a button, the previous input looses focus. You could try to store the last focused input element before the click:
(this needs some more work)
var lastFocus = null;
document.addEventListener("blur", function(event) {
// Here, you'll need to find out if the blurred element
// was one of your valid inputs. It's probably best to
// identify them by a class name
if (event.target.type === "text") {
lastFocus = event.target;
}
}, true);
function run() {
// When the user hasn't yet focused on a text input,
// the first one is used by default
(lastFocus || document.calc.txt1).value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
var currId;
function setId(curr){
currId=curr.id;
}
function run(){
if(currId)
{
document.getElementById(currId).value +='1';
}
//document.calc.txt1.value += "1";
//document.activeElement.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1" onblur="setId(this)">
<input type="text" id="txt2" name="txt2" onblur="setId(this)">
<input type="text" id="txt3" name="txt3" onblur="setId(this)">
</form>
Ok, so this code snippet should do what you want. The main thing to note though is that whenever you click the button, the input box becomes blurred that you had selected.
Essentially what this code does here is set the onfocus attribute to allow you to figure out which input box was last focused, rather than which input box IS focused, because none are. Also, I'd recommend changing the button to a 'button' tag because it separates it in terms of tag name from the other input boxes.
Hope this helped, and let me know if you have any questions.
var inputs = document.getElementsByTagName('input');
for(var i = 1 ; i < inputs.length; i ++){
inputs[i].onfocus = function(){
this.setAttribute('class','focused');
}
}
function run(){
var inputBox = document.getElementsByClassName('focused')[0];
if(inputBox){
inputBox.value += "1";
inputBox.setAttribute('class','blurred');
}
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
I have 4 text fields. When i enter a value in first text box cursor should move to next text box. That is onkeyup() i need to perform action of tab key.
Is there any javascript or jquery for that
You can try this
HTML
<input type="text" class="focus" />
<input type="text" class="focus" />
<input type="text" class="focus" />
<input type="text" class="focus" />
JS
$(".focus").keyup(function(){
if($(this).val() != "")
{
$(this).next(".focus").focus();
}
});