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().

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

Creating and submitting a form in tiptip

I just implemented tiptip and found it fantastic to use. Now i want to make a form and use it in tiptip tool tip so that user can fill and submit it.
I have created tiptip as
$('.div').tipTip({
maxWidth: 1000,
defaultPosition: 'right',
content: function (e) {
$.ajax({
url: 'tets.php',
datatype: JSON,
success: function (response) {
$('#tiptip_content').html(response);
$('body').append(response).fadeIn('1000');// the var e is the callback function data (see above)
}
});
return 'Please wait...'; // We temporary show a Please wait text until the ajax success callback is called.
}
});
I get a form in my tooltip. Now as soon as i take my mouse in it, it disappears (obviously, its a tooltip at the end). Is there any way to do what i am trying to achieve??
My html
<div class="div">Hover on Me</div>
tets.php
<form id = "testForm" method="post" action="newEmptyPHP.php">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Username</td>
<td width="250"><input name="username" type="text" class="textfield" /></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" class="textfield" /></td>
</tr>
<tr>
<td> </td>
<td><input name="remember" type="checkbox" value="d"> Remember me</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
</form>

http://code.drewwilson.com/entry/tiptip-jquery-plugin
"keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it."
Try adding this property and set it to true
Update:
Example here: http://jsbin.com/imeqes/2/
Appears to work fine when you hover over image, then hover over tip, it stays there.

Code hash function over data in form - already have function but don't know where to call

I have form in my html page
<form id="login_form" method="POST" action="index.php">
<table>
<tr>
<td><label style="color:#47A3FF;" for="name" title="User name">
Username</label></td>
<td><input style="color:#47A3FF;" dojoType="dijit.form.TextBox"
type="text" name="username"></td>
</tr>
<tr>
<td><label style="color:#47A3FF;" for="loc">Password: </label></td>
<td><input style="color:#47A3FF;" dojoType="dijit.form.TextBox"
type="password" name="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType="dijit.form.Button" class="soria" style="border: 1px solid black; float:right;"
type="submit">Login</button></td>
</tr>
</table>
</form>
Do I need to use SHA256 when I send username and password over network ? How to use SHA256 over those data ( I have function sha256_hash which use string and return hashed value, but I don't know where to call that function ) ?

You should hash the desired values when the form is submitted.
I guess something like this should work :
HTML
<form onsubmit="return myOnSubmit(this);">
JavaScript
function myOnSubmit(aForm) {
//Getting the two input objects
var inputUsername = aForm['username'];
var inputPassword = aForm['password'];
//Hashing the values before submitting
inputUsername.value = sha256_hash(inputUsername.value);
inputPassword.value = sha256_hash(inputPassword.value);
//Submitting
return true;
}
EDIT :
Because of the 'Hashing the values before submitting' part, it will not work if you have a maxlength property, because hashed values are much longer than just the clear password.
If you MUST use a maximum length, then you would need to implement HIDDEN FIELDS and changing those values, and making sure the fields containing the clear data aren't submitted (outside of the <FORM> tag).

<button dojoType="dijit.form.Button" class="soria" style="border: 1px solid black; float:right;" type="submit" onclick="username.value=sha256_hash(username.value);password.value=sha256_hash(password.value)">Login</button></td>
Generally when you send sensitive data, you have only to worry about password, so you can hash password and leave user as it.

How to create and submit a form using Java Script

I'm writing a Firefox extension that's to be used in house. Basically, I need to submit a pdf file and some text values to a web service. Right now I have a html page that does this. I need the extension to automate the gathering and submission of the data to the web service.
Here's the html that works.
<body>
<form name="frm_upload_file" enctype="multipart/form-data" method="post" action="my web service address">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td>ClientID</td>
<td><input type="text" name="client_id" /></td>
</tr>
<tr>
<td>HTML</td>
<td><input type="text" name="html" /></td>
</tr>
<tr>
<td align="right" class="inputtxt"> File: </td>
<td class="inputtxt">
<input name="pdf" type="file" />
</td>
</tr>
<tr>
<td align="left" colspan="2" class="inputtxt">
<p><br /><input type="submit" name="submit" value="Submit" /></p>
</td>
</tr>
</table>
Here's the javascript that doesn't
postToURL: function(html, file) {
var form = content.document.createElement("form");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("method", "post");
form.setAttribute("action", "address to my web service");
var clientIDField = document.createElement("input");
clientIDField.setAttribute("type", "text");
clientIDField.setAttribute("name", "client_id");
clientIDField.setAttribute("value", "123456");
form.appendChild(clientIDField);
var htmlField = document.createElement("input");
htmlField.setAttribute("type", "text");
htmlField.setAttribute("name", "html");
htmlField.setAttribute("value", html);
form.appendChild(htmlField);
var fileField = document.createElement("input");
fileField.setAttribute("type", "file");
fileField.setAttribute("name", "pdf");
fileField.setAttribute("value", file);
form.appendChild(fileField);
content.document.body.appendChild(form);
form.submit();
When submitting the data with the js, I get the following exception from the server.
exception
javax.servlet.ServletException: com.sun.jersey.api.container.ContainerException: javax.mail.MessagingException: Missing start boundary
Any ideas?

You can't set the value of a file input - otherwise you could steal files from people's machines.

I don't think you can modify the value of a <input type="file"> field for security reasons. You'll likely need to find another way of automating this.