サブミット時にテーブルにデータを追加する方法

フォームにデータを追加した後、このデータをマイテーブルの下に表示するためにクリックして送信します。説明（テーブル）、日付（テーブル）などの下に追加された説明（私が追加したもの）のように。そして、名前の下の金額は、合計金額を4で割る必要があります。例えば、提出前の金額は100ユーロ、提出後は25となります。結局、誰もが25ユーロの借金を負うことになります。助けを前にありがとう。私のコードは次のとおりです。サブミット時にテーブルにデータを追加する方法

#body { 
 
\t background-color: grey 
 
} 
 
h1 { 
 
\t color:red; 
 
} 
 

 

 
.form{ 
 
    background:#f1f1f1; 
 
    width:400px; 
 
    margin-top:30px; 
 
    padding-left:10px; 
 
    padding-top:20px; 
 
    border-radius: 15px; 
 
\t } 
 
\t .form fieldset{border:0px; padding:0px; margin:0px;} 
 
\t .form p.contact { font-size: 12px; margin:0px 0px 15px 0;line-height: 10px; font-family:Arial, Helvetica;} 
 
\t .form input[type="text"] { width: 350px; } 
 
\t .form label { color: #000; font-weight:bold;font-size: 15px;font-family:Arial, Helvetica; } 
 
\t 
 
\t .form input, textarea { background-color: rgba(255, 255, 255, 0.4); 
 
\t \t border: 1px solid rgba(118, 128, 137, 0.7); 
 
\t \t padding: 7px; font-family: Keffeesatz, Arial; 
 
\t \t color: #4b4b4b; 
 
\t \t font-size: 14px; 
 
\t \t -webkit-border-radius: 5px; 
 
\t \t margin-bottom: 15px; 
 
\t \t margin-top: -10px; } 
 
\t .form input:focus, textarea:focus { 
 
\t \t border: 1px solid green; 
 
\t \t background-color: rgba(255, 255, 255, 1); 
 
\t } 
 
\t .form .select-style { 
 
\t -webkit-appearance: button; 
 
\t -webkit-border-radius: 2px; 
 
\t -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 
 
\t -webkit-padding-end: 20px; 
 
\t -webkit-padding-start: 2px; 
 
\t -webkit-user-select: none; 
 
\t background-image: url(images/select-arrow.png), 
 
\t  -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 
 
\t background-position: center right; 
 
\t background-repeat: no-repeat; 
 
\t border: 0px solid #FFF; 
 
\t color: #555; 
 
\t font-size: inherit; 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
\t padding-top: 2px; 
 
\t padding-bottom: 5px; 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap;} 
 
\t 
 
\t .form input.buttom{ 
 
\t \t background: #d8ba23; 
 
\t \t display: inline-block; 
 
\t \t padding: 5px 10px 6px; 
 
\t \t color: black; text-decoration: none; 
 
\t \t font-weight: bold; line-height: 1; 
 
\t \t -moz-border-radius: 5px; 
 
\t \t -webkit-border-radius: 5px; 
 
\t \t border-radius: 5px; 
 
\t \t -moz-box-shadow: 0 1px 3px #999; 
 
\t \t -webkit-box-shadow: 0 1px 3px #999; 
 
\t \t box-shadow: 0 1px 3px #999; 
 
\t \t border: none; 
 
\t \t position: relative; 
 
\t \t cursor: pointer; 
 
\t \t font-size: 14px; 
 
\t \t font-family:Verdana, Geneva, sans-serif; 
 
\t } 
 
\t .form input.buttom:hover { background-color: #d88323;-moz-box-shadow: 0 5px 3px #999; 
 
\t \t -webkit-box-shadow: 0 5px 3px #999; 
 
\t \t box-shadow: 0 5px 3px #999; }

<center> 
 
<div class="form"> 
 

 
\t  <form id="contactform" method="post" action=""> 
 
    
 
    <p class="contact"><label for="description">DESCRIPTION</label></p> 
 
    <input id="description" name="description" placeholder="Enter the description" required oninvalid="this.setCustomValidity('Please enter the description ')" oninput="setCustomValidity('')" type="text"> 
 

 
    <p class="contact"><label for="amount">AMOUNT</label></p> 
 
    <input id="amount" name="amount" placeholder="&#8364" required oninvalid="this.setCustomValidity('Please enter the amount ')" oninput="setCustomValidity('')"/ type="number"> 
 
    
 
    <p class="contact"><label for="reference period">REFERENCE PERIOD</label></p> 
 
    <input id="reference period" name="reference period" placeholder="Enter the reference period" required oninvalid="this.setCustomValidity('Please enter the reference period ')" oninput="setCustomValidity('')" type="text"> 
 
<br> 
 
    
 
      <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit" \> 
 
    </form> 
 
\t </div></center> 
 
<br> 
 
\t 
 

 
\t <div> 
 
\t \t <table> 
 
\t \t  <tr><th>SULEYMAN</th></tr> 
 
\t \t  <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> 
 

 
\t \t  <tr><th>JACOPO</th></tr> 
 
\t \t  <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> 
 

 
\t \t  <tr><th>DENIS</th></tr> 
 
\t \t  <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> 
 

 
\t \t  <tr><th>LUCA</th></tr> 
 
\t \t  <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> 
 
\t \t \t \t  
 
\t  </table> 
 
\t \t 
 
\t </div>

出典

2017-12-09 McCormick

、あなたは同じフォームの複数の入力のために同じ名前を持つことはできません。 –

ok、私はそれを修正しました。 – McCormick

私は、これはあなたが望むものであることを確認していないが、見ていると私に知らせてください。また、私はフォームのバリデーションやスタイリングがないので、それらを含めてください。あなたの入力名が台無しにされているおかげで

$('#myForm').submit(function() { 
 
    var desc = $('#name').val(); 
 
    var amount = $('#username').val(); 
 
    var ref = $('#date7').val(); 
 
    var amount_byfour = amount/4; 
 
    var desc_elements = document.getElementsByClassName("d"); 
 
    for (var i=0; i<desc_elements.length; i++) { 
 
     desc_elements[i].innerHTML+=desc+"<br>";} 
 
    var ref_elements = document.getElementsByClassName("r"); 
 
    for (var i = 0; i < ref_elements.length; i++) { 
 
     ref_elements[i].innerHTML+=ref+"<br>";} 
 
    var amount_elements = document.getElementsByClassName("a"); 
 
    for (var i = 0; i < amount_elements.length; i++) { 
 
     amount_elements[i].innerHTML+=amount_byfour+"<br>";} 
 
    var debt_elements = document.getElementsByClassName("debt"); 
 
    for (var i=0;i < debt_elements.length; i++){ 
 
    var debt = debt_elements[i].innerHTML; 
 
    var debt = Math.round((debt) * 1e12)/1e12; 
 
    debt_elements[i].innerHTML = debt + amount_byfour;} 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<form id="myForm"> 
 
    <p class="contact"><label for="name">DESCRIPTION</label></p> 
 
     <input id="name" name="name" placeholder="Enter the description" required type="text"> 
 

 
     <p class="contact"><label for="username">AMOUNT</label></p> 
 
     <input id="username" name="username" placeholder="&#8364" required type="number"> 
 
     
 
     <p class="contact"><label for="name">REFERENCE PERIOD</label></p> 
 
     <input id="date7" name="name1" placeholder="Enter the reference period" required type="text"> 
 

 
     <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit"> 
 
</form> 
 
</div> 
 
<div> 
 
    <table> 
 
     <tr><th>SULEYMAN</th></tr> 
 
     <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> 
 
     <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> 
 

 
     <tr><th>JACOPO</th></tr> 
 
     <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> 
 
     <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> 
 

 
     <tr><th>DENIS</th></tr> 
 
     <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> 
 
     <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> 
 

 
     <tr><th>LUCA</th></tr> 
 
     <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> 
 
     <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> 
 
      
 
    </table> 
 
</div>

出典

2017-12-09 22:48:37 Rohit

それはまさに私が欲しかったものです。どうもありがとうございます！！！神のお恵みがありますように。 – McCormick

ようこそ。ハッピーコーディング!!!!! – Rohit

しかし、新しいデータを追加した後に以前のデータを削除しないようにするのは可能でしょうか？ – McCormick

サブミット時にテーブルにデータを追加する方法

答えて

関連する問題