Have to remove submit button to get js to work - javascript

I'm trying to validate login details from an html form. The problem is that the submit button doesn't work with the code. So for example if I leave the username and password blank it won't come up with an alert for "Invalid Username or Password". If I remove type="submit" it works but the button becomes an input text box with an onclick function which does not look good. I was provided with this code as it is a more secure way of passing login details than I had written so I have to confess my ignorance on JS and JSON so apologies if I haven't provided enough info but any guidance would be much appreciated on how to get the button working with the js. This is running on Chrome only. Cheers.
HTML code
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="submit" onclick="myApp.getLogin()" value="Login" />
</form>
JS
myApp.getLogin = function(){
var url = "http://localhost:8084/Alumni_JV1/services/login.json?username=" + myApp.vm.username()
+ "&password=" + myApp.vm.password();
console.log(url);
$.getJSON( url, function( data ) {
if(data.response==='success'){
window.location.href="profile.jsp";
}else{
alert("Invalid Username or Password");
}
});
};

A submit button is used to send form data to a server. E.G. <form action='formHandler.php'>. It would submit the form to the current URL if the action attribute isn't defined.
You can get a button without any action with <input type='button' />.
So changing <input type='submit' ... to <input type='button' ... should do the trick :)
Then the code would be:
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="button" onclick="myApp.getLogin()" value="Login" />
</form>

Change input type=submit field with button tag.

Related

Trying to Hide Javascript form

Ok I'm trying to auto login a guest account and it requires:
In header
<script language="JavaScript" type="text/JavaScript">
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
document.form_login.submit();
}
</script>
And
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
javascript:guestLogin();
How would I get the javascript:guestLogin(); to work without having the Login form on the page.
Any Tips?
Thanks
If you need the form to be on the page - if you can't create it on demand for whatever reason - then if you want guestLogin to work without the user seeing the form, you'll have to hide the form using CSS. It'll still be submittable, it just won't be visible:
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
console.log('submitting');
document.form_login.submit();
}
document.querySelector('div').onclick = guestLogin;
form {
display: none;
}
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
<div>click to submit</div>

Function only works when called through chrome console

I've got a JavaScript function that's supposed to be executed when an HTML button is clicked. The HTML for the form is
<form id="inputData">
Email:<br>
<input id="email" type="email" name="email"><br>
Username:<br>
<input id="username" type="text" name="username"><br>
Password:<br>
<input id="password" type="password" name="password"><br>
<input id="submit" type="submit" value="submit" onClick="getData()">
</form>
The related js code is
<script type="text/javascript">
function getData() {
var input = document.getElementById("inputData");
var email = input[0].value;
var user = input[1].value;
var pass = input[2].value;
sendData(user,email,pass)
}
function sendData(user,email,pass) {
var fireRef = firebase.database().ref("users/" + user);
fireRef.set({
emailAddress: email,
password: pass,
});
}
</script>
In debugger mode, the function gets executed when the submit button is clicked, and there are no errors, all of the form data is properly collected, yet the data never gets sent to the Firebase database. However, if i call the sendData function through the console and manually provide data in the arguments, it works perfectly. Can anyone think of why this might be happening?
onClick event isn't triggering
try
<form id="inputData" onsubmit="getData()">
Email:<br>
<input id="email" type="email" name="email"><br>
Username:<br>
<input id="username" type="text" name="username"><br>
Password:<br>
<input id="password" type="password" name="password"><br>
<input id="submit" type="submit" value="submit">
</form>

change input value before submit form using jQuery

I want to set hidden input value(username) based on client other input(email) in a form, then submit to server. (to make sure username equal to email)
However, the assignment to the hidden input is processed AFTER the form submitted. So 'username' is already None on server side.
<form id="altForm" action="" method="post">
<input type="hidden" name="username" id="id_username" maxlength="40" >
<input type="email" name="email" id="id_email" maxlength="40">
<input class="btn btn-primary pull-right" type="submit" value="Register" />
</form>
<script>
$("#altForm").submit(function(e){
e.preventDefault();
var username = $("#id_email").val();
$("#id_username").val(username);
});
</script>
I would do this serverside, but if you want it clientside you can also accomplish it like this:
$('#id_email').keyup(function() {
$('#id_username').val($(this).val());
});

My form validation is not working

I'm try to validate email and names and what not. I'm using a jquery plugin to try and validate my form. But the thing is that the form does not even go to the javascript, it seems to just reset. Could someone help me?
Here's the html:
<form action method="post" id="register" name="register" class="well form-horizontal">
<label>Username:</label><input type="text" name="username" id="username" />
<label>Email:</label><input type="text" name="email" id="email" />
<label>Password:</label><input type="password" name="password1" id="password1" />
<label>Repeat Password</label><input type="password" name="password2" id="password2" />
<input type="submit" class="btn" value="Submit" />
</form>
Here's my javascript (it's from the jquery plugin):
function myOnComplete () {
alert("does this even work?");
return false;
}
$(document).ready(function() {
$("#register").RSV({
onCompleteHandler: myOnComplete,
rules: [
"required,name,Please enter a username.",
"required,email,Please enter your email address.",
"valid_email,email,Please enter a valid email address.",
"required,password1,Please enter a password.",
"custom_alpha,password1,xxxDDD,The first three characters must be numbers, the last three must be letters."
]
});
return true;
});

JQuery - Duplicate Field Input Text In Real Time

I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
This is the code I have:
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
$("#email").optionCopyTo("#mail");
Thanks!
You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
If that's right, try this:
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyup event.
I'd probably add a redundant blur event in case there's an autocomplete in the field.
$("#email").blur(function() {
$mail.val( this.value );
});
Since all your fields have unique ids, this is quite straight forward:
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
.change()
.val()
Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail").val($("#email").val()) should do what you want.
use keyup and change both.
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example
http://jsfiddle.net/6HmxM/785/
you can simply do this
$('#mail').text($('#email').val())

Categories