So fügen Sie Daten zur Tabelle beim Senden hinzu

Question

Nach dem Hinzufügen von Daten im Formular und klicken Sie auf "Senden", damit diese Daten unter meiner Tabelle angezeigt werden. Wie die Beschreibung (die ich hinzugefügt habe) unter der Beschreibung (Tabelle), Datum (das ich hinzugefügt habe) unter dem Datum (Tabelle) und so weiter. Und der Betrag unter den Namen sollte der Gesamtbetrag geteilt durch 4 sein. Zum Beispiel: Betrag vor dem Einreichen war 100 Euro und nach dem Einreichen 25. Also wird jeder schließlich 25 Euro Schulden haben. Vielen Dank im Voraus für jede Hilfe. Mein Code ist:

#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>

Answer 1

Ich bin nicht sicher, das ist, was Sie wollen, aber haben Sie einen Blick und lassen Sie mich wissen. Auch habe ich nicht die Form Validierungen und Styling bitte stellen Sie sicher, sie zu enthalten. Dank

$('#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>