Develop Reference

Iterate through buttons by class and display data from parent div of the selected button in a modal

I have been trying for days now to figure out what I am doing wrong here. I have buttons for items that are located on different pages and they all use the same modal that contains a form and item details, depending on which button is selected.
The buttons have the same class and when clicked I need to get the attributes from the button's parent div (several divs above the button) and display the data from parent div in the modal. I am using Wordpress and I cannot add the attributes to the buttons, so I had to add them to a parent div.
I can get the code to work perfectly in visual studio but when I add it to Wordpress I keep getting errors in the console stating "Can't create duplicate variable that shadows a global property: 'l'" and "Can't create duplicate variable: 'modalBtns'". I cannot use button onclick for the buttons as Wordpress restricts that from what I have read, so I have to do it another way.
I have scoured Google and tried every suggestion I have found on this site and many others. I renamed 'modalBtns', broke code down into functions and put the functions outside the loop, added the functions inside the loop, changed modalBtns to var, constant..nothing is working. I don't know how to clear the errors.
I am also having issue with the modal not getting the data as the code has already ran prior to the modal loading so the id's for the modal divs I am putting the data in are not even present when code runs. I have to add item name to a hidden field of the form and add image, price, description. I tried delaying the code in the section where it is looking for modal divs but it still doesn't work.
This is what I have that works in Visual Studio but not on Wordpress. I don't know what I am doing wrong.
<div class="modalBtn" data-pkg="Package #1" data-price="124" data-duration="month" data-desc="This + that" data-img="main">
<div id="otherDiv">
<button id="Package1" class="premium-price-pricing-button">Package 1</button>
</div>
</div>
<div class="modalBtn" data-pkg="Package #2" data-price="234" data-duration="month" data-desc="Another descrpition" data-img="thumbnail">
<div id="otherDiv">
<button id="Package2" class="premium-price-pricing-button">Package 2</button>
</div>
</div>
<div class="modalBtn" data-pkg="Package #3" data-price="345" data-duration="each" data-desc="" data-img="custom">
<div id="otherDiv"></div>
<button id="Package3" class="premium-price-pricing-button" >Package 3</button>
</div>
<div id="modal">
<h1 id="modalTitle">This is the title</h1>
<img id="modalImg" src="defaultImg.png"/>
<p><span id="modalPrice">100</span><span id="modalDuration">month</span><span id="modalDesc">Description here</span></p>
<form action="/action_page.php">
<label for="name">First name:</label><br>
<input type="text" id="name" name="name" value="John"><br>
<label for="pkg">Package:</label><br>
<input type="text" id="pkg" class="pkgFormField" name="pkg" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</div>
This is the code
//Get all buttons with classname premium-price-pricing-button
let modalBtns = document.getElementsByClassName('premium-price-pricing-button');
//Iterate through buttons & add event listener, when clicked run updateModal function
for (var i = 0; i < modalBtns.length; i++) {
modalBtns[i].addEventListener('click', updateModal);
}
function updateModal() {
//Get parent div which has data attributes
let parentDiv = this.closest('.modalBtn');
//Get/set attribute data-pkg from parent and set as pkg
let pkg = parentDiv.getAttribute("data-pkg");
//Get/set variables from parent attributes
let price= parentDiv.getAttribute("data-price");
let duration = parentDiv.getAttribute("data-duration");
let desc = parentDiv.getAttribute("data-desc");
let btnImg = parentDiv.getAttribute("data-img");
let modalImg = document.getElementById("modalImg");
//Find hidden form field & name field
let pkgField = document.getElementById("pkg");
let nameField = document.getElementById("name");
//Set default image for modal
let img = "image1.png";
//Find modal ids and replace innerHTML with parent attributes
document.getElementById("modalTitle").innerHTML = pkg;
document.getElementById("modalPrice").innerHTML = price;
document.getElementById("modalDuration").innerHTML = duration;
document.getElementById("modalDesc").innerHTML = desc;
//If img attribute is 'custom' or 'thumbnail' replace it with alternate image
if (btnImg == "custom"){
img = "image2.png";
}
if (btnImg == "thumbnail") {
img = "image3.png";
}
//Set img for modal
modalImg.src = img;
//Set pkg value in form to pkg
pkgField.value = pkg;
}

Wrap your JS Code within function like this:
(function () {
/**
* Put your code here.
*/
})();

How do I change more than one element?

EDIT: I changed the var to class but I might have some error in here.
Here it goes, I want to have this paragraph in which the user can change the name on the following paragraph. The code I'm using only changes one name but the rest remains the same.
<script type="text/javascript">
function changey(){
var userInput = document.getElementById('userInput').value;
var list = document.getElementByClassName('kiddo');
for (let item of list) {
item.innerHTML = userInput;
}
}
</script>
<input id="userInput" type="text" value="Name of kid" />
<input onclick="changey()" type="button" value="Change Name" /><br>
Welcome to the site <b class="kiddo">dude</b> This is how you create a document that changes the name of the <b class="kiddo">dude</b>. If you want to say <b class="kiddo">dude</b> more times, you can!
No error messages, the code only changes one name instead of all three.

Use class="kiddo" instead of id in the html.
You can then use var kiddos = document.getElementsByClassName('kiddo') which will return an array of all the elements of that class name stored in kiddos.
Then you just need to loop through the values and change what you want.
Example of loop below:
for (var i = 0; i < kiddos.length; i++) {
kiddos[i].innerHTML = userInput;
}

id should be unique on the page. Javascript assumes that there is only one element with any given id. Instead, you should use a class. Then you can use getElementsByClassName() which returns an entire array of elements that you can iterate over and change. See Select ALL getElementsByClassName on a page without specifying [0] etc for an example.

Hello You should not use id, instead use class.
Welcome to the site <b class="kiddo">dude</b> This is how you create a document that changes the name of the <b class="kiddo">dude</b>. If you want to say <b class="kiddo">dude</b> more times, you can!
After That on Js part :
<script type="text/javascript">
function changey(){
var userInput = document.getElementById('userInput').value;
var list = document.getElementByClassName('kiddo');
for (let item of list) {
item.innerHTML = userInput;
}
}
</script>

you should use class instated of id. if you use id then the id [kiddo] must be unique

In short, document.querySelectorAll('.kiddo') OR
document.getElementsByClassName('kiddo') will get you a list of elements to loop through. Take note of querySelectorAll, though - it uses a CSS selector (note the dot) and doesn't technically return an array (you can still loop through it, though).
See the code below for some full working examples (const and arrow functions are similar to var and function, so I'll put up a version using old JavaScript, too):
const formEl = document.querySelector('.js-name-change-form')
const getNameEls = () => document.querySelectorAll('.js-name')
const useNameFromForm = (formEl) => {
const formData = new FormData(formEl)
const nameValue = formData.get('name')
const nameEls = getNameEls()
// Set the text of each name element
// NOTE: use .textContent instead of .innerHTML - it doesn't get parsed, so it's faster and less work
nameEls.forEach(el => el.textContent = nameValue)
}
// Handle form submit
formEl.addEventListener('submit', (e) => {
useNameFromForm(e.target)
e.preventDefault() // Prevent the default HTTP request
})
// Run at the start, too
useNameFromForm(formEl)
.name {
font-weight: bold;
}
<!-- Using a <form> + <button> (submit) here instead -->
<form class="js-name-change-form">
<input name="name" value="dude" placeholder="Name of kid" />
<button>Change Name</button>
<form>
<!-- NOTE: Updated to use js- for js hooks -->
<!-- NOTE: Changed kiddo/js-name to spans + name class to remove design details from the HTML -->
<p>
Welcome to the site, <span class="js-name name"></span>! This is how you create a document that changes the name of the <span class="js-name name"></span>. If you want to say <span class="js-name name"></span> more times, you can!
</p>
var formEl = document.querySelector('.js-name-change-form');
var getNameEls = function getNameEls() {
return document.querySelectorAll('.js-name');
};
var useNameFromForm = function useNameFromForm(formEl) {
var formData = new FormData(formEl);
var nameValue = formData.get('name');
var nameEls = getNameEls(); // Set the text of each name element
// NOTE: use .textContent instead of .innerHTML - it doesn't get parsed, so it's faster and less work
nameEls.forEach(function (el) {
return el.textContent = nameValue;
});
};
// Handle form submit
formEl.addEventListener('submit', function (e) {
useNameFromForm(e.target);
e.preventDefault(); // Prevent the default HTTP request
});
// Run at the start, too
useNameFromForm(formEl);
<button class="js-get-quote-btn">Get Quote</button>
<div class="js-selected-quote"><!-- Initially Empty --></div>
<!-- Template to clone -->
<template class="js-quote-template">
<div class="js-quote-root quote">
<h2 class="js-quote"></h2>
<h3 class="js-author"></h3>
</div>
</template>

You have done almost everything right except you caught only first tag with class="kiddo".Looking at your question, as you need to update all the values inside tags which have class="kiddo" you need to catch all those tags which have class="kiddo" using document.getElementsByClassName("kiddo") and looping over the list while setting the innerHTML of each loop element to the userInput.
See this link for examples:https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

try:
document.querySelectorAll('.kiddo')
with
<b class="kiddo">dude</b>

How to POST additional values from inputs outside the form [duplicate]

I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.
My HTML Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
Fill Details
So, a user will enter an integer value (I'm checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.
I'm not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.

You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():
If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.
Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
Fill Details
<div id="container"/>
</body>
</html>
See a working sample in this JSFiddle.

Try this JQuery code to dynamically include form, field, and delete/remove behavior:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>

show a number of inputs type text equal to the number of selected files in my input file without send form

Im uploading multiple pdfs at same time, and Im trying to find a method to give a a custom title for each uploaded pdf.
So I thought at first using php, I store a variable to count pdfs that the user selected
$countPdfs = count($_FILES['pdfs']['tmp_name']);
And then in my form, I have some php where I show a text input to write a title for each pdf that I upload.
<div class="galerry">
<div class="label">
<span class="field">Pdfs:</span>
<input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf" />
<div class="j_gfalsepdf">Select many pdfs</div>
<img src="img/upload.png" class="j_gsendpdf"/>
</div>
<?php
if(isset($countPdfs )){
for($i=1;$i<=$countPdfs ;$i++){
echo '<div class="label">';
echo '<span class="field">Pdf Title:</span>';
echo '<input type="text" name="title" />';
echo '</div>';
}
}
?>
</div>
And so If I select 5 pds it shows me 5 text inputs, it is working fine.
But I need to send my form and only after send form my inputs appear.
Do you know how can I do this using jQuery? After I select my pdfs in my input file, show the same number of input texts that my number of selected pdfs?
Im already using this jQuery function below to show in my input the number of pdfs that user select:
$('.j_gsendpdf').click(function(){
$('.j_gallerypdf').click().change(function(){
var numFiles = $(this)[0].files.length;
$('.j_gfalsepdf').animate({width:'400'}, 500, function(){
$(this).html('You selected'+ numFiles +'</strong> files.');
});
});
});
But do you know how can I use this numFiles also to open a number of input texts icual to my numFiles variable?

One approach is the following:
// binding a change event-handler to the file-input(s):
$('input[type="file"]').on('change', function(){
// finding the closest '.gallery' element, then finding
// its descendant 'fieldset' element, removing the 'empty' class
// (that it has on page-load to hide it while empty):
var fieldset = $(this).closest('.gallery').find('fieldset').removeClass('empty'),
// we're using the fileList so we're caching it, the other two are
// used later (in the for loop):
files = this.files, curFile, label;
for (var i = 0, len = files.length; i < len; i++){
// caching the 'current file' in the prepared variable:
curFile = files[i];
// creating a label element, keeping a reference in the
// prepared variable:
label = $('<label />', {
'html' : 'Change the name of <span class="filename">' + curFile.name + '</span>?'
// appending the created 'label' to the fieldset:
}).appendTo(fieldset);
// creating an 'input' element:
$('<input />', {
'type' : 'text',
// the current value is the current file-name:
'value' : files[i].name
// appending that to the created/appended 'label' element:
}).appendTo(label);
}
});
JS Fiddle demo.
The above approach relies on the presence of a fieldset identifying where the createdinput elements should be appended, so I've changed your HTML to the following:
<form action="#" method="post">
<div class="gallery">
<div class="label"> <span class="field">Pdfs:</span>
<input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf" />
<div class="j_gfalsepdf">Select many pdfs</div>
<fieldset class="empty">
<legend>Titles</legend>
</fieldset>
</div>
</div>
</form>
This approach is, however, moderately naive: if you reselect new files from the file input it will create, and append, new <label> and <input> elements. This could be partially countered (assuming it's not an inconvenience to you, or your users, by removing previously-created elements), using empty(): JS Fiddle demo.
References:
appendTo().
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
find().
on().

I did it this way.
$('.j_gallerypdf').click().change(function(){
var allFiles = this.files;
var numFiles = this.files.length;
$('.j_gfalsepdf').animate({width:'400'}, 500, function(){
$(this).html('You selected'+ numFiles +'</strong> files.');
for(var i = 0; i<numFiles; i++) {
var file = allFiles[i], name = file.name;
$(this).append('<input type="text" name="title[]" value="'+name+'"/>');
}
});
});

javascript: use getElementByID to populate multiple divs

is there a way to write the same thing clientside using javascript to multiple divs or multiple spots on a page?
I have a php script outputting rows from a database. To edit the contents, I would like to insert a checkbox before each row as with the iphone edit contacts and to do it quickly, I'm trying to use javascript to populate a div with a checkbox before each row using getElemenByID.
One problem is you cannot have more than one div of the same name on a page so I can't write once and have it populate multiple divs of the same name. If I give divs different names than I have to write multiple times which is not appealing especially as the number of rows may vary.
As a related question would checkboxes inserted using javascript even work?
Here is non working code:
js
function edit() }
var box = '<input type="checkbox name=num[]>';
var target = "checkbox";
document.getElementById(target).innerHTML = box;
return;
}//end function
html (generated by PHP from dbase)
<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit()";>edit</a>
<div id="checkbox"></div>Row1 contents<br>
<div id="checkbox"></div>Row2 contents<br>
<form type = "submit" value="Edit">
</form>
Does anyone know a way to do this ie make boxes appear that can then be selected for submission?
Many thanks for any suggestions.

Should be generated using PHP instead, but...
HTML
I'm guessing that you want to use a span element (not a div) for your checkbox placeholder, otherwise you'd have a checkbox on one line, and then "Row1 contents" below the checkbox, versus having the checkbox next to the text.
[X]
Row 1 Contents
versus (span)
[X] Row 1 Contents
<form action="edit.php" method="post" name="frmRows" id="frmRows">
edit
<span class="checkbox"></span>Row1 contents<br>
<span class="checkbox"></span>Row2 contents<br>
<input type = "submit" value="Edit">
</form>
JavaScript
It's not recommended to use .innerHTML in JavaScript unless absolutely necessary (not supported in all browsers, and there are better ways to accomplish the same task.)
function edit() {
var newCb;
var i;
var checkboxList = document.getElementsByClassName( 'checkbox' );
for ( i = 0; i < checkboxList.length; i++ ) {
newCb = document.createElement( 'input' ); // Create a new input element
newCb.setAttribute( 'type', 'checkbox' ); // Set attributes for new element
newCb.setAttribute( 'value', 'SomeValueHere' );
newCb.setAttribute( 'name', 'checkboxName' );
newCb.setAttribute( 'id', 'checkbox-' + i );
checkboxList[i].appendChild( newCB ); // Add checkbox to span.checkbox
}
}

The ID attribute must be unique on each page. You could use the class attribute like this:
<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>
and then you can use
var check = getElementsByClassName('checkbox');
for (var i=0; i< check.length; i++) {
check[i].innerHTML = box;
}
But... this will not work in IE < 9. If you are using a framework like jQuery they already implemented a workaround for this but with pure JS you have to implement this yourself.
jQuery example
HTML
<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>
JS
var box = '<input type="checkbox" name="num[]" />';
$(".checkbox").html(box);

The HTML
The first thing to do is to update the generated HTML. In HTML element id attributes should be unique just like field names inside a form. To classify multiple elements as similar you should use the class attribute.
Here is an example of how you could structure the HTML.
<form action="edit.php" method="post">
edit
<div id="row1Identifier" class="editCheckbox"></div>Row1 contents</br>
<div id="row2Identifier" class="editCheckbox"><?div>Row2 contents</br>
<input type="submit" value="Submit">
</form>
The javascript
Using document.getElementsByClassName will return a list of elements with the matching class.
​function edit () {
// set up the variables used in this function
var checkboxDivs = document.getElementsByClassName('editCheckbox'),
i,
loopDiv;
// make the change to each div
for (i = 0; i < checkboxDivs.length; i += 1) {
loopDiv = checkboxDivs[i];
loopDiv.innerHTML = '<input type="checkbox" name="' + loopDiv.id + '">';
}
}​

Even if you could do it with a single line (using jQuery, for exemplo), you would actually be running a loop through all the divs (that's the only way to change something in various elements: change it in each one).
So you can do this with pure JavaScript using a loop to run the modifications in all the divs, getting them by id (the faster way):
for(var i = 0; i < numberOfDivs; i++){
document.getElementById("myElement" + i).innerHTML = box; //concatenating i to a base id
}
You could also use another slower techniques to get elements by tag name or class, or even use a lib such as jQuery.

If you use jquery:
function edit() {
// box = '<input type="checkbox name=num[]>';
var target = "checkbox";
$(".cb").html(box);
return;
}//end function
<form action="edit.php" method="post">
edit
<div class="cb" id="checkbox">aa</div>Row1 contents<br>
<div class="cb" id="checkbox">bb</div>Row2 contents<br>
</form>