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?
This question is related to
javascript
html
ajax
The answer is
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.
<script type = "text/javascript">
function get_values(input_id)
{
var input = document.getElementById(input_id).value;
document.write(input);
}
</script>
<!--Insert more code here-->
<input type = "text" id = "textfield">
<input type = "button" onclick = "get('textfield')" value = "submit">
Next time you ask a question here, include more detail and what you have tried.
One more way to do it (if you use form), note that input type is button
<input type="button" onclick="showMessage()" value="submit" />
Complete code is:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
But you can do it even without form:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
Enter message: <input type="text" id = "message">
<input type="submit" onclick="showMessage()" value="submit" />
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Here you can use either submit or button:
<input type="submit" onclick="showMessage()" value="submit" />
No need to set
return false;
from JavaScript function for neither of those two examples.
_x000D_
_x000D_
_x000D_
_x000D_
var tasks = [];_x000D_
var descs = [];_x000D_
_x000D_
// Get the modal_x000D_
var modal = document.getElementById('myModal');_x000D_
_x000D_
// Get the button that opens the modal_x000D_
var btn = document.getElementById("myBtn");_x000D_
_x000D_
// Get the <span> element that closes the modal_x000D_
var span = document.getElementsByClassName("close")[0];_x000D_
_x000D_
// When the user clicks the button, open the modal _x000D_
btn.onclick = function() {_x000D_
modal.style.display = "block";_x000D_
}_x000D_
_x000D_
// When the user clicks on <span> (x), close the modal_x000D_
span.onclick = function() {_x000D_
modal.style.display = "none";_x000D_
}_x000D_
_x000D_
// When the user clicks anywhere outside of the modal, close it_x000D_
window.onclick = function(event) {_x000D_
if (event.target == modal) {_x000D_
modal.style.display = "none";_x000D_
}_x000D_
}_x000D_
var rowCount = 1;_x000D_
_x000D_
function addTasks() {_x000D_
var temp = 'style .fa fa-trash';_x000D_
tasks.push(document.getElementById("taskname").value);_x000D_
descs.push(document.getElementById("taskdesc").value);_x000D_
var table = document.getElementById("tasksTable");_x000D_
var row = table.insertRow(rowCount);_x000D_
var cell1 = row.insertCell(0);_x000D_
var cell2 = row.insertCell(1);_x000D_
var cell3 = row.insertCell(2);_x000D_
var cell4 = row.insertCell(3);_x000D_
cell1.innerHTML = tasks[rowCount - 1];_x000D_
cell2.innerHTML = descs[rowCount - 1];_x000D_
cell3.innerHTML = getDate();_x000D_
cell4.innerHTML = '<td class="fa fa-trash"></td>';_x000D_
rowCount++;_x000D_
modal.style.display = "none";_x000D_
}_x000D_
_x000D_
_x000D_
function getDate() {_x000D_
var today = new Date();_x000D_
var dd = today.getDate();_x000D_
var mm = today.getMonth() + 1; //January is 0!_x000D_
_x000D_
var yyyy = today.getFullYear();_x000D_
_x000D_
if (dd < 10) {_x000D_
dd = '0' + dd;_x000D_
}_x000D_
if (mm < 10) {_x000D_
mm = '0' + mm;_x000D_
}_x000D_
var today = dd + '-' + mm + '-' + yyyy.toString().slice(2);_x000D_
return today;_x000D_
}<html>_x000D_
_x000D_
<body>_x000D_
<!-- Trigger/Open The Modal -->_x000D_
<div style="background-color:#0F0F8C ;height:45px">_x000D_
<h2 style="color: white">LOGO</h2>_x000D_
</div>_x000D_
<div>_x000D_
<button id="myBtn"> + Add Task  </button>_x000D_
</div>_x000D_
<div>_x000D_
<table id="tasksTable">_x000D_
<thead>_x000D_
<tr style="background-color:rgba(201, 196, 196, 0.86)">_x000D_
<th style="width: 150px;">Name</th>_x000D_
<th style="width: 250px;">Desc</th>_x000D_
<th style="width: 120px">Date</th>_x000D_
<th style="width: 120px class=fa fa-trash"></th>_x000D_
</tr>_x000D_
_x000D_
</thead>_x000D_
<tbody></tbody>_x000D_
</table>_x000D_
</div>_x000D_
<!-- The Modal -->_x000D_
<div id="myModal" class="modal">_x000D_
_x000D_
<!-- Modal content -->_x000D_
<div class="modal-content">_x000D_
_x000D_
<div class="modal-header">_x000D_
_x000D_
<span class="close">×</span>_x000D_
<h3> Add Task</h3>_x000D_
</div>_x000D_
_x000D_
<div class="modal-body">_x000D_
<table style="padding: 28px 50px">_x000D_
<tr>_x000D_
<td style="width:150px">Name:</td>_x000D_
<td><input type="text" name="name" id="taskname" style="width: -webkit-fill-available"></td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>_x000D_
Desc:_x000D_
</td>_x000D_
<td>_x000D_
<textarea name="desc" id="taskdesc" cols="60" rows="10"></textarea>_x000D_
</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
_x000D_
<div class="modal-footer">_x000D_
<button type="submit" value="submit" style="float: right;" onclick="addTasks()">SUBMIT</button>_x000D_
<br>_x000D_
<br>_x000D_
<br>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>display html form values in same page after clicking on submit button using JS & html codes. After opening it up again it should give that comments in that page.
Try this one:
onsubmit="return f(this.'yourfieldname'.value);"
I hope this will help you.
This works.
<html>
<head>
<script type = "text/javascript">
function write_below(form)
{
var input = document.forms.write.input_to_write.value;
document.getElementById('write_here').innerHTML="Your input was:"+input;
return false;
}
</script>
</head>
<!--Insert more code here-->
<body>
<form name='write' onsubmit='return write_below(this);'>
<input type = "text" name='input_to_write'>
<input type = "button" value = "submit" />
</form>
<div id='write_here'></div></body>
</html>
Returning false from the function never posts it to other page,but does edit the html content.
Source: Stackoverflow.com