Dynamically add input field with custom name

Question

I am trying to add input field dynamically with assign custom name from these aa,ab,ac,ad.

Here is the code:

<script>
$(function() {
  $('body').on('click', '.post-link', function() {
    $('#post-container').fadeIn();

    var post_title = $(this).closest('div').find('a').text();

    var val = $(this).text("val");
    if (val == "")
      var post_id = "aa";
    else if (val == "aa")
      var post_id = "ab";
    else if (val == "ab")
      var post_id = "ac";
    else
      var post_id = "ad";

    if ($('#post-container input').length <= 3)
      $('#post-container').append('<input name="' + post_id + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input>');
  });

  $('body').on('click', '.remove-title', function() {
    $(this).closest('input').remove();
  });

});
</script>

HTML:

<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

Now the problem is that this adds name="ad" for all four fields; but I need each field with a different name.

How to assign different name to each input field?

And why not remove-title link work?

Why don't you use the id or a numeric incremental value plus some prefix? — Sebastián Palma
– Sebastián Palma, Commented Mar 18, 2017 at 17:38
$(this).text("val"); what are you trying to get with this? It should be $(this).val() ! — Miro
– Miro, Commented Mar 18, 2017 at 17:44
for (var i = 0; i < 3; i++) $('body').append('<input name='+Math.floor(Math.random() * 99)+'/>'); — Jared Farrish
– Jared Farrish, Commented Mar 18, 2017 at 17:45
Are you using XML or HTML? <input name="' + post_id + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input> input is a void element, and void elements do not have an end tag--------------------------------------------- ^^^^^ Plus I'm not really sure an <a>nchor could be inside an input even if it wasn't a void element. — zer00ne
– zer00ne, Commented Mar 18, 2017 at 17:55

Codemole · Accepted Answer · 2017-03-18 17:48:52Z

3

Please try following:

$('body').on('click', '.post-link', function(){
  var names = ['aa', 'ab', 'ac', 'ad'];
  $('#post-container').fadeIn();
  var post_title = $(this).closest('div').find('a').text();

  for (var i=0; i<names.length; i++) {
    if ($('#post-container').find('input[name=' + names[i] + ']').length < 1) {
      $('#post-container').append( '<div class="row"><input name="' + names[i] + '" value="'+post_title+'">-- <a href="#" class="remove-title">REMOVE</a></input></div>' );   
      break;
    }
  }
});

$('body').on('click', '.remove-title', function() {
  $(this).closest('.row').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

edited Mar 18, 2017 at 17:48

answered Mar 18, 2017 at 17:46

Codemole

3,2095 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Codemole Over a year ago

@Farooq I did not pay attention for remove button as it is not focused on your question. Just fixed it up. Also will you mark my answer as accepted if it works well.

FRQ6692 Over a year ago

Need you help For relate question at Link

Codemole Over a year ago

@FRQ well, your question does not make sense to me.. maybe you can post another question with code samples and good description. I will try to answer there then...

FRQ6692 Over a year ago

I try best Your code work but. it insert all 4 input in one click

FRQ6692 Over a year ago

Just focus on Jquery, where need Max 4 input field with custom name aa, ab, ac, ad just like this question

Sebastián Palma · Accepted Answer · 2017-03-18 19:03:14Z

As Miro said, you're trying to get the value from the element in a wrong way.

Get it, get the rel value, that's dinamically printed with PHP, then assign it as the name value of the input joined with post_id and rel.

<script>
$(function() {
  $('body').on('click', '.post-link', function() {

    $('#post-container').fadeIn();

    var post_title = $(this).closest('div').find('a').text();

    // Get the value of the clicked element
    let val = $(this).val(),
    // Get the rel atribute value from the clicked element
        rel = $(this).attr('rel'),
    // Create the post_id variable to assign the value
       post_id = '';

    if (val === '') {
      post_id = 'aa';
    } else if (val === 'aa'){
      post_id = 'ab';
    } else if (val === 'ab'){
      post_id = 'ac';
    } else {
      post_id = 'ad';
    }

    if ($('#post-container input').length <= 3) {
      // Put it before the post_id assignation you did adding a "-" 
      // in order to separate post_id and rel values
      $('#post-container').append('<input name="' + post_id + '-' + rel + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input>');
    }

  });

  $('body').on('click', '.remove-title', function() {
    $(this).closest('input').remove();
  });

});
</script>

Collectives™ on Stack Overflow

Dynamically add input field with custom name

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related