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>
Related
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I'm working in a little project with JQuery, and i having a problem removing error classes from html elements.
I'm using $('selector').on('input') to get the event and remove the input class, my problem is when the field is generated with JavaScript;
Example
$('#one').on('input',function(){
$('#two').val( $('#one').val() );
});
$(':input').on('input', function ()
{
if ($(this).hasClass('example'))
{
$(this).removeClass('example');
}
});
.example
{
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="example">
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" readonly="readonly" id="two">
In this case, i change #two value when #one changes, #one remove .example but #two dont
I need to remove .example class from #two input
EDIT: I want to do it in a generic way because i have a LOT of this cases in my project
Is some way to trigger that kind of changes?
Thanks so much!
Maybe the code I wrote below help you. It's not perfect but it's a good point of start.
I added a custom attribute that I called data-group for the inputs that are of the same "group".
I also modified the listener for input in a way that from a single listener function, you will have all inputs listening.
Check if this helps you.
$('.example').on('input',function(){
var value = this.value;
var groupName = $(this).attr('data-group');
var groupElems = $("[data-group='"+groupName+"']");
groupElems.removeClass('example');
groupElems.val(value);
});
.example
{
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" data-group="group1" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" data-group="group1" readonly="readonly" id="two">
<h2>Problem</h2>
<label for="three">#THREE</label>
<input type="text" class="example" data-group="group2" id="three">
<br/>
<label for="four">#FOUR</label>
<input type="text" class="example" data-group="group2" readonly="readonly" id="four">
<h2>Problem</h2>
<label for="five">#FIVE</label>
<input type="text" class="example" data-group="group3" id="five">
<br/>
<label for="six">#SIX</label>
<input type="text" class="example" data-group="group3" readonly="readonly" id="six">
Inside the true branch of your if statement, use the .nextAll() method, along with a selector to find the next input following this. That way, when the first input has the class removed, the next input that follows it will have its class removed as well.
Also, change your input event setup so that it is set to work on input elements of a certain class in the first place and give the first of each set of inputs that class.
$('#one').on('input',function(){
$('#two').val( $('#one').val() );
});
// Only when an input with the "input" class gets input
$('input.input').on('input', function () {
if ($(this).hasClass('input')) {
$(this).removeClass('input');
// Find the next input sibling that follows "this"
$(this).nextAll("input").removeClass("input");
}
});
.input {
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="input">
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="input" id="one">
<br>
<label for="two">#TWO</label>
<input type="text" class="input" readonly="readonly" id="two">
You can check, if the current field is #one using .is() :
$(':input').on('input', function () {
if(($(this).is("#one"))) {
if ($('#two').hasClass('example'))
{
$('#two').removeClass('example');
}
}
if ($(this).hasClass('example'))
{
$(this).removeClass('example');
}
});
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>
All what I want to do is, when the user clicks on a button, the content of the div should append at the bottom. My code works fine if I paste the content inside the div in the javascript displayed below:
My question:
1.) Without having to copy paste the code that was in the HTML to JAVASCRIPT is there any other way I could get this done.
2.) I want the name and also the value attribute of the input field to be unique (like append a number at the end ). How can I do this ?
My jQuery looks like this:
$(document).ready(function(){
$("#btn").click(function(){
$("#boxid").append('<br/>
<div class="input-group">
<input type="text" class="form-control" id="myid" placeholder="hey" value="2">
<div class="input-group-addon">?</div>
</div>
');
});
});
HTML
<button id="btn">Add another row</button>
<form action="gone/" method="get">
<div id="boxid">
<div class="input-group">
<input type="text" class="form-control" id="myid" placeholder="hey" value="2">
<div class="input-group-addon">?</div>
</div>
</div>
</form>
You can use $.clone().
$(document).ready(function() {
var counter = $('.form-control').last().val();//Get the last .form-control value, in case you decide to have more than one by default (this way the counter can start from 2 e.g)
$("#btn").click(function() {
counter++; //Increase counter
$("#boxid").append($('.input-group').eq(0).clone()); //Clone the existing first .input-group
$("#boxid .input-group").last().find('.form-control').attr('name', counter).val(counter); //Select the last appended .input-group, find the .form-control input, change input's name and value with the counter
});
});
.input-group{
margin-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Add another row</button>
<form action="gone/" method="get">
<div id="boxid">
<div class="input-group">
<input type="text" class="form-control" id="myid" placeholder="hey" value="1" name="1">
<div class="input-group-addon">?</div>
</div>
</div>
</form>
Initialize counter with the last input's value
In case of click on #btn increase counter.
Append to #boxid the clone of the first (.eq(0)) .input-group (It doesn't really matter if it's the first, just used it as first = template).
Select the last .input-group inside #boxid and change its name and value with the counter.
I left your <br>behind, is not used nowadays, a more correct way is using css margin (a margin of 1em is like 1 text line)
Try this code :
$(document).ready(function(){
$("#btn").click(function(){
if(checkUnique('myid')){//to check unique id
$("#boxid").append('<br/>
<div class="input-group">
<input type="text" class="form-control" id="myid" placeholder="hey" value="2">
<div class="input-group-addon">?</div>
</div>
');
}
else{
$("#boxid").append('<br/>
<div class="input-group">
<input type="text" class="form-control" id="myid1" placeholder="hey" value="2">
<div class="input-group-addon">?</div>
</div>
');
}
});
});
function checkUnique(ex){
if($('#'+ex).length==0){
return true;}
else
{return false;}
}
When i need something like this is, i use a hidden div containing template elements. When ever i need a realization of a template, i simply copy the template, change some placeholders and add it to my target element.
PS: include https://jsfiddle.net/cvf2f7dn/1/ of #Illep
css
#templates { display: none }
html
<div id="targetDiv"></div>
<div id="templates">
<div id="templeateForInputGroup">
<div class="input-group">
<input type="text" class="form-control" id="myid%%counter%%" placeholder="hey" value="%%counter%%">
<div class="input-group-addon">?</div>
</div>
</div>
</div>
<button id="addmore">Add more</button>
js
$('#addmore').click(add);
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
var counter = 0;
function add(){
var cloneHTML = $('#templeateForInputGroup').html().toString();
cloneHTML = cloneHTML.replaceAll('%%counter%%', counter);
counter++;
$('#targetDiv').append(cloneHTML);
}
Basically, I have two radio button 'yes' and 'no' and then a further two input fields.
[LabelQuestion] [RadioYes][RadioNo]
If yes, then... [TextField1]
If no, then... [TextField2]
By default I would like to have text fields 1 and 2 inactive/not able to enter in data until the relevant radio button has been selected and then that field only becomes available for data input.
I am a complete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.
My current code looks like this:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" name="field1" placeholder="" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" name="field2" placeholder="" />
</li><br>
How about this little number:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("readonly",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("readonly");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("readonly");
$("#field2").focus();
}
});
});
You'll find a JSFiddle here.
Please note I've added an ID to both <input> fields. Let me know how it fairs.
If you prefer for the <input> fields to be disabled rather than readonly, just replace readonly with disabled everywhere. I personally think readonly is nicer as the Operating System seems to make more of it's own effect on disabled inputs.
The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.
You could use http://jquery.com/ to do this:
include this in the head of your html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
And also add this javascript:
<script type="text/javascript">
$(document).ready(function () {
function checkradiobox(){
var radio = $("input[name='example']:checked").val();
$('#field1, #field2').attr('disabled',true);
if(radio == "Yes"){
$('#field1').attr('disabled',false);
$("#field1").focus();
}else if(radio == "No"){
$('#field2').attr('disabled',false);
$("#field2").focus();
}
}
$("#example_0, #example_1").change(function () {
checkradiobox();
});
checkradiobox();
});
</script>
Check the jsfiddle for a working example http://jsfiddle.net/KFgbg/3/
Add this javascript/jQuery to your html, this should do the trick:
<script type="text/javascript">
$(function () {
// First add disabled properties to inputs
$("input:text").prop('disabled', true);
// Yes Input
$("#example_0").on("click", function () {
$("#input1").prop('disabled', false);
$("#input2").prop('disabled', true);
});
// No Input
$("#example_1").on("click", function () {
$("#input2").prop('disabled', false);
$("#input1").prop('disabled', true);
});
});
</script>
Very basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled="true" />
there are many ways to do this, but to edit your code as little as possible, here's one way:
give your textboxes ID attributes as well as names
disable via html attribute both text boxes to start
onclick of 'yes' radio button, enable field1 and disable field2
onclick of 'no' radio button, disable field1 and enable field2
<script language="Javascript">
function hideA()
{
document.getElementById("A").style.visibility="hidden";
document.getElementById("B").style.visibility="visible";
}
function hideB()
{
document.getElementById("B").style.visibility="hidden";
document.getElementById("A").style.visibility="visible";
}
</script>
</head>
<body>
<form name="f1" method="post" action="">
<table>
<tr><th>catagory</th><th><input type="radio" name="cat" value="seller"
onClick="hideB()">Seller
<input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>
</tr>
<div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
Seller Name<input type='text' name='sname'><br>
Seller Product<input type='text' name='sproduct'>
</div>
<div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
Buyer Name<input type='text' name='bname'><br>
Buy Product<input type='text' name='bproduct'>
</div>
</form>