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>
Related
<body>
<h1 style="color:red;">SIGN UP</h1>
<p style="color:blue;">Please fill in this form to create an account.</p>
<label for="Email">Email:</label>
<input type="text" id="Email" name="Email"><br><br>
<label for="password">password:</label>
<input type="text" id="password" name="password"><br><br>
<label for="repeatpassword">repeatpassword:</label>
<input type="text" id="repeatpassword" name="repeatpassword"><br><br>
<button onclick="email" >SIGNUP!</button>
<script>
var email = document.getElementById("Email").value;
function email(){
if(document.getElementById("password").value===document.getElementById("repeatpassword").value && email.include("#")== true){
location.href = "question2.html";
}
}
</script>
</body>
</html>
I want to redirect to another html page when clicking on signup button and email input field contains "#" and password input field value is same as repeatpassword but I don't know what is wrong with my code
Check out with window.location.href in the script function to redirect.
for more reference look out https://www.w3schools.com/js/js_window_location.asp
Button onclick="email()" parenthesis is required because you are calling a function on a button click.
Function can't access a variable declared outside the function. So declare that email var inside the function scope.
It's not email.include() function it's includes(). "s" was missing. Ref -
https://www.w3schools.com/jsref/jsref_includes.asp
function email(){
var email = document.getElementById("Email").value;
if(document.getElementById("password").value===document.getElementById("repeatpassword").value && email.includes("#")== true){
console.log("Working");
}
else{
console.log("Not working");
}
}
<h1 style="color:red;">SIGN UP</h1>
<p style="color:blue;">Please fill in this form to create an account.</p>
<label for="Email">Email:</label>
<input type="text" id="Email" name="Email"><br><br>
<label for="password">password:</label>
<input type="text" id="password" name="password"><br><br>
<label for="repeatpassword">repeatpassword:</label>
<input type="text" id="repeatpassword" name="repeatpassword"><br><br>
<button onclick="email()" >SIGNUP!</button>
The output text display for a second and then gone forever...is there a way to make it stay?
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
When you hit the save button it's probably trying to POST your form - you can remove the form element and your code will pretty much work - if all you want to do is display the text input's value elsewhere on the screen.
Here's an example:
function input() {
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
<br/>
<div id="display" onchange="input()">
I'm loading a form into a modal dialog on button click and attaching .ajaxForm() to it on load. ajaxForm() has a beforeSubmit function in which I call two functions to validate username and password fields and setting .setCustomValidity() on them. I imagined it would go something like this; clicking Submit validation is done in beforeSubmit and setCustomValidity is set on invalid fields; then, a message appears on submit attempt.
However, messages appear only after I click Submit the second time. The first time it does nothing.
This is the form.
<form method="POST" action="/scripts/register.php" id="register-form">
<input minlength="6" maxlength="15" type="text" id="user" name="user" oninput="setCustomValidity('')" placeholder="Username" required>
<input minlength="6" maxlength="15" type="password" id="pass" name="pass" oninput="setCustomValidity('')" placeholder="Password" required>
<input minlength="6" maxlength="15" type="password" id="confirm_pass" name="confirm_pass" oninput="setCustomValidity('')" placeholder="Confirm Password" required>
<input type="email" id="email" name="email" placeholder="E-mail" required>
<input type="submit" name="login" class="button" value="Login">
</form>
Loading form into a dialog
$( "body" ).on("click","#register",function(){
$(".modal-dialog").load("register-form.php", function(){
$('#register-form').ajaxForm({
beforeSubmit : function(){
check_password_validity();
check_username_validity();
}
});
});
$( ".dialog-overlay" ).addClass( 'dialog-overlay-open' );
});
And the two functions where I setCustomValidity:
function check_password_validity(){
var pass = $("#pass").val();
var pass2 = $("#confirm_pass").val();
if(!is_alnum(pass)){
$("#pass")[0].setCustomValidity("Samo alfanumerički znakovi, bez razmaka i posebnih znakova.");
return;
}
if(pass!=pass2){
$("#confirm_pass")[0].setCustomValidity("Lozinke se ne podudaraju!");
return;
}
}
function check_username_validity(){
var user = $("#user").val();
if(!is_alnum(user)){
$("#user")[0].setCustomValidity("Samo alfanumerički znakovi, bez razmaka i posebnih znakova.");
return;
}
$.post( "/scripts/check_username_exists.php", {username: user}, function( data ) {
if(data=="true"){
$("#user")[0].setCustomValidity("Korisnik s tim imenom već postoji.");
return;
}
});
}
This works and all, but the messages appear on second submit attempt, after Submit buttons is clicked the second time. It seems like I'm missing something simple but can't figure out what it is.
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.
I trying some ajax script without success, when I submit the form I take success alert but nothing send to the Database.
My HTML form:
<form action="account_info.php" enctype="multipart/form-data" method="post">
<input id="email" name="email" type="text" value="Save"/>
<input id="username" name="username" type="text" value="Save"/>
<input type="submit" name="Submit" value="Save"/>
</form>
My PHP code:
$error='';
$info='';
if(isset($_POST['Submit'])) {
require_once "classes/fields_process.php";
require_once "classes/blocked_emails.php";
if(!$usr->edit_info($crt_usr)) {
$usr_info=$usr->getTmp();
$error=$usr->getError();
} else {
$info=$usr->getInfo();
$usr_info = $usr->getUser($crt_usr);
}
} else $usr_info = $usr->getUser($crt_usr);
$smarty->assign("tmp",$usr_info);
$smarty->assign("error",$error);
$smarty->assign("info",$info);
Add an ID to the form : "accountForm"
<form action="account_info.php" enctype="multipart/form-data" method="post" **id="accountForm"**>
<input id="email" name="email" type="text" value="Save"/>
<input id="username" name="username" type="text" value="Save"/>
<input type="submit" name="Submit" value="Save"/>
</form>
The javascript:
$.customPOST = function(data,callback){
$.post('account_info.php',data,callback,'json');
}
$('#accountForm').submit(function(){
$.customPOST($(this).serialize(),function(r){
//the response from the server in JSON format
//an array, example in the PHP script we return
//an array that contains : 'success' => true
if(r.sucess){
alert('Operation OK');
}
});
return false;
});
BUT in your PHP you need to echo the response in JSON format :
echo json_encode(array('success' => true));
Ok i resolve the problem.
<form name="accountform" id="accountform" method="post" action="account.php">
<input id="email" name="email" type="text" value="Save"/>
<input id="username" name="username" type="text" value="Save"/>
<input type="submit" name="Submit" value="Save"/>
</form>
{literal}<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#accountform').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>{/literal}