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/
Related
<form method="get">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required><br> <br>
<button name="submit" type="button" value="submit"
onclick="studentId()">Submit</button>
</form>
Here even if i am not providing studentID then also its not showing any error even required is used and other problem i am facing is pattern not working here.
Use this code-
<form method="post">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required="required"><br> <br>
<button name="submit" type="submit" value="submit"
onclick="studentId()">Submit</button>
</form>
The button type should be submit for checking the input fields.
Refer this.
Update the type of button to submit.
<button name="submit" type="submit" value="submit"
onclick="studentId()">Submit</button>
Because form tag always checks the required field is empty or not on submit only.
you should add ending slash in ur input
and remove type attribute from the button
<form method="post">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required/>
<button name="submit" onclick="studentId()">Submit</button>
</form>
here is a demo https://codepen.io/kjagannathreddy/pen/wRYpOm
Solution to the problem is using in javascript method.
event.preventDefault();
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>
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 .
This is my code:
<form action="/login" method="POST">
<label for="username">Username: </label><input type="text" name="username" id="username">
<label for="password">Password: </label><input type="password" name="password" id="password">
<label for="enc_key">Encryption Key: </label><input type="password" name="enc_key" id="enc_key">
<input type="hidden" name="next_page" value="{{ next_page }}">
<input type="submit" value="submit" id="login_submit">
</form>
Basically I want the username and password to post, but I do not want the enc_key to post. The enc_key is handled by javascript. Is there a way to do this without moving the enc_key input field outside of the form tags?
Try removing the name attribute.
You will still be able to handle your enc_key with the ID, but the input without a name won't be posted.
The easiest thing to do would be to clear that field right before the form posts:
document.getElementById("enc_key").value = '';
I have the following on a page as well as other forms but this, or any of the others, simply do not submit using the Enter key whereas they do in Firefox - I am at a loss to understand why? I put the hidden submit in there to make it work with firefox.
I am using onclick as the submit button graphic is in a class with background sprite image.
Is there a way to make this happen?
<form action="/userlogin.html" method=post name="LOGform"><h1>Member Sign In</h1>
<fieldset id="inputs">
<div class="form_row">
<div class="form_row_name"><label>Email</label></div>
<div class="form_row_input"><input id="username" type="username" name="username" value="" style="width:60%;" placeholder="Your Email Address"></div>
</div>
<div class="form_row">
<div class="form_row_name"><label>Password</label></div>
<div class="form_row_input"><input id="password" type="password" name="password" value='' style="width:60%;" placeholder="Your Account Password"></div>
</fieldset>
<fieldset id="actions">
<div><div style="float:left; width:35%">
<a onclick="document.forms['LOGform'].submit(); return false;" class="button" href="javascript:;">Sign In</a></div>
<input type="submit" style="display:none"/>
<input type="hidden" name="LOGON" value="logon">
<input type="hidden" name="from" value="">
</fieldset>
</form>
If you want to use an image for your submit button you could just use an image input type instead of a submit button, ie:
<input type="image" src="/mybuttonGraphic.gif" />
This will work on hitting enter across browsers.