I don't know how should I make a question to ask all of you , but I will try to explain. My question is that I would like to show element with which I have hidden in CSS , in my code there are same class container and result class
My expectation when I focus on the text 1 it should be shown only result of text 1 and text 2 will not make an action.
$('.examples').focus(function() {
$('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
You html has a div in a p element which is not value, so use div instead of p as the container, then you need to show the next div.example of the focused input so
$('.examples').focus(function() {
$(this).next('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
Related
I am looking to clone a div while also changing id's of the elements inside the mentioned div
The code i am using clone the div is
<!DOCTYPE html>
<html lang="en">
<body>
<form>
<div class="dynamic-field" id="dynamic-field-1">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-1" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-1" class="form-control" name="field[]" />
</div>
</div>
<div>
<button type="button" id="add-button">
Add
</button>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script>
$(document).ready(function () {
var buttonAdd = $("#add-button");
var className = ".dynamic-field";
var count = 0;
function totalFields() {
return $(className).length;
}
function addNewField() {
count = totalFields() + 1;
field = $("#dynamic-field-1").clone();
field.attr("id", "dynamic-field-" + count);
field.find("input").val("");
$(className + ":last").after($(field));
}
buttonAdd.click(function () {
addNewField();
});
});
</script>
</body>
</html>
The code used can clone div and change its id in an incremental manner. the problem is changing the element input id and name of the label
the cloned div's element's id needs to be like eg field-1,field2,..etc
The expected Result is..
<form>
<div class="dynamic-field" id="dynamic-field-">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-1" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-1" class="form-control" name="field[]" />
</div>
</div>
<div class="dynamic-field" id="dynamic-field-2">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-2" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-2" class="form-control" name="field[]" />
</div>
</div>
<div>
<button type="button" id="add-button">
Add
</button>
</div>
How can i achieve by altering the existing code and not using an entirely different method
Using Jquery attr:
field.find("input").attr("id","field-" + count);
field.find("label").attr("for","field-" + count);
I have an issue with my code, there is a Datalist in my html with 2 options, when the "Azienda" option is selected I want to show the div called "aziende", but when i select "Privato" I don't wanna show that div, but the problem is it show me the div when I select "Privato" too. Somebody can help me?
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<div id="aziende" style="display: none">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
let getvalue = document.getElementsByName('lista') [0];
getvalue.addEventListener('input', function() {
if(getvalue !== [0]){
document.getElementById('aziende').style="display: block";
}else{
document.getElementById('aziende').style="display: none";
}
})
</script>
As mentioned in the comments, your if test is incorrect. See comments below for details on the working solution.
.hidden {
display: none;
}
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<!-- Use CSS classes instead of inline styles when possible. -->
<div id="aziende" class="hidden">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
const div = document.querySelector("#aziende");
document.querySelector("[name='lista']").addEventListener('input', function() {
// Just check the value of the input
if(this.value === "Azienda"){
div.classList.remove("hidden"); // Show the div
} else {
div.classList.add("hidden"); // Hide the div
}
});
</script>
Your comparison (the if statement) is invalid. You're comparing the dom element 'getvalue' to an array with a single element of zero.
I believe you should compare the value of the the input element, not the element itself. you're also comparing it to an array? you should compare it to the value you're looking for:
if (getvalue.value !== 'Azienda') {
to help debug things like this, it's useful to use console.log or alert statements to display the value of the variable just before the test:
console.log('value of getvalue input element', getvalue.value);
if (getvalue.value
I would like to do this: on click of a button, put placeholder in all input fields marked with a red asterisk, the following code finds all asterisks:
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function () {
console.log(asterisks);
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
However, I tried to find the inputs below these asterisks and put the same placeholder in them, the following code does not work:
var inputs = $("label > span:contains('*').red").next().find("input");
$("#submit").click(function () {
console.log(inputs);
inputs.attr("placeholder", "This is a placeholder");
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
</label>
<input type="text" id="Middlename">
</div>
<div>
<label for="Lastname">
Last Name
<span class="red">*</span>
</label>
<input type="text" id="Lastname">
</div>
<input type="button" value="submit" id="submit">
What am I doing wrong here?
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function() {
asterisks.each(function() {
$(this).parent().next().attr("placeholder", "whut?");
});
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
You were very close to the solution. You found asterisks inside the labels so you need parent elements next sibling by chaining parent().next()
$("label > span:contains('*').red").next().find("input");
The .find() method looks at a matched element's child element. So you are getting the .next() element, and then looking for a child within it.
The input element is a sibling of the "red" element's parent. So you will need to do this:
$("label > span:contains('*').red").parent().next();
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I have 4 divs and one main div.Each div are coming on the new line.I want to join two divs together for using maximum space.
My code is
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#tabs").tabs();
$('#maindiv > div ').each(function(){
$(this).attr('style','padding-bottom: 10px;');
});
$('#maindiv > div > b').each(function(){
$(this).attr('style','width: 80px; display: inline-block;');
});
});
});//]]>
</script>
<div id="maindiv">
<div>
<b>Name:</b>
<input type="text" name="name" value=""/>
</div>
<div>
<b>Age:</b>
<input type="text" name="age" value=""/>
</div>
<div>
<b>Email:</b>
<input type="text" name="email" value=""/>
</div>
<div>
<b>Phone:</b>
<input type="text" name="phone" value=""/>
</div>
<div>
<b>City:</b>
<input type="text" name="city" value=""/>
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</div>
You can see my code from http://jsfiddle.net/CG6Vw/1/
How can I combine this?
Add display:inline-block
Div is by default block element so it occupies the entire space of the row, make it inline-block or inline to restrict it to the width according to the content available in it.
#maindiv > div {
padding-bottom: 10px;
display:inline-block
}
DEMO