I have HTML code which displays a pre-compiled login form. Is it possible to improve this code in order to make the login automatic, so it autofills the user information (name, password)?
<html><body>
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login">
</form>
</body></html>
What you can do is use JavaScript:
function login() {
document.getElementById("username").value = "username";
document.getElementById("password").value = "password";
}
<html><body>
<form id="myForm" action="http://***.***.***.***/***/****/*******=" method="post">
Account name:<br>
<input name="****" value="****" id="username" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" id="password"/>
<br><br>
<input type="submit" value="Login" onclick="login()" />
</form>
</body></html>
you can also use the jQuery submit event for your form. In your javascript use:
$(document).ready(function(){
$("#myForm").submit();
});
Of course, just click on the button on load:
<html><body onload="document.getElementById('login').click();">
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login" id="login">
</form>
</body></html>
Related
I want us javascript to submit my html form.
I try two method.
The first one is good for me.
function formSubmit() {
document.getElementById("myForm").submit()
}
<form id="myForm" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="submit" >
</form>
otherwise,the second one can not work for me
window.addEventListener("click", function(event){
event.preventDefault();
document.getElementById("myForm2").submit() }
)
});
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" value="submit" >
</form>
All i want to do is to use addeventlistner method to submit form
Here is a way to do it.
function formSubmit() {
document.getElementById("myForm").submit()
}
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault()
document.getElementById("myForm").submit()
})
<form id="myForm" action="https://google.com" method="get">
First name:
<input type="text" name="firstname" size="20">
<br /> Last name：
<input type="text" name="lastname" size="20"><br />
<br />
<button id="submitBtn" type="button" onclick="formSubmit()">Submit</button>
</form>
You can use input type like this
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="submit" value="submit" >
</form>
and submit event for related form
document.getElementById("myForm2").addEventListener("submit", function() {
console.log("submitted")
})
I have a working php/mysql form submission and I'm trying to disable the submit button once the form is submitted,
HTML
<form action="" onsubmit="document.getElementById('submit-button').disabled = true;" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
It works fine without the onsubmit but when I add it i guess the post method isnt firing. I tried adding:
onsubmit="document.getElementById('submit-button').disabled = true; return true;"
but no luck.
Instead of using javascript. You can directly use php
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login" <?php echo ('POST' == $_SERVER['REQUEST_METHOD']) ? 'disabled' : ''?>/></p>
</form>
If you post then submit button will be disabled.
It seems that your form is submitted directly, executing the 'action' tag. If you want to stay on the same form try using an AJAX request instead..
Try:
<form action="" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
with following script:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$("#submit-button").on("click", function(e){
// For demo purpose
e.preventDefault();
document.getElementById("submit-button").disabled = true;
});
</script>
Using jquery,
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"/></p>
</form>
within script tags,
$(function(){
$("#submit-button").click(function(){
$("#submit-button").prop("disabled", true);
});
});
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/
I've have HTML code from Listrak to display a form on my site. In Listrak, I've asked this form to redirect to a new page on Submit, where there is a second Listrak form. How can I use Javascript or jQuery to auto-populate the email field from Form 1 to Form 2?
Form 1:
<form method="post" action="#" id="form1">
<input type="text" name="email" size="40" maxlength="100" id="email" value=""/>
<input type="text" name="name" size="40" maxlength="100" id="name" value=""/>
<input type="submit" id="submit" value="Submit">
</form>
Form 2:
<form method="post" action="#" id="form2">
<input type="text" name="email" size="40" maxlength="100" id="email" value="auto.populated.from.form1"/>
<input type="text" name="hobbies" size="40" maxlength="100" id="hobbies" value=""/>
<input type="submit" id="submit" value="Submit">
</form>
I have a simple form to take user input. User must fill very fields in that form. If they don't, javascript gives the alert message but it's not working. I am not getting alert message if I submit the form empty. Here's my form.html:
</style>
<script type="text/javascript">
function Validate(){
if(document.simple_form.session.value == "" ||
document.simple_form.hostname.value == "" ||
document.simple_form.username.value == ""
document.simple_form.password.value == "")
{
alert("Please fill out all fields before clicking Load!");
return false;
}
}
</script>
</head>
<body>
<form action="." method="post" onsubmit="return Validate();" name="simple_form">
{% csrf_token %}
<fieldset>
<legend>Session</legend>
<label for="input-one" class="float"><strong>Session Name:</strong></label><br />
<input class="inp-text" name="session" id="sess" type="text" size="30" /><br />
<label for="input-two" class="float"><strong>RemoteHost:</strong></label><br />
<input class="inp-text" name="hostname" id="host" type="text" size="30" onblur="if(this.value=='') { this.value='ngs.pradhi.com:/upload' }" onfocus="if(this.value=='ngs.pradhi.com:/upload') { this.value='' }" value="ngs.pradhi.com:/upload" />
<label for="input-three" class="float"><strong>Username:</strong></label><br />
<input class="inp-text" name="username" id="user" type="text" size="30" />
<label for="input-four" class="float"><strong>Password:</strong></label><br />
<input class="inp-text" name="password" id="pass" type="password" size="30" />
</fieldset>
<p><input class="submit-button" type="submit" value="Load" /></p>
<p><input class="save-button" type="reset" name="cancel" value="Cancel" /></p>
</form>
Is there something I am missing?
You're missing a final || in your Validate() function.
I've got a working jsfiddle here (I added a couple of </br>'s too).