JavaScript add EventListener - javascript

I have make the html by javascript. how we can find out the which delete button is pressed
<div id="maindiv">
<div id="product_1">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_1">Delete</button>
</div>
<div id="product_2">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_2">Delete</button>
</div>
</div>

use this
var btn = document.querySelectorAll('button')
btn.forEach(function(item) {
item.addEventListener('click', function() {
console.log('clicked id: ' + this.id);
});
});
<div id="maindiv">
<div id="product_1">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_1">Delete</button>
</div>
<div id="product_2">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_2">Delete</button>
</div>
</div>

You can try this. Hope this helps.
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener('click',function(){
console.log(this.id);
})
}
<body>
<button id='delete'>Delete</button>
<button id='save'>Save</button>
</body>

Related

How to get the class name within multiple divs

I was trying to create other fields to be unclickable when the first input is focused but it seems it doesn't work. I did an illustration so that it will be understandable and my code looks like this.
May I know where I did it wrong?
$('.form-control').click(function() {
$(this).parent('div').next().children('.form-control').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
You want something like this:
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
$(this).parent('div') returns something like <div class="name"> and then using .next() will not find anything since it don't have any siblings.
Demo
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.
Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');
Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>
I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

How to copy text from one textfield input to another using a BTN?

I need to copy text values from one textfield input to another. How can I do this?
I have created a js fiddle, which has a text form that once I click on edit details, another form will pop-up. In that new form, I want to be able to enter text in any of the textfields present and then once I hit save. The newly entered text will be moved/copied/transfered to the original textfields on the screen.
here is the jsfiddle - https://jsfiddle.net/xsuh6pf7/2/
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name">
<div class="dotOne"> ? </div>
<span class="nameHelp"> Please enter first and last name </span>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" class="email">
<span class="dotThree">?</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" class="number">
<span class="dotFour">?</span>
</div>
<br>
</form>
<button class="btn" onclick="openForm()">Edit Details</button>
<div id="container">
<button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button>
<button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button>
<div id="Name" class="tabcontent">
<form>
<div class="nameDiv">
Title: <input type="text" name="firstname" title="name" class="name">
</div>
<br>
<div class="addressDiv">
Name: <input type="text" name="lastname" id="nameTransfer">
</div>
<br>
<div class="emailDiv">
Surname:
<input type="text" name="Email" id="LastNameTransfer">
</div>
<br>
<div class="numberDiv">
Email Address:
<input type="text" name="Phone number" class="number">
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" class="number">
</div>
<button type="submit" id="save-btn" onclick="moveContent()">Save</button>
</form>
</div>
<div id="Address" class="tabcontent">
<form>
<div class="nameDiv">
Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name">
</div>
<br>
<div class="addressDiv">
Line 2: <input type="text" name="lastname" value="Mouse" class="address">
</div>
<br>
<div class="emailDiv">
Suburb:
<input type="text" name="Email" value="Email" class="email">
</div>
<br>
<div class="numberDiv">
State:
<input type="text" name="Phone number" value="Phone number" class="number">
</div>
<br>
<div class="numberDiv">
Country:
<input type="text" name="Phone number" value="Phone number" class="number">
</div>
<button class="save-btn" onclick="">Save</button>
</form>
</div>
</div>
You can use
document.getElementbyId("textfieldToTransfer").value = document.getElementbyId("textfieldOfData").value;
on the function of your button.
I think the issue preventing other answers/comments from working for you (use of document.getElementById()) is that none of your <input /> actually have the id attribute - just name, e.g.
<input type="text" name="firstname" value="Mickey" title="name" class="name">
You would either need to add id="firstname" so you could actually do:
document.getElementById("firstname").value = document.getElementById("firstnameTransfer").value
Or, you could use document.querySelector() to select the right <input /> without adding the id attribute, e.g.:
document.querySelector("input[name='firstname']")
In your Javascript, you can try adding
document.getElementById("name").onchange = function(){
nameChange();
}
function nameChange(){
document.getElementById("nameTransfer").value = document.getElementById("name").value;
}
This of course will only work for the name input.

auto fill other fields when a select option is selected in handlebars

i have a modal that looks like this and i wanna auto fill the price input value whenever i choose a product from the article list. How do I go about to achieve this ? Thank you
<div class="modal-body">
<div>
<label for="type">article</label>
<select id="article" name="article" class="form-control">
{{#each articles}}
<option>{{name}}</option>
{{/each}}
</select>
</div>
<input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
<input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
<input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
<button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>
any help ??
I didn't test it, but something like this..?
<div class="modal-body">
<div>
<label for="type">article</label>
<select id="article" name="article" class="form-control">
{{#each articles}}
<option data-price="{{price}}">{{name}}</option>
{{/each}}
</select>
</div>
<input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
<input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
<input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
<button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>
<script>
$(document).ready(function () {
$('#article').change(function () {
var price = $(this).find(':selected').attr('data-price');
$('#price').attr('value', price);
});
});
</script>

How to detect in jquery which button element was clicked inside a php loop?

So my code is something like this:-
for($i=0;$i<$length;$i++){
?>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input id="submitScore" type="submit" value="submit" >
</div>
<?php
}
?>
In Jquery I want to detect which button was clicked and based on that button I want to take the input field entered by user.
You can do it like below (one example):-
$(document).ready(function(){
$('.submitScore').click(function(e){
e.preventDefault();
alert($(this).prev().attr('name'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input class="submitScore" type="submit" value="submit" >
</div>
<div id="scoreDiv">
<input type="text" name="myscore1" placeholder="Enter your score1" required>
<input type="text" name="oppoScore1" placeholder="Your opponent score1" required>
<input class="submitScore" type="submit" value="submit" >
</div>
Note:- class is treated as group-selector while id is treated as individual-selector in Jquery.Thanks
You could try something like the below:
$(function(){
$(".js-btn").on("click",function(){
var btn = $(this);
var txtBoxes = btn.siblings('input');
console.log($(txtBoxes[0]).val());
console.log($(txtBoxes[1]).val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
Since id should be unique, Use class attribute instead of id and try below code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function () {
$('.submitScore').on('click',function () {
var div_el = $(this).parent('.scoreDiv');
var myscore = div_el.find('input[name="myscore"]').val();
var oppoScore = div_el.find('input[name="oppoScore"]').val();
alert(myscore+'----'+oppoScore);
return false;
})
});
</script>
</head>
<?php
for($i=0;$i<5;$i++){
?>
<div class="scoreDiv">
<input type="text" name="myscore" placeholder="Enter your score" required>
<input type="text" name="oppoScore" placeholder="Your opponent score" required>
<input class="submitScore" type="submit" value="submit" >
</div>
<?php
}
?>

Categories