How do I show a div (with classname) that is closest to my inputbox?
I have several inputboxes so i just need to display the specific inputbox.
In my example i want to show a div box above the input ( showing that the inputbox has wrong content i.e Numbers and not Letters ) if the inputbox has letters, the div must hide again.
So it should be a normal error report.
My Code is following:
https://jsfiddle.net/1mvb3wko/
function calculate(){
var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
var letter = /[a-zA-Z ]+/;
error1 = false;
error2 = false;
error3 = false;
var input = ['ID1','ID2'];
var element;
for(i=0;i <element.length; i++{
element = document.getElementById(input[i]);
if(regex.test(element.value) && letter.test(element.value)){
element.style.border = '4px solid red';
//Here's where i'm stuck
//i'm trying to SHOW the previous Div with class(Errorreport) if the input is wrong
//$(element).prev('.Errorreport').show(); doesn't work
}
}
}
Since there are already answers talking about the use of .closest I;m going to take a different approach and suggest that you remove all of those unnecessary <div> elements and focus on what you want to achieve. You want an error message to be displayed when the user types something wrong in one of the inputs.
You are better of using spans or labels, those are the elements that are often used to display form errors.
So you want a way to select all inputs. All of them have a .form-control class so you can use jQuery:
$('.form-control')
Watch for the change or blur events, whatever suits your needs and use jQuery's .parent() and .find() to find the error message and show it.
I changed a lot of your code to be cleaner and more descriptive of what it does:
https://jsfiddle.net/uf72taeu/2/
What you expected is there, just change if condition. By default I made it true.
function calculate(element) {
var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
var letter = /[a-zA-Z ]+/;
var inputBox = $(element);//$('#'+input[i]);
if (true/* regex.test(element.value) && letter.test(element.value) */)
{
var par = inputBox.parent(); // will return enclosed div
par = par.parent();// will return div with class 'row'
var errReport = par.prev(); // will return previous div, which is div with class 'row Errorreport'
// do whatever in errReport
errReport.css("display", "block");
inputBox.css("border", "4px solid red");
}
// }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Errorreport" style="display: none;">
<div>Error id 1</div>
</div>
<div class="row">
<div>
<input class="autoausgabe form-control " id="ID1"
onChange="calculate(this);">
</div>
</div>
<div class="row Errorreport" style="display: none;">
<div>Error id 2</div>
</div>
<div class="row">
<div>
<input class="autoausgabe form-control " id="ID2"
onChange="calculate(this);">
</div>
</div>
Related
So I'm building a form in HTML that makes use of a lot of checkboxes and hidden Divs. Right now I'm using
function HideDiv1() {
var checkBox = document.getElementById("Check1");
var div = document.getElementById("Div1");
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
<input type="checkbox" id="Check1">CheckBox to show Div1
<div id="Div1" style="display: none;">I should be hidden, assuming the author didn't mess up!</div>
To hide each div based on the appropriate checkbox. But this means that I am copying and rewriting this function every time and the section where I like to keep my functions is getting quite large. I was wondering if there was an easier way to do this such that I would only need one function and I could dynamically show and hide Divs without needing to copy and rewrite this function every time.
(If there is some easy JQuery solution to this: please keep in mind that I have no clue how to use JQuery)
This may be a duplicate, I saw the answer once before in the past but I have no idea how to find it again :(
You can use data attributes to identify which div to show when the checkbox is changed.
You can do this by listening for the change event on each checkbox and toggling the corresponding div with jQuery.toggle:
$('input[type=checkbox]').change(function(){
$('div[data-id='+$(this).data('target')+']').toggle()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>
Vanilla JS implementation:
document.addEventListener('click', function(e){
if(e.target.matches('input[type=checkbox]')){
let target = document.querySelector('div[data-id="'+e.target.dataset.target+'"]');
target.style.display = target.style.display == "none" ? "block" : "none";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>
You would add an onchange attribute to the checkbox to call a single function called hideDiv and pass it two arguments that are the ids of the checkbox and the div that you are hiding with that checkbox:
onchange="hideDiv("check1","div1")"
...then hideDiv uses the arguments passed to it to toggle the correct div:
function hideDiv(checkId, divId) {
const checkbox = document.getElementById(checkId)
const div = document.getElementById(divId);
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
Get in the habit of using let for variables that you need to change and const for variables that will not change value instead of var.
I would like to change display property of this input (actually of div which contains it) after onclick ("Click here"). This part goes well ... but after clicking again I want it to be hidden again (has display="none" instead of "block" again and so on) and here I have difficulties.
I've tried classList.toggle but ... I' don't want to change classes, I want to change just one property. I know there is also possibility of creating my input field by using Javascript but I presume I'll come to a deadlock again in the same point.
<form role="form">
<p id="mag">Click here!</p>
<div id="switch" class="xxx"style="display:none;" >
<input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" >
</div>
</form>
document.getElementById("mag").addEventListener("click", function toffi(){
document.getElementById("switch").style.display="block";
console.log(document.getElementById("switch").style.display);
});
http://codepen.io/zeeebra/pen/RgRYxK
Try this:
document.getElementById("mag").addEventListener("click", function toffi(){
var sw = document.getElementById("switch");
if (sw.style.display === "block") {
sw.style.display = "none";
} else {
sw.style.display = "block";
}
console.log(sw.style.display);
});
So i have a div element which will be filled dynamically with others divs using the appendChild Method, this should display a list. The User is now able to sort that list with the JqueryUI Sortable option.I also added some sortable option attribues like follows:
Options:
$("#NameContainer").sortable("option", "axis", "y");
$("#NameContainer").sortable( "option", "containment", "parent" );
LIST
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
</div>
Now comes my problem. The appendChild always inserts the new div at the bottom of the container but i want to to add some space at the bottom of to the Container Div with a "br" or something like that. I want to add that space to make sure that when the user sorts the last item of that list it will get sorted correctly because the "containment" bounds sometimes wont allow to sort under the last item.
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
<br><!--SPACEHOLDER-->
</div>
So here comes my Question is there away to appendChild above a certain element? Like a "br" "div" or "p"?
Try this instead of appendChild:
Please note I have used random value to add in div as I don't have your dynamic value.
check fiddle: https://jsfiddle.net/dqx9nbcy/
<div id="NameContainer" class="ui-widget">
<div id="divspacer"></div>
</div>
<button id="btn">ADD Element</button>
$(document).ready(function(){
$("#btn").click(function(){
var parentnode = document.getElementById("NameContainer");
var existnode = document.getElementById("divspacer");
var rand = Math.floor((Math.random() * 10) + 1);
var newName = document.createElement("div");
newName.setAttribute("id", rand);
newName.setAttribute("value", rand);
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = rand;
parentnode.insertBefore(newName,existnode);
});
});
refer http://api.jquery.com/appendto/ but you need to make sure that your are targeting right tag.
You can try with this code snippet.
HTML Snippet
<div id="NameContainer" class="ui-widget">
<div id="Name1">Name1</div>
<div id="Name2">Name2</div>
<div id="Name3">Name3</div>
<div id="Name4">Name4</div>
<br>
<br>
</div>
Javascript Snippet
$(document).ready(function(){
$("#btn").click(function(){
var containerDiv= $("#NameContainer");
var childList = containerDiv.children("div");
var newElementid = childList.length;
var newName = document.createElement("div");
newName.setAttribute("id", "Name"+(newElementid+1));
newName.setAttribute("value", "Name"+(newElementid+1));
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = "Name"+(newElementid+1);
$(childList[childList.length-1]).after(newName);
});
});
This is specific to a situation where there are some elements in the initial list. The same can be modified for dynamic list of implementation by validating that childList.length is != 0 before using the same.
I want to check if there is only one div with an error class. And if so, I want to .select() the content of the input (that's in the in corresponding input class div).
How would I do such thing?
My attempt which does not work:
if($("div.addition").hasClass(".error").length === 0) {
(this).parent().find('input').select();
}
HTML
<form>
<div class="input">
<input type="text">
<div>
<div class="addition">Message message.</div>
</div>
</div>
<div class="input">
<input type="text">
<div>
<div class="addition">Message.</div>
</div>
<div class="input">
<!-- So in this case this input's content will be selected -->
<input type="text">
<div>
<div class="addition error">Error message.</div>
</div>
</div>
</form>
Here's a jsFiddle that should do it - I mentioned as a comment to your post that you're missing a </div> tag, that is fixed in the fiddle - without it, the jquery selector matches two inputs. Outline of the js:
if ($('div.error').length === 1) {
errorContent = $('div.error').parents('div.input').find('input').val();
alert(errorContent);
}
Here's a plain JavaScript implementation. No need to use jQuery unless you're already using it.
var errors = document.getElementsByClassName('error');
if(errors.length === 1){
//If there is one class with error
var content = errors[0].innerHTML;
} else{
//there is more than one error class.
}
I want to check if there is only one div with an error class.
if ($("div.error").length === 1) {
// Exactly one div with the class "error"
}
else {
// Zero or more than one
}
By using jQuery it can be done like:
$(document).ready(function(){
var div = $('.error');
if(div.length){
var val = div.parents('.input:first').find('input').val();
//val is the value of input
}
});
Hi I'm trying to flip the input fields between two div elements. However, if a user enters text into the fields, the text disappears after the flip happens. Is there a way to make sure this value attribute is flipped too? Thanks.
Javascript:
function Flip ()
{
var oldslave = $('div.slave').html();
var oldmaster = $('div.master').html();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
HTML:
<div class="master">
<input type="text" name="master" id="master" size="42">
</div>
<input type="button" id="button1" onclick="Flip()" value="Flip">
<div class="slave">
<input type="text" name="slave" id="slave" size="42" class="slavefield">
</div>
You can use clone method like this:
function Flip() {
var oldslave = $('div.slave input').clone();
var oldmaster = $('div.master input').clone();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
http://jsfiddle.net/MaESg/
There is also another variant to achieve the same without using clone:
function Flip() {
$('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}
This one is preferable because appending (moving) nodes much more effective than recreating.
http://jsfiddle.net/MaESg/1/