I declared a variable called "name". Once the user clicks on the form , it should call the function myFunction which assigns the value that the user types to the variable name. For instance if the user types "John". the url would be localhost:5000/profile/John. But I am getting document.getElementById("username") is undefined.
-let name = "gg";
//- -function enteringName() {
//- - name = document.getElementById("username").value;
//- -};
<h1>Log in</h1>
<form action="/profile/#{name}" method="POST" id="loginForm" onclick="#{myFunction()}" >
<label for="username">username:</label><br />
<input type="text" id="username" name="username"/>
<br />
<label for="password">password:</label><br />
<input type="text" id="password" name="password" /><br /><br />
<input type="submit" value="Log in" />
<br />
</form>
<p>
register here
</p>
<script>
function myFunction() {
-name = document.getElementById("username").value;
}
</script>
try this one. There were some problems with pug indentation. Also pug is only server rendering html, but on client side you should set name to element by js. Tested this code in codepen, take a look there too https://codepen.io/aidonline01/pen/rNOwWJY :)
-let name = "gg";
//- -function enteringName() {
//- - name = document.getElementById("username").value;
//- -};
<h1>Log in 1</h1>
<form action="/profile/#{name}" method="POST" id="loginForm" onclick="myFunction()" >
<label for="username">username:</label><br />
<input type="text" id="username" name="username"/>
<br />
<label for="password">password:</label><br />
<input type="text" id="password" name="password" /><br /><br />
<input type="submit" value="Log in" />
<br />
</form>
<p>
register here
</p>
script
.
function myFunction() {
#{name} = document.getElementById("username").value;
document.getElementById("loginForm").action = `/profile/${#{name}}`;
}
Related
After some hours of research I still haven't found out how I should store new users in localStorage.
I have 2 pages: 1 for login and 1 for register as it follows:
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email id"/>
<button>Create</button>
<p class="message">Already Registered? Login</p>
</form>
<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Register </p>
</div>
</div>
Now I am trying to store the new registered users (in order to use them for login) into localStorage like this:
userData = {
firstName: 'John',
lastName: 'Smith',
email: 'admin#gmail.com',
password: '123456789'
},
adminData;
localStorage.setItem('userData', JSON.stringify(userData));
adminData = JSON.parse(localStorage.getItem('userData'));
But unfortunately, I can't find any ideas around it. I know it's not such a good idea to store sensitive data on client side, but it's only for learning purpose.
Thanks
What you have done is correct but for checking the variable value try alert instead of console, because I think you are not properly able to see the data or even you go to Developer Tools, Application Tab.
And If you can share your full code, maybe I can help you with it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input id="username" type="text" placeholder="name"/>
<input id="passcode" type="password" placeholder="password"/>
<input id="email" type="text" placeholder="email id"/>
<button onclick="addToLocal()">Create</button>
<p class="message">Already Registered? Login</p>
</form>
<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Register </p>
</form>
</div>
</div>
<script>
function addToLocal() {
var username = document.getElementById('username').value;
var passcode = document.getElementById('passcode').value;
var emailAddress = document.getElementById('email').value;
var userDetails = {
"username": username,
"passcode": passcode,
"emailAddress": emailAddress,
}
localStorage.setItem("userDetails", JSON.stringify(userDetails));
}
</script>
</body>
</html>
So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>
what do i neeed to fix in order for the jquery function to work?
What do you mean 'it checks it in an object'? Do you want to grab the username & password when a user clicks the button? If so then you'd do something like this:
$('#but').click(function() {
var username=$('input[name=u]').val();
var password = $('input[name=p]').val();
// Do checks with the values here e.g send to server for validation
});
Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$(function(){
$('#but').click(function() {
alert("lol");
});
})
</script>
I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.
Apologies in advance, I know this has been asked before (I did do the search).
The reason I'm posting is because I need help specifically to my situation as I can't work it out with other examples.
I'm trying to trigger logging in by pressing enter instead of clicking but have had no luck (been searching for hours and hours).
Here is my code behind:
script>
function loginBtn_Click() {
doLogin();
}
function doLogin() {
var args = {
'UserId': document.getElementById('UserId').value,
'ContactId': document.getElementById('ContactId').value,
'Password': document.getElementById('Password').value
};
var callback = function (data) {
document.location.href = 'matters.html';
}
DoAjaxCall('ws/general.asmx/Login', args, callback);
}
</script>
Here is my HTML:
Please enter your login details
<input id="UserId" type="text" placeholder="Username" /><br />
<input id="ContactId" type="text" placeholder="Contact Reference" /><br />
<input id="Password" type="password" placeholder="Password" /><br />
<div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="DoAjaxCall;">Log in</div>
<br /><br />
<p>Error logging in?</p>
<p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>
</div>
I would appreciate your help.
Thanks in advance,
Rajan
Yep as Rick S mentioned, I just changed it to input type and submit, nothing else and it works perfectly. Added new code in css to reference the input type of submit and it works like a charm!
<div id="main"><br /><br />
<h2 id="logoutStatus">Please enter your login details</h2>
<input id="UserId" type="text" placeholder="Username" /><br />
<input id="ContactId" type="text" placeholder="Contact Reference" /><br />
<input id="Password" type="password" placeholder="Password" /><br />
<input type=submit value="Log in" onclick="return loginBtn_Click();">
<!-- Old log in button, works but no on hitting Enter
<div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="return loginBtn_Click();">Log in</div>-->
<br /><br />
<p>Error logging in?</p>
<p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>
</div>
Thanks guys!
I need to develop a submit button with js but as I have a register and a login bn on the same page So, when I press the register, it goes fine but if I press the login, the login uses the register files for example.
<form name="as" method="POST" action="loginpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 17px" type=button onClick="submitform()" value="Submit"/>
</form>
This is the code that I am using to make the login form and as you can see I call a file with the name loginpro.php where I have the php settings to ask the db the files that I need but when I execute it he is calling regpro.php that is the file that I am using for register take a look.
<form name="register" method="POST" action="regpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Email:
<input type="text" name="Email" />
<br />
<br />
First Name:
<input type="text" name="fname" />
<br />
<br />
Last Name:
<input type="text" name="lname" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 11px" type=button onClick="submitform()" value="Submit"/>
</form>
Well, it could be something in your submitform() Javascript function since both forms are triggering that function in the onclick event.
In JS, pass the form name to the function, like below:
<input style="font-size: 17px" type=button onclick="submitform('as')" value="Submit"/>
<input style="font-size: 11px" type=button onclick="submitform('register')" value="Submit"/>
And in your function:
function submitform(form) {
//will submit the form where the button was clicked from within
document.forms[form].submit();
}
jQuery (remove inline event handlers onclick="submitform()" from both forms)
$("input:button").on("click", function() {
var $form = $(this).closest("form");
$form.trigger("submit");
//OR
//$form[0].submit();
});
Why dont you give them id so you could call the onclick event for each button or other way you could use jquery like below
<input id="btnSubmit" type=button onClick="submitform()" value="Submit"/>
<script type="text/javascript">
$("#btnSubmit").click(function(){
$.post("the php page address goes here like regpro.php",
{
//here set the paramter
'firstname':$("#fname").val().trim(),
'lastname':$("#lname").val().trim()
}, function(data){
data=data.trim();
//you can retrive a data to find that the call is success or not
});
});
</script>
you could do the same with login button
Give different id for different form and use the simple way bellow
document.getElementById("your_form_id").submit();