幫助將HTML表單字段添加到現有表單時按下按鈕時無需重新加載

我很努力地找到下面的解決方案。我有一個用戶可以輸入信息的HTML頁面。有8個變量需要輸入，一旦用戶點擊表單上的提交，我希望JQuery/JavaScript創建一個動態表條目，用所提供的信息填充頁面。幫助將HTML表單字段添加到現有表單時按下按鈕時無需重新加載

我有表格片段我想我會用，但我不知道從哪裏開始與JS/JQ有這麼多的變量。在正確的方向任何指針將幫助

HMTL的表單數據：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
    <h1>Team Sheet</h1> 
    </div> 
    <div data-role="main" class="ui-content"> 
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">Show Popup Form</a> 
    <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;"> 
     <form method="post" action="/action_page_post.php"> 
     <div> 
      <h3>Team Entry</h3> 
      <label for="usrnm" class="ui-hidden-accessible">Variable1:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable1"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable2:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable2"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable3:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable3"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable4:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable4"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable5:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable5"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable6:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable6"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable7:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable7"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable8:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable8"> 
      <input type="submit" data-inline="true" value="Submit"> 
     </div> 
     </form> 
    </div> 
    </div> 
    <div data-role="footer"> 
    <h1>Get Calling!</h1> 
    </div> 
</div> 
</body> 
</html>

動態HTML表摘錄：

<tr> 
<td>Variable1</td> 
<td>Variable2</td> 
<td>Variable3</td> 
<td><a href="Variable4" target="_blank" target="_blank" class="external-link" rel="nofollow">Variable5</a></td> 
<td><a href="mailto:Variable6" class="external-link" rel="nofollow">Variable6</a></td> 
<td><a href="mailto:Variable7" class="external-link" rel="nofollow">Variable7</a></td> 
<td>Variable8</td> 
</tr>

來源

2017-08-03 JackWebb1

所以基本上要填充現有的表或創建新表並填寫它呢？ –

在一個HTML頁面，都儘量避免重複ID來，這是相當明顯。遵循這個原則，你會發現很容易處理你所謂的多變量。

無論如何，如果我明白你很好，依靠片斷您提供：

$("input[type=submit]").click(function(event) { 
    event.preventDefault(); 

    var html_table_string = '<tr>'; 
    $("form input[type=text]").each(function() { 
    html_table_string += '<td>' + $(this).val() + '</td>'; 
    }); 
    html_table_string += '</tr>'; 

    $("table").append(html_table_string); 

});

把上面的代碼中的腳本標記，並在頁面

這一塊的任意位置添加一個表結構代碼將在表格中填入用戶在表單中輸入的數據，然後單擊提交。這是相當普遍的，但它可能是一個很好的起點。請注意，event.preventDefault（）會阻止表單提交的默認執行，因此如果您打算存儲數據，則需要一種異步邏輯來爲您執行此操作。

爲了澄清，我很抱歉，對於顯而易見，保存數據，您將需要一個數據庫

來源

2017-08-03 09:15:29

所以，無論你想在你的HTML這個表，把一個空表標籤有唯一的ID。你也一直希望你的元素擁有唯一的ID，所以我將它們改爲usrnm1，usrnm2等。:)這在使用JS/JQuery時尤爲重要，因爲你可以使用「getElementById」函數來獲取任何元素的信息！在這種情況下，您可以通過從每個文本框中獲取信息來獲取變量。如果你希望表格在每次提交時添加行，那麼保留函數爲「$（」＃myTable「）。append（...」。否則，將它改爲「$（」＃myTable「）。html （......「。這將取代一切，每次也就是在表中使用新的信息。

function submitUserForm() { 
 
    var user1 = $("#usrnm1").val(); 
 
    var user2 = $("#usrnm2").val(); 
 
    var user3 = $("#usrnm3").val(); 
 
    var user4 = $("#usrnm4").val(); 
 
    var user5 = $("#usrnm5").val(); 
 
    var user6 = $("#usrnm6").val(); 
 
    var user7 = $("#usrnm7").val(); 
 
    var user8 = $("#usrnm8").val(); 
 
    $("#myTable").append("<tr><td>" + user1 + "</td><td>" + user2 + "</td><td>" + user3 + "</td><td><a href='" + user4 + "'  target='_blank' target='_blank' class='external-link' rel='nofollow'>" + user5 + "</a></td><td><a href='mailto:" + user6 + "' class='external-link' rel='nofollow'>" + user6 + "</a></td><td><a href='mailto:" + user7 + "' class='external-link' rel='nofollow'>" + user7 + "</a></td><td>" + user8 + "</td></tr>"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<h3>Team Entry</h3> 
 
<form method="post" onsubmit="submitUserForm(); return false;"> 
 
      
 
      <label for="usrnm1" class="ui-hidden-accessible">Variable1:</label> 
 
      <input type="text" name="user" id="usrnm1" placeholder="Variable1"> 
 
      <label for="usrnm2" class="ui-hidden-accessible">Variable2:</label> 
 
      <input type="text" name="user" id="usrnm2" placeholder="Variable2"> 
 
      <label for="usrnm3" class="ui-hidden-accessible">Variable3:</label> 
 
      <input type="text" name="user" id="usrnm3" placeholder="Variable3"> 
 
      <label for="usrnm4" class="ui-hidden-accessible">Variable4:</label> 
 
      <input type="text" name="user" id="usrnm4" placeholder="Variable4"> 
 
      <label for="usrnm5" class="ui-hidden-accessible">Variable5:</label> 
 
      <input type="text" name="user" id="usrnm5" placeholder="Variable5"> 
 
      <label for="usrnm6" class="ui-hidden-accessible">Variable6:</label> 
 
      <input type="text" name="user" id="usrnm6" placeholder="Variable6"> 
 
      <label for="usrnm7" class="ui-hidden-accessible">Variable7:</label> 
 
      <input type="text" name="user" id="usrnm7" placeholder="Variable7"> 
 
      <label for="usrnm8" class="ui-hidden-accessible">Variable8:</label> 
 
      <input type="text" name="user" id="usrnm8" placeholder="Variable8"> 
 
      <input type="submit" data-inline="true" value="Submit"> 
 
     </form> 
 

 
<table id="myTable"></table>

來源

2017-08-03 09:32:57 MSlaughter

幫助將HTML表單字段添加到現有表單時按下按鈕時無需重新加載

回答

相關問題