CODEWITHSUNDEEP
javascript
Sky
Sky

Reputation: 117

Js innerHTML how to add a auto id?

https://jsfiddle.net/3x97c81p/4/

function add_items() {
        var objTo = document.getElementById('item_area')
        var divtest = document.createElement("div");
        var sort_num = $('input[type="hidden"]:last').attr('sort[]') + 1 ;
        divtest.innerHTML = '<div class="row"><input type="text"  name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>';
        objTo.appendChild(divtest)
}

I need add a sort id in the input#sort[] 1..2..3...auto ++

I try $('input[type="hidden"]:last').attr('sort[]') to get the last#sort[] value. But undefined

Upvotes: 0

Views: 1961

Answers (4)

caramba
caramba

Reputation: 22480

The trick is to wrap the elements in <div id="item-area"> then you can count in there for the .row items ...

Your code had a little mess with vanilla JS and jQuery, so why not just do it in vanilla js: You don't need jQuery for this as you almost had it without.

function add_items() {
        var objTo = document.querySelector('#item_area')
        var divtest = document.createElement("div");
        var sort_num = objTo.querySelectorAll('.row').length + 1;
        divtest.innerHTML = '<div class="row"><input type="text"  name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>';
        objTo.appendChild(divtest)
}
<input type="button" id="more_fields" onclick="add_items();" value="Add More" class="buttonr" />

<div id="item_area">
  <div class="row">
    <input type="text" name="price">
    <input type="hidden" name="sort[]" value="1">
  </div>
  <div class="row">
    <input type="text" name="price">
    <input type="hidden" name="sort[]" value="2">
  </div>
</div>

Upvotes: 2

hityagi
hityagi

Reputation: 5256

Use this to get the value of the last sort input box;

var sort_num = parseInt($('input[name="sort[]"]:last').val());


function add_items() {
        var objTo = $('#item_area')
        var divtest = document.createElement("div");
        var sort_num = parseInt($('input[name="sort[]"]:last').val()) + 1;
        console.log(sort_num);
        divtest.innerHTML = '<div class="row"><input type="text"  name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>';
        objTo.append(divtest)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="more_fields" onclick="add_items();" value="Add More" class="buttonr" />

<div class="row">
  <input type="text" name="price">
  <input type="hidden" name="sort[]" value="1">
</div>
<div class="row">
  <input type="text" name="price">
  <input type="hidden" name="sort[]" value="2">
</div>

<div id="item_area"></div>

Upvotes: 0

Andrew
Andrew

Reputation: 449

You just targeted wrong attribute. Should be:

var sort_num = + $('input[type="hidden"]:last').attr('value') + 1;

Upvotes: 0

N. Ivanov
N. Ivanov

Reputation: 1823

Have a global counter, and increment each time you call add_items(). It will go back to 0 once you refresh the page. Also there is no sort[] attribute, so I updated the code to append the counter to the id.

var counter = 0;
function add_items() {
    var objTo = document.getElementById('item_area')
    var divtest = document.createElement("div");
    var sort_num = $('input[type="hidden"]:last').attr('id') + counter ;
    counter ++;
    divtest.innerHTML = '<div class="row"><input type="text"  name="price">
    <input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>';
    objTo.appendChild(divtest)
}

Hope this helps!

Upvotes: 0

Related Questions