estoy trabajando con javascript
cuando envío el formulario, almaceno los datos en una tabla, pero los datos de la tabla también son claros
índice.html
<body> <form id='freg'> <label>firstname</label> <input type='text' id='fname'> <label>lastname</label> <input type='text' id='lname'> <label>officelocation</label> <input type='text' id='location'> <input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/> </form> <br/> <br/> <table> <thead> <tr> <th>firstname</th> <th>lastname</th> <th>location</th> </tr> </thead> <tbody> <td id='ffname'></td> <td id='llname'></td> <td id='olocation'></td> </tbody> </table> <script type='text/javascript' src='index.js'></script>índice.js
function onFormSubmit() { document.getElementById('fname').value; document.getElementById('lname').value; document.getElementById('location').value; readFormData(); } function readFormData() { var data = {}; data.fname = document.getElementById('fname').value; data.lname = document.getElementById('lname').value; data.location = document.getElementById('location').value; insertnewrecord(data); } function insertnewrecord(data) { document.getElementById('ffname').innerHTML = data.fname; document.getElementById('llname').innerHTML = data.lname; document.getElementById('olocation').innerHTML = data.location; resetform(); } function resetform() { document.getElementById('fname').value = ""; document.getElementById('lname').value = ""; document.getElementById('location').value = ""; }Estoy trabajando con html con javascript
cuando envío el formulario, no puedo ver los datos en la tabla. Puse depuración y puedo ver que los datos están almacenados en la tabla, pero luego los datos tabales son claros.
Aquí está mi solución, debe insertar una fila cada vez y luego, en lugar de enviar, ¡simplemente borre el formulario!
function onFormSubmit() { insertRow(); } function insertRow() { var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var location = document.getElementById('location').value; var table = document.getElementById("myTable"); // Create an empty <tr> element and add it to the 1st position of the table: var row = table.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // Add some text to the new cells: cell1.innerHTML = fname; cell2.innerHTML = lname; cell3.innerHTML = location; resetform(); } function resetform() { document.getElementById('fname').value = ""; document.getElementById('lname').value = ""; document.getElementById('location').value = ""; } <body> <form id='freg'> <label>firstname</label> <input type='text' id='fname'> <label>lastname</label> <input type='text' id='lname'> <label>officelocation</label> <input type='text' id='location'> <input id='btn' type='button' value='submit' onclick='onFormSubmit()' /> </form> <br/> <br/> <table id="myTable"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th>location</th> </tr> </thead> <tbody> </tbody> </table>solo necesita evitar que el formulario actualice la página, luego solo necesita eliminar la función que borra el formulario Cell index.html
<body> <form id='freg'> <label>firstname</label> <input type='text' id='fname'> <label>lastname</label> <input type='text' id='lname'> <label>officelocation</label> <input type='text' id='location'> <input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< --> </form> <br /> <br /> <table> <thead> <tr> <th>firstname</th> <th>lastname</th> <th>location</th> </tr> </thead> <tbody> <td id='ffname'></td> <td id='llname'></td> <td id='olocation'></td> </tbody> </table> <script type='text/javascript' src='index.js'></script>índice.js
function onFormSubmit() { document.getElementById('fname').value; document.getElementById('lname').value; document.getElementById('location').value; readFormData(); } function readFormData() { var data = {}; data.fname = document.getElementById('fname').value; data.lname = document.getElementById('lname').value; data.location = document.getElementById('location').value; insertnewrecord(data); } function insertnewrecord() { document.getElementById('ffname').innerHTML = data.fname; document.getElementById('llname').innerHTML = data.lname; document.getElementById('olocation').innerHTML = data.location; // resetform(); <<<<<<<<<<<<<<<<< } function resetform() { document.getElementById('fname').value = ""; document.getElementById('lname').value = ""; document.getElementById('location').value = ""; }Debe declarar el objeto de datos globalmente dentro del script js. Además, use event.preventDefault() dentro de la función de clic de botón personalizado.
Además, cambié la función insertnewrecord() para manejar múltiples operaciones de inserción en la tabla.
Compruebe el siguiente código:
var data = {}; function onFormSubmit(e) { readFormData(); e.preventDefault(); } function readFormData() { data.fname = document.getElementById("fname").value; data.lname = document.getElementById("lname").value; data.location = document.getElementById("location").value; insertnewrecord(data); } function insertnewrecord(data) { var table = document.getElementById("show-data"); table.innerHTML += `<tr> <td>${data.fname}</td> <td>${data.lname}</td> <td>${data.location}</td> </tr>`; resetform(); } function resetform() { document.getElementById("fname").value = ""; document.getElementById("lname").value = ""; document.getElementById("location").value = ""; } <body> <form id='freg'> <label>firstname</label> <input type='text' id='fname'> <label>lastname</label> <input type='text' id='lname'> <label>officelocation</label> <input type='text' id='location'> <input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' /> </form> <br/> <br/> <table> <thead> <tr> <th>firstname</th> <th>lastname</th> <th>location</th> </tr> </thead> <tbody id="show-data"> <td id='ffname'></td> <td id='llname'></td> <td id='olocation'></td> </tbody> </table> <script type='text/javascript' src='index.js'></script>