Using jQuery: Add array index value to output
P粉567112391
P粉567112391 2023-09-16 09:54:22
0
1
521

I'm new to jQuery and JavaScript.

Managed to get the following code to work, adding a new text input field based on the number selected by the user from the (previous) dropdown selection field.

<script>
$(function() {

  var input = $('<input placeholder="输入名称或标题..." type="text" required/>');
  var newFields = $('');

  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
      if (n > newFields.length) {
        addFields(n);
      } else {
        removeFields(n);
      }
    }
  });

  function addFields(n) {
    for (i = newFields.length; i < n; i++) {
      var newInput = input.clone();
      newFields = newFields.add(newInput);
      newInput.appendTo('#newFields');
    }
  }

  function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
  }
});
</script>

However, in <input placeholder="Enter subject or title..." type="text" required/>, I want to add two attributes for each added field/ parameter:

  1. The first one is name="subject1", name="subject2"and so on, for each input field

For example, the output input label for the first field should be <input placeholder="Input subject or title..." type="text" name="subject1" required/>

  1. The second one is the field title ("Subject 1", "Subject 2", etc.), just before the <input> tag For example, the output input label for the first field should be "Subject 1: <input placeholder="Input subject or title..." type="text" name="subject1" required/>

How to implement this function?

P粉567112391
P粉567112391

reply all(1)
P粉262113569

This is a way to add topic title and name attributes.

You can do this using string concatenation, using the variable i.

$(function() {
  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    createFields(n)
  });

  function createFields(n) {
    $("#newFields").empty(); //清空字段列表

    for (var i = 1; i <= n; i++) {
      var fieldWrapper = $('
'); //创建包装器 var name = $("

主题 " + i + "

"); //创建主题标题 var input = $(''); //创建输入框 fieldWrapper.append(name); //添加标题 fieldWrapper.append(input); //添加输入框 $("#newFields").append(fieldWrapper); //添加到列表中 } } });


Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!