Menu
I have a HTML form and I need to display the form field values below the form after user clicks the submit button. How can I do this using HTML and JavaScript Ajax?
577
If you want to add content to a page you need to work with the DOM. Google "create div javascript" or "create span javascript" for examples, you basically need to create an element that has your text in it and add that element to the part of the page you want the text to display.
In order to stay on the same page on submit you can leave action empty ( action="" ) into the form tag, or leave it out altogether. For the message, create a variable ( $message = "Success! You entered: ".
The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtarget attribute overrides the target attribute of the <form> element. Note: The formtarget attribute is new for the <input> element with type="submit" in HTML5.
To keep the values, you must fill in the values on the server while rendering the page. Usually, you can simply copy the data from the HTML request parameters into the fields.
Here is one way to do it.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
And this is what it looks like when run.Cheers.
163
var tasks = [];
var descs = [];
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var rowCount = 1;
function addTasks() {
var temp = 'style .fa fa-trash';
tasks.push(document.getElementById("taskname").value);
descs.push(document.getElementById("taskdesc").value);
var table = document.getElementById("tasksTable");
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = tasks[rowCount - 1];
cell2.innerHTML = descs[rowCount - 1];
cell3.innerHTML = getDate();
cell4.innerHTML = '<td class="fa fa-trash"></td>';
rowCount++;
modal.style.display = "none";
}
function getDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = dd + '-' + mm + '-' + yyyy.toString().slice(2);
return today;
}<html>
<body>
<!-- Trigger/Open The Modal -->
<div style="background-color:#0F0F8C ;height:45px">
<h2 style="color: white">LOGO</h2>
</div>
<div>
<button id="myBtn"> + Add Task  </button>
</div>
<div>
<table id="tasksTable">
<thead>
<tr style="background-color:rgba(201, 196, 196, 0.86)">
<th style="width: 150px;">Name</th>
<th style="width: 250px;">Desc</th>
<th style="width: 120px">Date</th>
<th style="width: 120px class=fa fa-trash"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3> Add Task</h3>
</div>
<div class="modal-body">
<table style="padding: 28px 50px">
<tr>
<td style="width:150px">Name:</td>
<td><input type="text" name="name" id="taskname" style="width: -webkit-fill-available"></td>
</tr>
<tr>
<td>
Desc:
</td>
<td>
<textarea name="desc" id="taskdesc" cols="60" rows="10"></textarea>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="submit" value="submit" style="float: right;" onclick="addTasks()">SUBMIT</button>
<br>
<br>
<br>
</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
