We Keep Coding

Webpage vanishes when clicking button to send data to server with jQuery

I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?

You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().

I'm asking when I reset Jquery form

Jquery form.reset when clicking the reset button event,
The readonly part is also initialized and the value value disappears.
When data is loaded, the name and memo values ​​are set,
and the memo values ​​remain the same even when the reset button event occurs.
How can I keep data when reset event occurs?
// reset button event
$("#reset").on("click", function(){
var form = document.getElementById("SettingForm");
form.reset();
});
// ajax data load
success : function(data) {
$("#name").val(data.name);
$("#memo").text(data.memo);
}
<form id="SettingForm" action="" method="POST">
<table cellpadding="0" cellspacing="0" class="panelW">
<tr>
<th class="w35p">name</th>
<td><input id="name" name="name" type="text" value="" readonly/></td>
</tr>
<tr>
<th class="w35p"><c th:text="#{configure.memo}">memo</c></th>
<td><textarea id="memo" name="memo" value="" readonly></textarea>
</td>
</tr>
</table>
</form>

This is a case where it's important to distinguish between attributes and properties.
The value property is the current value of the input, which will be submitted in the form.
The value attribute is the input's initial default value. It's copied into the property when it's initially rendered, and again when form.reset() is used.
So if you want to update the default value, you need to assign the attribute; .val() just assigns the property.
Similarly, for a textarea, the text is used as the default when the form is reset.
success : function(data) {
$("#name").val(data.name).attr(data.name);
$("#memo").val(data.memo).text(data.memo);
}
const data = {
name: "Default name",
memo: "Default memo"
};
$("#name").val(data.name).attr("value", data.name);
$("#memo").val(data.memo).text(data.memo);
$("#reset").on("click", function(){
var form = document.getElementById("SettingForm");
form.reset();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="SettingForm" action="" method="POST">
<table cellpadding="0" cellspacing="0" class="panelW">
<tr>
<th class="w35p">name</th>
<td><input id="name" name="name" type="text" value=""/></td>
</tr>
<tr>
<th class="w35p">
<c th:text="#{configure.memo}">memo</c>
</th>
<td><textarea id="memo" name="memo" value=""></textarea>
</td>
</tr>
</table>
</form>
<button id="reset">Reset</button>

JavaScript -- clear form after values are submitted

I am using the following JavaScript code to clear a form on my page.
document.getElementById("bulletinForm").reset();
This code does indeed clear my form, but it does it before the information is sent to the server. I've tried calling as the onSubmit event on the form and as the onClick event on the Submit button. How do I send the information to the server before clearing the form? I am not currently using any Ajax with this. All I have is a Spring form that looks like this.
<form:form commandName="bulletin" method="post" action="processBulletin">
<table>
<tr>
<td>Name: <font style="font-weight: bold; color: red;">
<c:out value='${nameRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:input path="name" id="name" maxlength="100" value="" /></td>
</tr>
<tr>
<td>Subject: <font style="font-weight: bold; color: red;">
<c:out value='${subjectRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:input path="subject" id="subject" maxlength="1000" value="" /></td>
</tr>
<tr>
<td valign="top">Message: <font style="font-weight: bold; color: red;">
<c:out value='${messageRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:textarea path="note" id="note" cols="80" rows="100" value="" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit bulletin" onClick="clearForm()"/></td>
</tr>
</table>
</form:form>

If you clear the form before submitting you won't get any data. That's also what should be expected.
However you can circumvent this by sending the form without refreshing the site with an asynchroneous request. After sending the form data you can reset the form.
A fast way would be doing it with the Javascript Framework jQuery:
$.ajax({
type: 'POST',
url: "url.html",
data: $('#myForm').serialize(),
success: function() {
// This function is called after
// sending the request successfully
$('#myForm').trigger("reset");
}
});
Sending AJAX request with pure Javascript is a bit more complicated.

You could try manually submitting your form in Javascript, change the input type from submit to button and then you could have something like:
function onSubmit() {
document.getElementById("bulletinForm").submit();
document.getElementById("bulletinForm").reset();
return false; //stop page refresh
}
Source: Clearing my form inputs after submission

unable to set focus on textboxes using javascript

I am trying to set focus on textboxes 1 by 1 on tab press but its not working for me.
here is code that i have tried:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('prevOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
HTML:
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
There are 3 textboxes,for 1st textbox i have set focus on load like this:
function setFocus() {
document.getElementById("prevOrdQuan").focus();
}
It sets the focus for 1st textbox.after pressing tab on 1st textbox it displays 2nd textbox but focus is not set on second textbox.
This is only the problem that i need to resolve.

You have a problem in the showstep2 function, you are focussing the element with the id prevOrdQuan which is the first text box. I think you wanted to focus newOrdQuan.
So change
document.getElementById('prevOrdQuan').focus();
to
document.getElementById('newOrdQuan').focus();
And it should work.
EDIT
You also need anything focusable below your text boxes (an additional input etc). Otherwise if you press tab on the first (and only) textbox, the browser focusses the address bar and thus firing the onblur event on both next textboxes and displaying both at the same time.
Here is an example of what I mean: http://jsfiddle.net/24TK4/1/
2nd EDIT
I think this is an elegant solution of the problem: http://jsfiddle.net/24TK4/2/
Look at the link at the and of the HTML code, it just displays an invisible link.

Jquery form serialization is not working on facebox with Scala Play Framework 2.2

I know some similar questions are also available, but they doesn't help me.
I am doing it in Scala Play Framework. I am posting my code below:
var saveNameRequest;
function saveName(){
if(!saveNameRequest){
saveNameRequest=$.ajax({
type:"POST",
url:"edit?editType=saveName",
data: $("#nameForm").serialize(),
complete:function(){saveNameRequest=false},
success: function(data){
alert($("#nameForm").serialize())
}//end success
});
}
}
Form serialization is not working, and an empty string is being printed.
nothing is going through post, please help
<form method="POST" name="nameForm" id="nameForm">
<tr>
<td><font color=#3b5999>First Name:</font></td>
<td><input type="text" name="fname" id="fname" value="#fName"></td>
</tr>
<tr>
<td><font color=#3b5999>Middle Name:</font></td>
<td><input type="text" placeholder="optional" name="mname" id="mname" value="#mName" ></td>
</tr>
<tr>
<td><font color=#3b5999>Last Name:</font></td>
<td><input type="text" name="lname" id="lname" value="#lName"></td>
</tr>
<tr>
<td></td>
<td><input name="save" id="save" type="button" value="save" onClick="saveName()"></td>
</tr>
</form>

i found form serialization does not work with facebox in scala 2.10
we have to send data of all fields,it is the only solution that i got,
data:{
"fname":document.getElementById("fname").value,
"mname":document.getElement‌​ById("mname").value,
"lname":document.getElementById("lname").value
}

You have not closed your saveName() function. Try after closing it. Also, make sure saveName() is outside document.ready().
Add a key to ajax data parameter to send the serialized string like below:
data: { formData: $("#nameForm").serialize() },
Edited the fiddle and it seems to work