帮助将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表单字段添加到现有表单时按下按钮时无需重新加载

回答

相关问题