inserting html code in jquery and give html syntax issue

Question

I wanna use an html in jquery.I use this code :

$(document).ready(function(){
    $("#registerNums").click(function(){
      var inputnums = parseInt($("#inputnums").val());
      for(var i=1; i < inputnums + 1; i++){
        var inputmems =
        '<div class="form-row">'+
           '<div class="form-group col-md-6">'+
            '<label for="inputmems">Enter the number of your input' + i + ' '  + 'membership functions:</label>'+
            '<input type="text" class="form-control" id="inputmems'+ i + ' ' + 'name="inputmems'+ i + ' ' + ' placeholder="Enter inputmems">'+
          '</div>'+
        '</div>';
        $("#1").after(inputmems);
      }
    });
  });

when i click on my registerNums button it append my form but i get the wrong syntax in my html code using inspect element:

<input class="form-control" id="inputmems1 name=" inputmems1="" placeholder="Enter inputmems" type="text">

that if you see after my id it extends name in it and other problems

how can i fix this?

MyTwoCents · Accepted Answer · 2018-08-05 11:38:16Z

1

Ok. there is some syntax issue while you create input string. It has to be like this

'<input type="text" class="form-control" id="inputmems'+ i + '" name="inputmems'+ i +  '" placeholder="Enter inputmems">'+

Just change this line in your script

Working fiddle

answered Aug 5, 2018 at 11:38

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

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

Comments

Dejan.S · Accepted Answer · 2018-08-05 11:47:01Z

0

You should put the double quotes.

$(document).ready(function() {
  $("#registerNums").click(function() {
    var inputnums = parseInt($("#inputnums").val());
    for (var i = 1; i < inputnums + 1; i++) {
      var inputmems =
        '<div class="form-row">' +
        '<div class="form-group col-md-6">' +
        '<label for="inputmems">Enter the number of your input' + i + ' ' + 'membership functions:</label>' +
        '<input type="text" class="form-control" id="inputmems"' + i + ' ' + 'name="inputmems"' + i + ' ' + ' placeholder="Enter inputmems">' +
        '</div>' +
        '</div>';
      $("#1").after(inputmems);
    }
  });
});

answered Aug 5, 2018 at 11:47

Dejan.S

19.2k22 gold badges73 silver badges122 bronze badges

Comments

Sunny Kumar · Accepted Answer · 2018-08-05 11:48:52Z

    $(document).ready(function(){
    $("#registerNums").click(function(){
      var inputnums = parseInt($("#inputnums").val());
      var inputmems = "";
      for(var i=1; i < inputnums + 1; i++){
        inputmems +=
        '<div class="form-row">'+
           '<div class="form-group col-md-6">'+
            '<label for="inputmems">Enter the number of your input' + i + ' '  + 'membership functions:</label>'+
            '<input type="text" class="form-control" id="inputmems'+ i + ' ' + 'name="inputmems'+ i + ' ' + ' placeholder="Enter inputmems">'+
          '</div>'+
        '</div>';
      }
      $("#1").append(inputmems);
    });
  });

please use var inputmems and append outside of for loop.

aghashamim · Accepted Answer · 2018-08-05 12:08:55Z

0

It looks like there is a problem with the html string that you're preparing. You can use Template literals which can make your life easier while preparing a html string with parameters.

var inputmems = `<div class="form-row"><div class="form-group col-md-6"><label for="inputmems">Enter the number of your input${i} membership functions:</label><input type="text" class="form-control" id="inputmems${i}" name="inputmems${i}" placeholder="Enter inputmems"></div></div>`;

answered Aug 5, 2018 at 12:08

aghashamim

5863 silver badges9 bronze badges

Collectives™ on Stack Overflow

inserting html code in jquery and give html syntax issue

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related