We Keep Coding

FORM Login not working with Anchor #

I have the following form submit code
<div class="top-links">
<ul>
<li>Sign In
<div class="top-link-section">
<form id="top-login" role="form" action="">
<div class="input-group" id="top-login-username">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me"> Remember me</label>
</div>
<button class="btn btn-danger btn-block" type="submit">Sign In</button>
</form>
</div>
</li>
</ul>
</div>
If the user does not click on any anchor link in the page before sign in, then the form login works fine.
Working fine
http://example.com/index.php
However, if the page url become something like (with anchor # behind the url address)
http://example.com/index.php#
as I got some links that is of
Events
If user click Events to see some popup before they login, the login form will not work, How do I handle such scenario to ensure login still proceed even with # at the url address.
--
Assume after login always goes back to
example.com/index.php but I prefer if it can be example.com without the index.php

If below code puts # at the end of the page then you can make it to return false to do nothing when user clicks on this click and just open the popup.
Events
You can use pure JS or jQuery to achive the same. So modify the HTML of those elements like this,
Events <!-- for plain JS -->
Events <!-- for plain jQuery -->
At JS side you need to add following:
<script>
function eventClickBtn() {
// Your logic to open popupbox
return false;
}
// For jQuery
$('.eventClickBtn').click(function(e){
e.preventDefault();
});
</script>
By using event.preventDefault(); default action of the event will
not be triggered, same goes for plain JS. If you return false it won't fire up the hyperlink mentioned in href

Check regex validation on submit and focus all input fields if empty

I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.
Demo
HTML CODE:
<form action="" method="POST" role="form" class="payment_form">
<div class="contact_details">
<div class="payment_details">
<div class="form-group">
<input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
</div>
<div class="form-group">
<input type="email" class="input_name" id="email" title="Eg: some#mail.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
</div>
<div class="form-group">
<input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pay_btn" >Continue</button>
</form>
JS:
$('.pay_btn').click(function(e){
$(":input").each(function() {
if($(this).val() === "")
$(this).css('border-color', '#ff0000');
});
});

You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .

#Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,
<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>

I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,
Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute
<form action="thankyou.html" method="POST" role="form" class="payment_form">
but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.
The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.

Select submit button of specific form for click event

If I have the following form, how can I select the submit button based on the form ID to be used for a click event?
<form id="login">
<input type="text" name="email">
<input type="text" name="password">
<input type="submit" name="submit">
</form>
Something like the following works, but it can't just be input[name=submit] because there may be more than one on the page.
$('input[name=submit]').click(function (e) {
e.preventDefault();
console.log('clicked');
});

This will automatically select the form's submit control:
$('#login :submit').click(...);
http://api.jquery.com/submit-selector/
Cheers

Use :
document.querySelectorAll("input[type=submit]")[0].click();

Use
$('#login input[type="submit"]')
You can read http://www.w3.org/TR/selectors/ for all CSS selectors.. (jQuery supports all default selector + more http://api.jquery.com/category/selectors/)

How to submit a form OnKeyPress with Javascript?

I want to make a form like this, and i want to post the form - with javascript - in all the keydowns.
<form action="{$formaction}" enctype="multipart/form-data" method="post">
<input type="text" name="n">
<input type="password" name="pw">
<button name="in" type="submit">enter</button>
</form>
please tell me how to do this.

<form onkeydown="this.submit();">
<!-- form content -->
</form>

<body onkeydown="document.forms["myform"].submit();">

If you do that, the page will reload, just as if you were clicking the submit button.
What you probably want is to attach an onkeydown handler to the password field and submit key presses via AJAX.
For an example look at one of javascript auto-suggest libraries, e.g. AJAX Auto Suggest.

Jquery submit form error

I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?

You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.

If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...

you can have a simple hyperlink outside of your form like this
click to submit and that's all you need