Question

我有一个form用户会写一个他想要的number (int)，然后除button之外还有textbox必须阅读value写在input上，并创建用户在textboxes中撰写的modal的确切数字。

这是我到目前为止所尝试的，但我无法得到任何结果。

<input id="my_input" name="test1"  type="text" value="" >

<button data-toggle="modal" data-target="#myModal" onclick="add_input()" id="add_input1"  name="" type="submit">GO</button>

 <script>
function add_inputs()
{
    n = $('#my_input').val();
    console.log(n);

    for (var i = 1; i < n; i++);
        console.log(i);

    $("#rolonum_" + i).html('<span>Item 1</span><input id="rolo_add' + i + '" name="addposition"  type="text" value="" required/>');
}

</script>

Answer 1

试试这个

＆＃13;

  function add_inputs() {
    n = $('#my_input').val();
    $("#rolonum").html('');
    for (var i = 1; i <= n; i++) {
      $("#rolonum").append('<span>Item ' + i + ' </span><input id="rolo_add' + i + '" name="addposition"  type="text" value="" required/><br>');

    }

  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="my_input" name="test1" type="text" value="">

<button data-toggle="modal" data-target="#myModal" onclick="add_inputs()" id="add_input1" name="" type="button">GO</button>

<div id="rolonum">

</div>

＆＃13;

Answer 2

你有一些问题。在生成元素时，您必须有一个放置元素的位置。还修复了几个不匹配的选择器（你的onclick函数名称与实际的函数名称不匹配），并用更合适的内容替换了内联onclick。试试这个......

var btn = $("#add_input1");
btn.on('click',function() {
	var n = $("#my_input").val();
  console.log(n);
  
  for (var i = 1; i <= n; i++) {
  $("#inputs").append('<span>Item '+i+'</span><input id="rolo_add'+i+'" name="addposition"  type="text" value="" required/><br/>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my_input" name="test1"  type="text" value="" >

<button data-toggle="modal" data-target="#myModal" id="add_input1"  name="" type="submit">GO</button>

<div id="inputs"></div>

Answer 3

代码问题：

您已将JS函数定义为“add_inputs”，但已将onclick函数绑定到“add_input”（请注意缺少的“s”）。
在函数“add_inputs”中，你在“for”子句之后放了一个分号，实际上使它无用，因为没有代码可以执行循环的迭代
您需要将动态生成的输入框放在DOM上的某个位置。这些可能在身体内部或其他一些元素。您已尝试将它们插入带有id（“#rolonum_”+ i）的元素中，这是错误的，因为这样的元素不存在。

正确的代码是：

function add_inputboxes() {
  n = $('#my_input').val();
  if (n < 1)
    alert("ERROR: Enter a positive number");
  else {
    $("#rolonum").html('');
    for (var i = 1; i <= n; i++) {
      $("#rolonum").append('<p><span>Item ' + i + ' </span><input id="rolo_add' + i + '" name="addposition"  type="text" value="" required/></p>');
    }
  }
}

//Yet Another way to do the same thing
 jQuery('#add_input2').click(add_inputboxes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my_input" name="test1" type="text" value="">

<button data-toggle="modal" data-target="#myModal" id="add_input1" name="" type="button" onclick="add_inputboxes()">GO</button>

<!-- Yet Another button to do the same thing -->
<button data-toggle="modal" data-target="#myModal" id="add_input2" name="" type="button">Create Inputs</button>


<p>The Buttons go in #rolonum :</p>
<div id="rolonum"></div>

Answer 4

此：

        for(var i = 1; i < n; i++);

这是一个无用的陈述。最后的;基本上说“这是一个什么都不做的循环”。循环将运行，它将增加i，但最后，它会 ALL 。没有正文，所以除了i++之外你没有执行任何操作。

也许你想要更像

的东西

for (...) {
   console.log(i);
   $('#rolonum_"+i).etc....
}

代替。

Answer 5

您已设置type="submit"将提交该页面，您的功能将不会被调用。将类型更改为type="button"

之类的按钮

<button data-toggle="modal" data-target="#myModal" onclick="add_input()" id="add_input1"  name="" type="button">GO</button>

同样修改Marc B指出的功能

Answer 6

试试这个：

$(document).ready(function(){

    $("#add_input1").on("click",function(){

        n = $('#my_input').val();

        for(var i = 1; i <=n; i++) {

            $("body").append('<span>Item'+ i + ' : </span><input id=rolo_add'+i+' name=addposition type=text value="" required/><br>');

        }
    })
})

最终代码：

    <!DOCTYPE html>
    <html>
    <head>
        
    </head>
    <body> 
        
        <input id="my_input" name="test1"  type="text" value="" >
        <button data-toggle="modal" data-target="#myModal" id="add_input1"  name="" type="submit">GO</button>
        <br><br>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>  
            
        $(document).ready(function(){

            $("#add_input1").on("click",function(){

                n = $('#my_input').val();

                for(var i = 1; i <=n; i++) {

                    $("body").append('<span>Item'+ i + ' : </span><input id=rolo_add'+i+' name=addposition type=text value="" required/><br>');

                }
                console.log(i-1);
            })
        })
        
        </script>
    </body>
    </html>

使用javascript

6 个答案: