协助使用 HTML 中的可扩展表单



我正在为武术比赛制作在线报名表。到目前为止,我一切都很好。但是,在某一部分,用户可以选择他们希望输入多少申请人参加比赛。他们选择的数量将决定出现的条目行的数量。我不确定该怎么做,如果你们中的任何天才可以帮助我吗?

提前谢谢你。

从您的描述来看,如果最终用户选择 8 作为他们将在比赛中注册的人数,那么接下来的一系列注册元素将与他们选择的人数相对应。

这是我的PHP文件中的HTML表单:

空手道比赛.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form name = "my-form" id = "my-form">
        <select name = "number-of-participants" id = "number-of-participants">
            <option value = "1">1</option>
            <option value = "2">2</option>
            <option value = "3">3</option>
            <option value = "4">4</option>
            <option value = "5">5</option>
            <option value = "6">6</option>
            <option value = "7">7</option>
            <option value = "8">8</option>
        </select>
        <div id = "entry-details-area">
          <!-- This is where we'll dynamically insert our rows -->
        </div>
    </form>
</body>
<!--First, grab jQuery from Google we need this--> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!--Next, include my logic--> 
<script src = "karate.js"></script>
</html>

接下来,我们将用"karate.js编写我们的自定义逻辑,并且我们确保在从Google获取jQuery将该文件包含在PHP页面中(只需插入显示的行即可动态地将jQuery包含在PHP页面中)

这是我的jQuery(Javascript库)逻辑,当用户选择特定数量的参与者时,我将使用它来动态加载HTML元素:

空手道.js:

  //This is my HTML select element "number-of-participants"
  var participants_selector = $("#number-of-participants"); 
  //This is where I want to add my dynamic HTML input elements
  var entry_details_area = $("#entry-details-area");
  //Each time a new value is chosen, grab their number of participants
  participants_selector.on("change", function()
  {
    //Get the number of participants that the end-user has selected
    var number_of_participants = participants_selector.val();
    //Clear out any previously-appended HTML
    entry_details_area.empty();
    //Next, create a corresponding number of input elements for the number of participants selected.
    for (var i = 0; i < Number(number_of_participants); i++)
    {
      //Remember: Arrays start counting at 0, so to make it human-readable, add +1
      var participant_number = i+1; 
      //Let's add a simple box: "first-name" for each participant
      var entry_form_html = '<p>Participant ' + participant_number + ' first name is: '
                        +'<input name = "first-name-'+participant_number+'" id = "first-name-'+participant_number+'"></p>';
      //Add the HTML for each participant                      
      entry_details_area.append(entry_form_html);
    }//end of loop
  });//end of on-change listener logic

为了测试,这里有一个JSFiddle

你可以使用 jquery do dinamend html 代码。它看起来像这样:

<table id='tableid'>
<tr><td>Name</td><td>Age</td></tr>
</table>
<script>
var x = 5; // user input
for(y=0;y<x;Y++){
$('#tableid').append('<html code here to the other <tr> lines>');
}
</script>

最新更新