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

get form submit event?

I have index file where I load and show form. now I can not get values to other file where I process receivied values.
like this i get event fired but i dont get any value when i debug saveEdit.php file
HTML:
form name="formDetail" method="post" action="#" >
<table id="edittable" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td>
<label>Nimi:</label>
</td>
<td>
<input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
</td>
<td>
<label>Levy:</label>
</td>
<td>
<input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
</td>
</tr>
<tr>
<td>
<label>Artisti:</label>
</td>
<td>
<input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
</td>
<td>
<label>Kieli:</label>
</td>
<td>
<input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
</td>
</tr>
<tr>
<td>
<label>Numero:</label>
</td>
<td>
<input id="numero" name="numeron" placeholder="Numero" type="text">
</td>
<td>
<input name="submit" class='save_button' type="button" value="Tallenna" />
<input name="delete" type="button" value="Poista" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="id_number" id="id_number" />
</form>
Javascript:
jQuery(document).ready(function ($) {
$('body').on('click', '.clickable-row', function () {
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow = $(this);
var td = $(selectedRow).children('td');
console.log(td);
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
$('#id_number').val(td[4].innerText);
console.log("test");
$('#edit').show();
});
$('#formDetail').on('click', '.save_button', function () {
$.post("saveEdit.php", $(this).serialize())
.done(function (data) {
console.log(data)
});
});
$('#pageContent').load('container.php');
});

Stay with the delegated submit listener since it appears you are loading the content using ajax.
But you also need to prevent the default browser form submit process:
$(document).on('submit', '#formEditeditBiisi', function(event) {
event.preventDefault();//prevent browser submitting form
$.post("saveEdit.php", $(this).serialize())
.done(function(data) {
console.log(data)
});
});

Try using a submit handler with a preventDefault() which stops the standard submit POST from processing :
$('#formDetail').on('submit', function (event) {
event.preventDefault();
$.post("saveEdit.php", $(this).serialize())
.done(function (data) {
console.log(data)
});
});

How can i submit a form and pop up an alert at the same time?

(I'm using ASP.NET, MVC 4 , C# , Bootstrap, Javascript.)
I have a form to upload files(multiple), and its works great, this is the form :
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table>
<tr>
<td>Choose a filter:</td>
<td style="margin-bottom:auto">
#Html.DropDownList("filterProfile", (SelectList)ViewBag.FilterList)
</td>
</tr>
<tr>
<td>File:</td>
<td><input type="file" name="Files" id="Files" multiple /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="Filter" /></td>
</tr>
</table>
}
Because upload files may take a little bit of time i figure that a pop up alert that say that we processing your files would be nice, so i added an ID to the submit button in the form like this :
<tr>
<td> </td>
<td><input type="submit" name="submit" id="alertMe" value="Filter" /></td>
</tr>
</table>
As you can see the ID is 'alertMe'.
then i wrote this code in the JS file :
$(function () {
$('#alertMe').click(function (e) {
e.preventDefault();
$('#processAlert').slideDown();
});
});
that reefer to this section in my View(HTML) :
<div class="alert alert-info alert-dismissable" id="processAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" id="processAlert">×</button>
<strong>Processing...</strong> Upload files and Processing your request.
But now its only show the alert without submitting the file, if i take off the ID attribute of the submit button its works great...How can i make the submit button trigger two events ?
one event is the show the alert of processing the file.
and the other event is to post the files to method in the controller.
How can i do it ? if its possible...
What i end up doing:( IMoses Answer)
I just remove the "preventDefault" from the script.

The problem is that a call to prevent default will prevent the form from submitting. So adding a call to submit your form will fix this.
$(function () {
$('#alertMe').click(function (e) {
e.preventDefault();
$('#processAlert').slideDown();
$('form:first').submit();
});

form behaving differently when pressing enter instead of button

I have a form that I have made that uses jquery to detect when the button is pressed, as well as used to show the data without a page reload.
It is working perfect when the button is pressed, however when pressing enter the page refreshes and nothing happens. I have the button bound to the jquery, but I am not sure what to do to handle pressing enter.
Html:
<table border="0" width="100%" cellspacing="1" cellpadding="2" style="margin-bottom:20px;">
<tbody>
<tr class="infoBoxContents">
<td style="padding:20px;">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td width="50%">
<table width="100%">
<tbody>
<tr>
<td class="main">
<b>Calculate shipping</b>
<div class="smallText">Shipping Weight: 6lbs</div>
</td>
</tr>
<tr>
<td class="main" style="padding:10px;">Country:
<select name="ship_country_id" id="ship_country_id">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<br>Post code/ Zip code:
<input type="text" name="postcode" id="postcode_entry">
</td>
</tr>
</tbody>
</table>
</td>
<td class="main" width="50%" align="right">
<div class="contentText" id="shipping_method"></div>
</td>
</tr>
<tr>
<td>
<button type="button" id="estimate" style="cursor:pointer; width:110px; margin-left:10px; padding:5px;">
<span class="ui-button-text" style="float:left;">Calculate</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e" style="float:right;"></span>
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$('#estimate').click(function () {
var postcode_entry = $('#postcode_entry').val();
var country_entry = $('#ship_country_id').val();
$("#shipping_method").html("<div style=\'margin:20px auto;width:100px;text-align:center;\'><img src=\'ext/jquery/bxGallery/spinner.gif\' /></div>").show();
$.get("checkout_shipping.php", {
country: country_entry,
refresh_quotes: "1",
postcode: postcode_entry,
zone_name: "canada"
},
function (data) {
$("#shipping_method").html(data);
}
);
});
});

That's because you need to find what happens on submit – this is the event that is called when you press enter, it doesn't trigger the click of the button.
I don't know what the ID of your form is, but you can do something like the following:
$("#myform").submit(function(e) {
e.preventDefault();
//do something
...
Use this instead of the button click event.

Instead of running your code when the button is clicked, run it when the form is submitted.
$('YOUR_FORM_HERE').submit(function() {
This will catch any means of submitting the form.

You can add this jQuery to bind to the same event:
$(document).on('keypress', function(e){
if(e.which === 13){
$('#estimate').click();
}
});
Though it would be better to separate the function that gets executed into a separate function, and call that, this will still work just fine.

Java script function not called

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<br><br><br><br>
<body style="background-color: cornflowerblue" >
<form action="Login" method="post" name="frmLogin">
<table style="background-color: darkgrey" align="center" border="1">
<thead>
<tr>
<th colspan="2" style="font-size: xx-large;color:darkmagenta" >Login Details</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold" >Username</td>
<td><input type="text" name="txtUsername" value="" /></td>
</tr>
<tr>
<td style="font-weight: bold">Password</td>
<td><input type="password" name="txtPassword" value="" /></td>
</tr>
<tr>
<td align="center" colspan="2" >
<input type="button" onclick="return reset();" value="Reset" name="btnReset" />
<input type="submit" onclick="return submit();" value="Submit" name="btnSubmit" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript">
function submit()
{
var username=frmlogin.document.txtUsername.vlaue;
var password=frmlogin.document.txtPassword.vlaue;
if(username=="")
{
alert("Username Must be filled");
return false;
}
if(password=="")
{
alert("Password Must be filled");
return false;
}
return true;
}
function reset()
{
frmlogin.document.txtUsername.vlaue="";
frmlogin.document.txtPassword.vlaue="";
return false;
}
</script>
</form>
</body>
</html>
I have html code above, and on successfully submit I call a servlet name Login.
But it directly call the servlet. It skips the java script function.
And if i remove the form then java script executes.

Your problem is that you gave the custom form validator function the same name as the form's default submit function form.submit(). The form's default submit function will have precedence in this context.
To fix this, you need to rename submit() to something else. E.g.
onclick="return validate();"
with
function validate() {
// ...
}
Unrelated to the concrete problem, you've several major bugs in your JS function, the following line for example is completely wrong:
var username=frmlogin.document.txtUsername.vlaue;
but that's subject for a different question if you can't figure it out.
Last but not least, I hope that you're aware that JS can be disabled/spoofed by the client? Ensure that you're also validating the form in the server side. See also our servlets wiki page for a concrete example.

add the onsubmit event handler for the form:
<form action="Login" method="post" name="frmLogin" onsubmit="return submit();">

devang you need to capture event for the submit button click if you want to execute that javascript code. i am having the same problem but i solved it using jquery click events, because the by default it submits directly without moving through the code . if any alternate solution is there , please letme know too
btw jquery code can be written as
$("input[name=btnSubmit]").click(function(e) {
..if fails conditions..
e.preventDefault();
});