Is from 2 hours that im trying to understand how to use jQuery with a file html, but I can't figure it out!
I want a simple strngh password using jQuery and I found this useful link: http://jsfiddle.net/jquery4u/mmXV5/
My problem now is how allow file html communicate with this script?
my file html is very simple:
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
As you see, javascript file of the link is very consistent so I want to put all codes into another file, but after that I really don't know how to link 2 file and work togheter!
Here is a useful link that could help you learn more about jQuery.
You need to add this to your file (in the head or right BEFORE closing the body tag).
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
This allows you to use the jQuery library.
After you include the ajax library from google (this is preferable to be added inside the <head> *insert here </head> tags.
Now, if you have an external js file, you just add your jQuery code to it and simply import it in your html file.
<script src="yourFileWithJquery.js"></script>. Note that the js file has to be in the same folder with your html file.
Now you are good to go.
Here is a good example on your code:
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="myJsFile.js"></script>
</head>
<body>
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
</body>
Related
I'm building a web system using HTML and JavaScript, and I need to show in my site some users' info which can be accessed only by logging in to a third-party system.
Here is what their login form looks like:
<form method="post" enctype="application/x-www-form-urlencoded" name="loginForm" id="loginForm" action="Welcome">
<input type="hidden" name="redirpage" value="">
<input type="hidden" name="redirparam" id="redirparam" value="">
<input type="hidden" name="flogontext" value="User logon">
<input type="hidden" name="fpwdtext" value="PIN code">
<input type="hidden" name="flogonEnc" id="flogonEnc" value="">
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="login_field_user_box">
<div class="logon_field_lbl" id="lblUserLogon" onclick="field_focus(flogon)">User logon</div>
<input class="login_field_input" type="text" name="flogon" id="flogon" maxlength="254" size="24" value="">
</div>
</div>
</div>
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="logon_field_lbl_pwd" id="lblPassword" onclick="field_focus(fpwd)">PIN code</div>
<input class="login_field_password_input" type="password" name="fpwd" id="fpwd" maxlength="4" value="">
</div>
</div>
<div class="login_form_element"><input id="btnloginsubmit" class="rounded_login_btn" type="submit" value="Login"></div>
I know that I will have problems with cross-origin request, so I intend to use https://cors-anywhere.herokuapp.com/ as a proxy.
Yes, I have a working login to enter on their website, but the problem is that I've tried many things to do this in the background, and I couldn't login anyway.
I tried using postman to test requests, but it didn't work either.
Just in case their website is here.
Probably you will need to write your own cors proxy-server (e.g. in php - it is not difficult) because https://cors-anywhere.herokuapp.com/ will be not not enough. However try this (I copy <form> from your login site, and change <form> action to send similar request like source site - but I don't have any login/PIN to test this)
<div class="login_inner_container">
<h2>Please sign in</h2>
<form method="post" enctype="application/x-www-form-urlencoded" name="loginForm" id="loginForm" action="https://cors-anywhere.herokuapp.com/https://secure.ditprint.ie/safecom/webuser.dll/Welcome">
<input type="hidden" name="redirpage" value=""><input type="hidden" name="redirparam" id="redirparam" value=""><input type="hidden" name="flogontext" value="User logon"><input type="hidden" name="fpwdtext" value="PIN code"><input type="hidden" name="flogonEnc" id="flogonEnc" value="">
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="login_field_user_box">
<div class="logon_field_lbl" id="lblUserLogon" onclick="field_focus(flogon)">User logon</div>
<input class="login_field_input" type="text" name="flogon" id="flogon" maxlength="254" size="24" value="">
</div>
</div>
</div>
<div class="login_form_element">
<div class="login_field_user_box_border">
<div class="logon_field_lbl_pwd" id="lblPassword" onclick="field_focus(fpwd)">PIN code</div>
<input class="login_field_password_input" type="password" name="fpwd" id="fpwd" maxlength="4" value="">
</div>
</div>
<div class="login_form_element"><input id="btnloginsubmit" class="rounded_login_btn" type="submit" value="Login"></div>
</form>
<div id="sysloginmsg" class="login_message_error_hidden"></div>
</div>
I am trying to validate my form using parsley.js, I am working as the official good book says to do so but due to some reasons (that I obviously don't know right now), it is not working.
Here is the code
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required />
<label>Email </label>
<input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required />
<label>Password </label>
<input type="text" name="lname" class="form-control" data-type="password" required />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
Here is the Plunkr link.
I dont know how to save it so I'm posting it here:
I changed the jquery version, the parsley version (you used an old one), and also added the css from parsley site. Your tag attributes were wrong. this works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parsley JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-parsley-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required="true" />
<label>Email </label>
<input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" />
<label>Password </label>
<input name="lname" class="form-control" type="password" required="true" />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
The problem was is was using data-required instead I have to use data-parsley-required and also instead of data-validate="parsley" it should be data-parsley-validate="parsley"
Plunkr modified
What is wrong http://jsfiddle.net/qch1vtqc/
I'm trying to create an Automatic Log On another web page , without leaving the current page , beer somehow I have not succeeded.
<form id="loginForm" name="loginForm" method="post"
action="http://www.streamuj.tv/login">
<p>
<label for="name">Uživatel:</label>
<br>
<input type="text" name="username" value="examplename" size="22"
tabindex="3" id="name" class="logintext">
<br>
<label for="password">Heslo:</label>
<br>
<input name="password" type="password" value="exampepass"
class="logintext" id="password" tabindex="4" size="22">
<br>
<a href="http://www.streamuj.tv/recoverpassword"
title="Forgot!">Zapomněli jste heslo?</a><br>
<input type="hidden" name="action_login" value="Přihlásit se">
<input type="image" src="http://www.streamuj.tv/images/login.gif"
tabindex="5" class="loginbutton">
</p>
</form>
Please you have any idea how to create an automatic login with pre-defined values , but not without abandoning the current page? Thank you very much in advance for your help and sorry for my English .
Hi i created a login form, but when i click on login i can't send username and password to db, with this code:
<a id="enter" href="#"><div id = "enterbutton">enter</"div></a>.
And i am able to send username and pass with this code:
<input id="enterbutton" type="submit" value="Login">
and now this button look ugly, because i have pic for this button added in my css. With this first code button look exactly how i want it to be. How to fix this?
My form look:
<form name="forma2" action="login.php" method="post">
<br>
<input class="inputbox" type="text" name="username" maxlength="18" placeholder="username">
<br>
<br>
<input class="inputbox" type="password" name="password" placeholder="password">
<br>
<input type="submit" value="Login">
</form>
Work's but without css.
If you want to use:
<a id="enter" href="#"><div id = "enterbutton">enter</"div></a>
Because you have a specific css you've applied to it, then simply do.
$('#enter').on('click', function(){
$('#form').submit();
});
Just remember to add an id to your form.
If you want to use a button as div you should declare in your JavaScript the .click() event how this:
$('#enter').on('click', function(){
$('#form[name="forma2"]').submit();
});
you can use anchor to submit form but you will use event handler:
<form id='myForm' name="forma2" action="login.php" method="post">
<br>
<input class="inputbox" type="text" name="username" maxlength="18" placeholder="username">
<br>
<br>
<input class="inputbox" type="password" name="password" placeholder="password">
<br>
<a id="enter" href="#" onclick='document.getElementById("myForm").submit()'><div id = "enterbutton">enter</div></a>
</form>
<form name="forma2" action="login.php" method="post" id="myForm">
<br>
<input class="inputbox" type="text" name="username" maxlength="18" placeholder="username">
<br>
<br>
<input class="inputbox" type="password" name="password" placeholder="password">
<br>
Submit
</form>
<script>
function submitMe() {
document.getElementById("myForm").submit();
}
</script>
The answer of #Grimbode is good. But I don't like to add more script and you may not have jQuery either. We can handle it with CSS only.
The problem with your <a> is you didn't add any handler for this, so whenever you click on this <a>, it won't do anything. <input type="submit"> is for form, it handles exactly what we want. But usually, the input come with some of default CSS, I don't like it, and you either.
You can find my sample for your case here:
https://jsfiddle.net/y7mvu9zn/
I've been using a function called validateForm() to check forms before they're submitted. The basic form is:
<script type="text/javascript">
function validateForm()
{
var fname=document.forms["reg"]["firstname"].value;
var lname=document.forms["reg"]["lastname"].value;
if (fname==null || fname=="Jane" ||fname=="" || lname==null || lname=="" || lname="Doe")
{
alert("You must provide your name");
return false;
}
</script>
Now, I have two registration pages. One uses some simple HTML and CSS that I wrote myself and looks a million years old. The other leverages Bootstrap because I'm taking baby steps to modernizing the look of the pages I maintain. The plain HTML form has a structure like:
<form name="reg" action="include/registrationwriter.asp" onsubmit="return validateForm();" method="POST">
<strong>First Name*:</strong> <input type="TEXT" name="firstname" size="30" /><br />
<strong>Last Name*:</strong> <input type="TEXT" name="lastname" size="30" /><br />
<input type="SUBMIT" value="Submit" />
</form>
While the bootstrap page has a structure like:
<div class="well">
<form name="reg" class="form-horizontal" onsubmit="return validateForm();" action="tcqf_include/registrationwriter.asp" method="POST">
<div class="form-group">
<label for="firstname">First Name*</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Jane">
</div>
<div class="form-group">
<label for="lastname">Last Name*</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Doe">
</div>
<button type="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-floppy-disc"></span> Register</button>
</form>
</div>
Now, the plain HTML page, on submit does the appropriate check while the Bootstrap page ignores the check and goes straight to the ASP page that handles writing the results to the database. Why does one work and the other does not?