I'm building a wireframe of a Chrome Extension. In short, I want to make three separate screens and I'm going to have form elements on each one. For each, I just want to hide/show one of the other forms for now. So I'm adding a function to the first form, which should hide it. Console shows no errors, but nothing happens onClick:
Form:
<div id="step1" class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="Username" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<input type="button" id="loginbtn" class="btn btn-primary btn-block btn-large" value="Log In">
</form>
</div>
JavaScript:
var el = document.getElementById('loginbtn');
if(el){
el.addEventListener('click', login, false);
}
function login() {
document.getElementById('step1').style.display = 'none';
}
Related
I am having trouble toggling between my signup and login forms on a page. I'm not too familiar with JavaScript and jQuery but that is what I am using. BTW, is there another way to do this with PHP?
Here's what I've got. My login form is shown when the page is loaded, and the signup form is hidden. When I click the toggle button to show the signup form, nothing happens.
$("#toggle-login").click(function() {
$("#signup").hide().attr("formnovalidate");
$("#login").show();
});
$("#toggle-signup").click(function() {
$("#login").hide().attr("formnovalidate");
$("#signup").show();
});
$("document").ready(function() {
$("#signup").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-data text-center">
<h1 class="form-header">Header</h1>
<div id="login" class="main-login">
<form class="login-form" action="includes/login.inc.php" method="post">
<input name="mailuid" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Need to Create an account?</p>
<span class="btn btn-default" href="#" id="toggle-signup">Sign Up/span>
</div>
<div id="signup" class="main-signup text-center">
<form class="signup-form" action="includes/signup.inc.php" method="post">
<input name="pagename" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Already have an account?</p>
<span class="btn btn-default" href="#" id="toggle-login">Log In</span>
</div>
</div>
Try moving the <script> block to the bottom of your page. Currently you are trying to attach event click handlers for DOM-Elements that are not present at the moment when the script block is executed.
Alternatively you can move the jQuery click handlers into the jQuery('document').ready() function to make sure the DOM is ready when attaching the click handlers.
Have your script defer so that it loads after the html has loaded
<script src="name_of_your_js_file" defer>
I just want to ask on how to put a value in an input field without reloading the page. Heres my code. What i want to happen is that when i click the button, "1234567" will automatically be inside or value of the input fields but without refreshing the page. This how my code is but nothing is happening. Thank you in advance!
This is for my input fields
<div class="form-group">
<label for="password">{{ $edit ? trans("app.new_password") : trans('app.password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">{{ $edit ? trans("app.confirm_new_password") : trans('app.confirm_password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
Then this for my button that when click it will trigger the event
<input type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" onclick="myFunction()">
<i class="glyphicon glyphicon-filter"></i> Default Pass
</input>
Then this is the javascript
<script type="text/javascript">
$(document).on('click', 'default_pass', function myFunction() {
document.getElementById("password").value = "1234567";
document.getElementById("password_confirmation").value = "1234567";
});
</script>
PS Im really no good at javascript. Thanks for the help!
The problem is that your HTML is invalid. <input> isn't a container, so Default Pass is not inside it. Clicking on that doesn't trigger a click on the button.
You should use <button> instead.
And in the jQuery you need to use #default_pass as the selector. You don't need the onclick attribute in the button, since you're using jQuery to bind the event handler. You never defined the function as a global name; using function myFunction() in the jQuery event handler only defines the name in the local scope of the function; see Why JavaScript function declaration (and expression)?
$(document).on('click', '#default_pass', function myFunction() {
$("#password, #password_confirmation").val("1234567");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="password">Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<button type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" >
<i class="glyphicon glyphicon-filter"></i>
Default Pass
</button>
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 have the following HTML code
<div class = "login">
<form>
<input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br>
<input type="password" id="password" name="password" placeholder="Password" style="text-align:center"> <br> <br>
<input onclick="loginButton();" name="login_btn" id="login_btn" type="submit" value="Login">
</form>
</div>
And the following JavaScript:
<script type="text/javascript">
function loginButton() {
console.log("this function was called")
}
</script>
In my console, when I click the submit button, "this function was called" appears for only a brief second, and then disappears. Yet when I put the submit button outside of the form, the message stays, and fully executes the rest of my function.
Your form gets submitted and the page reloads - because of type="submit" on input element.
Change it either to
type="button"
or
onclick="loginButton(); return false;"
I'm using jquery.content-panel-switcher for a top menu in my site. It shows and hides different forms such as
<div id="switcher-panel"></div>
<!-- form to add, later do import here -->
<div id="adds-content" class="switcher-content set1 show">
<form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>
<textarea columns="40" rows="4" name='entry[body]' id="statement" placeholder='enter a note here to visualize the words and their connections, you can also use #hashtags and #mentions.'><% if (url) { %><%= urltitle %> <%= url %> #bookmarks<% } %></textarea>
<div id="addToContextsLabel">contexts:</div>
<ul id="addToContexts"></ul>
<input type="hidden" id="addedContexts" name="addedContexts">
<input type="hidden" id="context" name="context" value="<%= context %>">
<input type="hidden" id="selectedContexts" name="selectedContexts" value="">
<input type="hidden" name="statementid" value="">
<br>
<input type='submit' name="submit" id="submitbutton" value="save" class="pure-button pure-button-primary">
</form>
</div>
<!-- form to find -->
<div id="finds-content" class="switcher-content set1">
<form class="pure-form" id="searchform">
<input type="text" id="search" size="17" maxlength="20" class="pure-input" placeholder="search...">
<input type='submit' name="submit" value="find" class="pure-button pure-button-primary">
</form>
</div>
Now when I try to access elements using document.submitform.submit.value = "edit"; it simply doesn't work even if the form shows up in my browser.
Do you know what the problem could be?
Thanks!
The problem here was that document.submitform was using the div elements as they were loaded by the browser. However, the jquery.content-panel-switcher js module was rendering those invisible because it simply copies them into another div after the page is loaded.
So what I had to do was to access the actual elements created by jquery.content-panel-switcher using jquery and then it worked fine.