jQuery $.post-function | data-processing function does not work - javascript

I am new in web development, but having years of experience in traditional development, e.g. using Java, C and ABAP, under my belt.
I am trying to create a pretty simple Login-functionality, but struggling with jQuery's $.post()-functionality.
In the below seen code, the alert("test")-function in the data-processing part of $.post() doesn´t seem to get executed, after I submit the form form_login. I guess the problem is with how I connected the JavaScript-function login_attempt() with the submitting of form form_login.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="jquery-2.2.4.min.js"></script>
<script>
function login_attempt(){
$.post("login.php", $("#form_login").serialize(), function(data){alert("test");},html);
}
</script>
</head>
<body>
<h1>Login-Form</h1>
<form id="form_login" method="post" onsubmit="return login_attempt()">
<p><label for="id_username">Username: </label><input id="id_username" name="username" type="text" width="20"></label></p>
<p><label for="id_password">Password: </label><input id="id_password" name="password" type="password" width="10"></label></p>
<p><input type="submit" name="submit_login"></p>
</form>
</body>
</html>

The function login_attempt is now triggered when submitting the form and then after that the form is submitted as well since the login_attempt function does not tell the form to stop submitting in the regular way. Therefor the page reloads before the actual callback of the post method could do anything.
Add return false; as last line of the login_attempt function to tell the form it should not submit in the regular way.

Related

JavaScript: Form onSubmit not calling function

I am currently learning JavaScript for my uni course and my function is not being called for some reason. I want to understand why this is not working.
Brief Description
There are two forms, one has a submit button, with the onSubmit field calling document.write() (This works), then calling my own function submit(). If I change submit() to document.write() then I receive two outputs, so there should be no reads why submit is not called?
The second form has a single textbox in it, I ideally want to make this disappear when the button is pressed, however I mainly want to understand why submit is not called.
<html charset="utf-8">
<head>
<title>Game</title>
</head>
<body>
<form method="get" name="form1" action="game.php" onSubmit="document.write('Hello');submit();">
<input type="submit" value="submit" name="button" />
</form>
<form id="form2" name="form2">
<input name="letter" type="text" />
</form>
<script>
function submit() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
</script>
</body>
I have tried inserting the script in the header, above the function, below the function, but nothing seems to work.
Hope someone can help, thanks
submit is a reserved keyword. Change to any other name and it should work. Please find the JSFiddle of the same
https://jsfiddle.net/pc9rL2ey/
function submita() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
<form method="get" name="form1" action="game.php" onSubmit="submita();document.write('Hello');">

Execute JavaScript on Form Submit

I have a form displayed on a layer (I'm using ChicoUI as UI Framework), everything is managed through Google Apps Script. Everything went fine (The submit sends data to a google spreadsheet), but I need the following: When the submit button is pressed I need to change the layer content through a simple js line. to display the classic "Thank you message" with a close button.
As far as I saw, everything leads to return something in the gs script, for instance in the doGet() method.
It´s posible to execute a framework method instead of returning something? Remember that I have no issues with JS, but with Google Apps Script.
Thanks a lot in advance!
Here is an example I have done with jQuery. I think it might help to understand what you want to achieve.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#myform").submit(function(event) {
event.preventDefault();
google.script.run.withSuccessHandler(function(e){
alert("Thank you"); // Here you can write thank you message.
}).myFunction(this); // passing forms data to apps script.
});
});
</script>
<form id="myform">
<input name="user1" id="user" type="text" value="">
<input name="user2" id="user" type="text" value="">
<input name="user3" id="user" type="text" value="">
<input type="submit" value="Submit Form">
</form>

Calling java script function automatically using form

I have a java script function that i need to call over and over again in order to test it, so i wrote a form that allows me to call the function, i have to do this manually and need a way to call this function without user input. all that needs to go to the upload file is a number and some text, (ex 1 Thank you)
<script src="yo.js"></script>
<!DOCTYPE html>
<html>
<body>
<form action="uploadFile" method="post">
<input type="text" name="filename" >
<input type="text" name="fileData">
<input type="submit">
</form>
</body>
</html>
Runs every second:
setInterval(function () {uploadFile('some text', 'some number')}, 1000);

Unable to get value of form field

I'm learning javascript and tried my hand at calling functions. Based on the example here, I tried to use the logic in my test html:
<html>
<head>
<script>
function ShowForm()
{
var field_value = document.forms["test_form"]["my_name"].value;
document.write(field_value);
}
</script>
</head>
<body>
<form action="" name="test_form" onsubmit="return ShowForm();" method="post">
<input type="text" name="my_name" placeholder="Type your name"/>
<button type="submit">My button</button>
</form>
</body>
</html>
I found that the html renders correctly, however upon clicking the "My button" button, the page simply reloads without displaying the additional html I expected.
The main different is that I'm trying to use <button> for the click/submit action. Is it possible to use a <button> and activate the javascript? Or should I just style the <input> as a button?
What am I doing wrong here?
Use
onsubmit="ShowForm();return false"
Instead of
onsubmit="return ShowForm();"
Adding return false will prevent page from reloading, removing return from return ShowForm(); will allow javascript to run return false after ShowForm().
Example

Mimicking a login form...

We have an internal application that requires the same username/password across the board.
However, if the login fails too many times, then the account is locked for that username.
We can't change the lockout because that will affect the public facing site as well.
I have been asked to come up with a way to essentially, click a button and auto-login.
Initial research has brought me to this script... (Credit)
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<title>Auto Login</title>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="http://mail.google.com">
<select name="uni_url" id="logServer" class="validate[required]">
<option class="" value="" fbUrl="" cookieName="" >
Test_en
</option>
</select>
<input id="loginName" name="name" type="text" value="Username" class="" />
<input id="loginPassword" name="password" type="password" value="ExamplePassword" class="" />
<input type="hidden" id="loginKid" name="kid" value=""/>
</form>
<script>document.loginForm.submit();</script>
</body></html>
...but I can't seem to get it to work for me.
So, I found another option where I can create a small html file (form) with a submit button, that does - onload="form1.submit();", and this could basically log me into this website without having to key in any login information.
Not sure where to start with mimicking a login form like this and need a good direction to get started in.
Thoughts?
Let's assume your existing login form looks like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" />
</form>
On your "auto-login" (which is really an auto-submit) page you want to mimic the same structure as before but:
Add in values to be submitted (static username and password?)
Optionally remove the submit button (if you know your users have JS enabled then you can get rid).
Add some JS that automagically submits the form for you.
That might give us something like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" value="gvee" />
<input type="password" name="password" value="hunter2" />
</form>
<script type="text/javascript">document.forms[0].submit()</script>
The javascript will essentially look for the first form on the page (forms[0]) and submit that.
Update
Upon further inspection your existing login form is a bit of a funny onion. Instead of submitting the form directly, it's calling a function called doLogin() that sets certain hidden properties.
Therefore, instead of submitting the form, we should mimic the same behaviour (i.e. call doLogin() instead of .submit()).
One key thing here is that you'll want to only call the function after it has been declared. Simplest solution is to put our added bit of script at the very bottom of the HTML.
<script type="text/javascript">doSubmit();</script>

Categories