I would like to achieve that when I move from group1 input to group2 input, blur event is caught, so I can make additional actions. Isn't blur event propagated upper to parents?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
$( document ).ready(function() {
$("[data-id=container]").on("blur", function() {
alert("Blur caught in parent");
});
});
</script>
</head>
<body>
<div data-id="container" style="border: 1px solid gray;">
Group 1
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div data-id="container" style="border: 1px solid gray;">
Group 2
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>
</html>
I am not able to completely understand your question, but assuming that you want to have some form of validation when you change from group 1 to group 2 I am writing the following code. The following snippet is a general form that you may customize to your need.
<input type="text" id="one" onblur="validate">
<input type="text" id="two" onblur="validate">
<input type="text" id="three" onblur="validate">
<script type="text/javascript>
function validate()
{
var a = document.getElementById("one");
var b = document.getElementById("two");
var c = document.getElementById("three");
if (b.hasFocus() == true) //checks if the second input box has focus
{
alert("Value of the focused field is "+a.value); //this will give you the value in the first input box
}
else if (c.hasFocus() == true) //checks if the third input box has focus
{
a.focus(); //this will get the focus back on the first input box
}
}
</script>
Related
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>");
}
});
Let's imagine I have three inputs :
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
and one div table that should drop down when writing some data into input "a" or input "b".
Well the logic I want to to take is:{
if you click and add some data to input a show that table to me->table appears->if I click on input b dont hide that div, however if I click somewhere else for example in input c, hide the table.
It's been 3rd day I cannot do this.
P.S. My boss told not to use $timeout. It should be done with blur and focus
Just wrap input a and b in same class and then use blur and focus on that class.
$(document).ready(function(){
$('#showab').hide();
$("input.change").focus(function(){
$('#showab').show();
});
$("input.change").blur(function(){
$('#showab').hide();
});
});
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="change" type="text" id="a">
<input class="change" type="text" id="b">
<input type="text" id="c">
<div id="showab">table here</div>
$("#showData").hide();
function lookup(arg) {
var id = arg.getAttribute('id');
var value = this.value;
console.log(id);
if (id === "a" || id === "b") {
$("#showData").show();
} else {
$("#showData").hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="a" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="b" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="c" onkeyup="lookup(this);" onClick="lookup(this);">
<div id="showData">A Or B is Clicked here</div>
You want to make use of classes when hiding or showing your div containing the table.
Also take note of the Jquery focus (click into) and blur (click out of) classes
$(".show").focus(function()
{
$('#showTable').show();
});
$(".show").blur(function()
{
$('#showTable').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="show" type="text" id="a">
<input class="show" type="text" id="b">
<input class="dontShow" type="text" id="c">
<div id="showTable" hidden="hidden">
<table>
<thead>
<tr><th>test 1</th><th>test 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</tbody>
</table>
</div>
Can you please take a look at this demo and let me know why I am not able to use the each iterator to check empty inputs?
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(){
if($(this).val().length > 0){
$(this).addClass('error');
}
});
});
.error{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>
Try:
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(i,v){
console.log($(v).val().length)
if($(v).val().length == 0){
$(v).addClass('error');
}
});
});
.error{border-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>
<input> elements at html at Question do not have value attribute to return .length of ?
Try setting value attribute at input elements to retrieve $(this).val() or this.value within .each() ; substituting .toggelClass() for .addClass() to toggle "error" class at #test element click event if input .length changes
$("#test").on("click", function(e) {
e.preventDefault();
$("input").each(function() {
$(this).toggleClass("error", !this.value.length);
});
});
.error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1" value="">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2" value="1">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3" value="">
<br />
<br />
<button id="test">Test</button>
i have no problem with your code, everything is running.
if i fill something into the inputs then it is running into the if-clause.
but what you want to do with "error"? since version 1.8 it is deprecated and
in your coding there is no error-handler, you give a string as parameter to error not a handler (function).
read : https://api.jquery.com/error/
in your case it is better to give the parent-element to the each function like:
$("input","body").each(
if you want to work with error, then:
$('#myelement').on('error',function(){ /*your error code */});
for your example it is not the right way to bind the error handler on your input-element, if you want to check the values of the inputs. the error-handler catch thinks like "undefined" but it is not a system-error if your inputs are empty.
try:
if($(this).val().length > 0){
console.log('Input Val has ' + this).val().length + ' characters')
}
If I understand your query correctly, you want the empty input fields to be highlighted once you click the "Test" button, while the one's with values should not be highlighted. If so, then please check this solution:
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(){
if($(this).val().length == 0){
$(this).addClass('error');
}else{
$(this).removeClass('error');
}
});
});
.error{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>
I'm pretty new to JavaScript and I'm having an issue using it to remove a CSS property.
Here is what I'm trying to do:
I'm trying to have a text input box invisible when a checkbox is unchecked, and make it visible when the box is checked. Here is the code I have:
<html>
<head>
<script>
if (document.box.test.checked == true)
{document.getElementById("test").style.display == "";
}
</script>
<body>
<form name="box">
<input type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>
Any and all help is greatly appreciated. Thanks everyone!
You can use the onchange event on the checkbox
<input type="checkbox" name="test" value="engraved" onchange="show_hide()">
and then toggle the input box
function show_hide()
{
if (document.box.test.checked) {
document.getElementById("test").style.display = "block";
} else {
document.getElementById("test").style.display = "none";
}
}
JSFiddle for testing
There are 2 problems here.
the script you wrote changes the display to "" which will still show
the text box it should be display="none";
the script will not run every time a person changes the value of the check-box.
try this.
Encapsulate your check into a function and then add the function to the body onload event and the checkbox's oncchage event.
<script>
function checkHideTextField()
{
if (document.box.test.checked == true)
{
document.getElementById("test").style.display == "none";
}
}
</script>
<body onload="checkHideTextField()">
<form name="box">
<input onchage="checkHideTextField()" type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>
I have been trying to do this all day. At the end i managed to get it working. I know it is not the best way to do.
Can someone please show me a better way. I need 12 altogether. It does not need to be check box either. It can be just a text. I got the idea from com/2006/12/14/using-jquery-to-show-hide-form-elements-based-on-a-checkbox-selection/
I managed to upload it on http://utilitybase.com/paste/wmq
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme").click(function(){
// If checked
if ($("#checkme").is(":checked"))
{
//show the hidden div
$("#extra").show("fast");
}
else
{
//otherwise, hide it
$("#extra").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra1").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme1").click(function(){
// If checked
if ($("#checkme1").is(":checked"))
{
//show the hidden div
$("#extra1").show("fast");
}
else
{
//otherwise, hide it
$("#extra1").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra2").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme2").click(function(){
// If checked
if ($("#checkme2").is(":checked"))
{
//show the hidden div
$("#extra2").show("fast");
}
else
{
//otherwise, hide it
$("#extra2").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra3").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme3").click(function(){
// If checked
if ($("#checkme3").is(":checked"))
{
//show the hidden div
$("#extra3").show("fast");
}
else
{
//otherwise, hide it
$("#extra3").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra4").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme4").click(function(){
// If checked
if ($("#checkme4").is(":checked"))
{
//show the hidden div
$("#extra4").show("fast");
}
else
{
//otherwise, hide it
$("#extra4").hide("fast");
}
});
});
</script>
</head>
<body>
<div style="width: 800px;">
<form>
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme" type="checkbox" />
<div id="extra">
<input type="text" name="input" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme1" type="checkbox" />
<div id="extra1">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme2" type="checkbox" />
<div id="extra2">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme3" type="checkbox" />
<div id="extra3">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme4" type="checkbox" />
<div id="extra4">
<input type="text" name="" maxlength="30" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
If I got you right, you might play around with
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var prototype = $('.prototype').clone();
$('.prototype > input[type="checkbox"]').live('click', function() {
if($(this).is(':checked')) {
var clone = prototype.clone();
clone.find('input[type="checkbox"]').attr('checked', false);
$(this).parent('.prototype').append(clone);
} else {
$(this).parent('.prototype').find('.prototype:last').remove();
}
});
});
</script>
</head>
<body>
<form>
<div class="prototype">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme" type="checkbox" />
</div>
</form>
</body>
</html>
EDIT: This add's a new input/label/checkbox prototype inside the current one or removes it's children on the other hand. You could add ids to the fields as well.
thats nice .
Did you try .each or .live
http://api.jquery.com/each/
http://api.jquery.com/live/
Hmm. Looking at your code on UtilityBase. Maybe try using the .siblings() jquery function. Then for the click of the checkbox you can do a $(this).siblings('div').hide()/show();
This usually works for me
$("div[id^='extra']").click(function(){
$div = $(this);
divID = $div.attr("id").substring(5);
//Hide div w/id extra
$div.css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme"+divID).click(function(){
// If checked
if ($("#checkme"+divID).is(":checked"))
{
//show the hidden div
$div.show("fast");
}
else
{
//otherwise, hide it
$div.hide("fast");
}
});
This should keep you from having to write the same thing multiple timesdiv
You could try something like this:
// isolate the first div. You can surely find a better way,
// using classes, containers, etc., but this works for now.
// Hide all the others.
$('div:has(input):not(:first)').hide();
// For each checkbox, open the next div
$('input:checkbox').click( function(){
if( $(this).is(':checked') ) {
$(this).next('div').show('fast');
} else {
$(this).next('div').hide('fast');
}
});