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;"
Related
I'm using Jquery .submit() function to submit my form using JQuery. But I've some fields marked as required in HTML.
How should I use the .submit() function to check required field before submitting the form?
here is the code
<script>
function submit() {
$("form").submit();
}
function signup() {
alert("You're going to sign up");
}
</script>
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<a class="submit" href="JavaScript:submit();">Sign Up</a>
<button type="submit" class="none_display"></button>
</form>
I need to submit my form using a tag because of style changing in some browsers for button and input tags.
First off, it's slightly strange that you have a submit() method that you inline call, that turns around and submits the form, that then executes its inline signup() method that then actually does work. Just call the signup instead of the submit().
But for your actual question.
$(':input[required]').filter(function(){ return !this.value.trim() })
This command will find all inputs that have a required property that do not have a value. If you find any, don't do your ajax.
The below example has refactored the logic a bit, so that the submit button is actually showing, but is styled to look like a link.
$('form').on('submit', function(e){
e.preventDefault();
var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
return !this.value.trim();
}).length;
if (!blankRequiredFieldsExist) {
alert("You're going to sign up");
}
});
.buttonAsLink {
border: 0;
background-color: inherit;
padding: 0;
font-family: inherit;
font-size: inherit;
color: blue;
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div class="input">
<label for="email">Email:</label>
<input required id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required type="password" id="password"/>
</div>
<button type="submit" class="buttonAsLink">Sign Up</button>
</form>
You have a few unnecessary things going on.
You don't need action="JavaScript:void(0);" on the form.
Remove <a class="submit" href="JavaScript:submit();">Sign Up</a>
function signup() {
alert("You're going to sign up");
}
<form onsubmit="signup()">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<button type="submit" class="none_display">Sign up</button>
</form>
you can make submit button and set display: none; for that.
then write some function in jquery to click on your submit button when user click on your anchor link
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<input type="text" required="yes" />
<input type="submit" style="display: none;" id="mysubmit" />
<a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>
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 have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.
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 two forms, one is shown and the other is hidden. On click of submit button of form A, form A should disappear, and in its place, form B should appear.
In my code, On click of submit button(id="signup-btn1") of form "signup", form "signup" should hide and form "signup2" should show. They are both in exactly the same position according to the styles. It's just a matter of switching the first form content for the second.
The HTML is as follows:
<div class="signup-form">
<form class="signup" name="sign-up" method="post" action="">
<input type="email" name="signup-email" value="" placeholder="E-mail" class="signup-email" />
<input type="password" name="signup-password" value="" placeholder="Password" />
<input type="password" name="signup-confirmpassword" value="" class="c-password" placeholder="Confirm Password" />
<input type="submit" id="signup-btn1" name="signup-btn" value="Sign up" class="signup-btn" />
</form>
<form class="signup2" name="sign-up2" method="post" action="">
<h2>Step 2</h2>
<p>Please enter your school name to complete the sign up.</p>
<input type="text" name="school-name" value="" class="school-input" placeholder="School Name" />
<input type="submit" name="complete-signup" value="Complete Sign up" class="signup-btn" />
</form>
</div>
Using jQuery is preferred and should result in far less code. Thanks
Place each form in a div, then:
$("button").click(function(){
$("#div1").toggle();
$("#div2").toggle();
})
Work if your page have only 2 above forms :)