援助與HTML

我正在爲一個武術比賽的網上報名表可擴展的形式。到目前爲止，我一切都很順利。但是，有一部分用戶選擇他們希望輸入比賽的申請人數。他們選擇的數量將決定出現的輸入行數量。我不確定如何做到這一點，如果任何你的天才能幫助我嗎？援助與HTML

預先感謝您。

來源

2015-01-26 poseidon

爲什麼不' 2015-01-26 20:47:10

但我要的號碼，以確定有多少行，我不知道如何與一個循環，增加了基於數量 – poseidon 2015-01-26 20:48:07

編碼，所以任何人都可以幫忙與循環請？ – developerwjk 2015-01-26 20:50:08

從你的描述，如果最終用戶選擇，也就是說，8人，他們將在競爭中被註冊的數量，接下來的系列註冊的元素將與對應他們選擇的數量。

這裏是我的PHP文件我的HTML表單：

KarateCompetition.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，」我們會一定要將該文件包含在我們的PHP頁面之後我們從Google抓取了jQuery（只需插入顯示的行將動態地將jQuery包含在您的PHP頁面中）

這是我的jQuery （一個Javascript庫）動態地，當用戶選擇參與者的特定數目，我將用於加載HTML元素邏輯：

karate.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

要進行測試，here's a JSFiddle

來源

2015-01-26 21:53:28

非常感謝，這是完美的，正是我所期待的！ – poseidon 2015-01-26 22:42:27

絕對！將它作爲一個跳板 - 我很高興看到你想出了什麼，一旦你能夠添加自己的味道。 – 2015-01-27 06:40:17

您可以使用jQuery的做dinamically添加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>

來源

2015-01-26 20:52:26

回答

相關問題