JQuery, Create multiple html Element with ascending IDs?

user_15171970 0
Viewed 84

Here is what is needed to do:

<input type="text" id="main" placeholder="Put URL Here">

Every time the User Presses enter (or a Button on side of screen) I need Jquery to create:

<input type="hidden" id="url_1" readonly value='<-- input value from main-->'>
<!-- user adds another to #main -->
<input type="hidden" id="url_2" readonly value='<-- input value from main-->'>
<!-- etc -->

Here is what I got So far (only using HTML)

<figure class="mb-4">
<input type="text" name="" id="" placeholder="Image URL">
<button id="addimage">Add Image</button>
<button id="uploadimage_js">Upload Image</button>
</figure>

For the Upload Image button, It submits a Image to my PHP upload image, and just returns the URL to the image

html jquery javascript
4 Answers

This will append the hidden inputs to the end of your <form> tag. It also keeps an array of urls in case that's useful. For this snippet, it shows the array in a div.

let urls = [], limit = 2, main, addButton, resetButton
window.addEventListener('load', () => {
  main = document.querySelector('#main'),
  addButton = document.querySelector('[data-url-saver]'),
  resetButton = document.querySelector('[data-url-reset]');
  addButton.addEventListener('click', () => saveURL())
  resetButton.addEventListener('click', () => reset())
  })

const saveURL = () => {
  let u = main.value;
  urls.push(u);
  let h = `<input type="hidden" data-url-hidden id="url_${urls.length}" readonly value=${u} />`
  document.querySelector('form').insertAdjacentHTML('beforeend', h);
  main.value = "";
  let de = document.querySelector('#debug');
  de.innerHTML = urls.join(", ");
  if (urls.length >= limit) {
    addButton.setAttribute('disabled', 'disabled');
    main.setAttribute('disabled', 'disabled');
    main.setAttribute('placeholder', 'Maximum URLs accepted')
  }
}

const reset = () => {
  urls = [];
  document.querySelectorAll('[data-url-hidden]').forEach(e => e.parentNode.removeChild(e));
  addButton.removeAttribute('disabled');
  main.removeAttribute('disabled');
  document.querySelector('#debug').innerHTML = "";
}
<form>
  <input type="text" id="main" placeholder="Put URL Here">
  <button data-url-saver type='button'>enter</button>
  <button data-url-reset type='button'>reset</button>
</form>

<div id='debug'></div>

user_17729330

Create a div for hidden urls like

<div id="urls"></div>

try in jquery

var counter = 1;
$('#main').keypress(function (e) {
 if(e.which== 13){  // enter key code
    var url = $('#main').val();
    $('#urls').append('<input type="hidden" id="url_'+ counter +'" readonly value="' + url + '" >');
    $('#main').val(''); //clearing the input
    counter++;
  }
});
user_100914150

If you want to add ascending URL and if you have the link, then you can use the function below.

function addImage(){
  var link = document.querySelector('#main').value;
  var all_links = document.getElementById('all_urls');
  if (link.length > 0){
    code = `
    <input type="hidden" id="url_${all_links.children.length}" value="${link}"/>
    `
    all_links.innerHTML += code;
    console.log(document.getElementById('all_urls'))
  }
}
<figure class="mb-4">
<input type="text" id="main" placeholder="Put URL Here">
<div id="all_urls">
<!--All the links are added here-->
</div>
<button id="addimage" onclick="addImage()">Add Image</button>
<button id="uploadimage_js">Upload Image</button>
</figure>

user_147855310

In jQuery

// Cache some elements
const div = $('div');
const main = $('#main');

$('button').click(() => {

 // Grab the value
 const val = main.val();

 // Create the id based on the current
 // number of inputs 
 const id = div.find('input').length + 1;

 // Append the new input
 div.append(`<input readonly id="url_${id}" value="${val}" />`);

 // Reset the main input 
 main.val('');

});
div { margin-top: 1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="main" />
<button>Click</button>
<div></div>

And the equivalent in vanilla JS:

// Cache some elements
const div = document.querySelector('div');
const main = document.querySelector('#main');
const button = document.querySelector('button');

button.addEventListener('click', handleClick, false)

function handleClick() {

 // Create the id based on the current
 // number of inputs 
 const id = div.querySelectorAll('input').length + 1;

  const html = `<input readonly id="url_${id}" value="${main.value}" />`;

 // Append the new input
 div.insertAdjacentHTML('beforeend', html);

 // Reset the main input 
 main.value = '';

};
div { margin-top: 1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="main" />
<button>Click</button>
<div></div>

user_13770020
Related