jquery, click
Do you know why the first click on button does not work? It actually does not do anything.
However, when i click 2 times, it works.
However, when i click 2 times, it works.
<form role="form" class="search-form" >
<div class="form-group">
<input required type="email" class="form-control"
id="search" name="search"
placeholder="Enter your email">
<button id="gotoNext" name="gotoNext" onclick="fnNext()" class="btn btn-theme" type="button">
Get Started <i class="fa fa-chevron-right"></i>
</button>
<br />
<label style="color:white;">Your Information is safe & secure</label>
</div>
</form>
<script>
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test($email);
}
function fnNext() {
$('#gotoNext').click(function () {
var email = $('#search').val();
var url = '../Quote/BondInfo?search=' + email;
if (email == '')
{
alert("Invalid Email. Please try again!");
}
else if (!validateEmail(email))
{
alert("Invalid Email format. Please try again!");
}
else
{
localStorage.setItem('email', email);
window.location.replace(encodeURI(url));
}
});
}
</script> 
Leonidas Dosas
Instead of onclick atrr event in the burron element, remove it and set at the fnNext the on ('click', function (){........} method
ASKER
i do not get it
Remove the onclick =" fnNext() " attr inside the button tag and at the jquery mode write the following using the on() method ie
$('#gotoNext').on('click',function () {
var email = $('#search').val();
var url = '../Quote/BondInfo?search=' + email;
if (email == '')
{
alert("Invalid Email. Please try again!");
}
else if (!validateEmailASKER
your approach does not work at all.
At the first click you are executing the fnNext() function.To execute the click event you must click a second time.So you must unwrapp the click event from fnNext().If you see the fnNext() the click event is inside at this function but it is not mean that the click event is going to fire with the first click
ASKER
just show me your html code and jquery...
HTML:
JQuery script:
<form role="form" class="search-form" >
<div class="form-group">
<input required type="email" class="form-control"
id="search" name="search"
placeholder="Enter your email">
<button id="gotoNext" name="gotoNext" class="btn btn-theme" type="button">
Get Started <i class="fa fa-chevron-right"></i>
</button>
<br />
<label style="color:white;">Your Information is safe & secure</label>
</div>
</form>JQuery script:
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test($email);
}
$('#gotoNext').click(function () {
var email = $('#search').val();
var url = '../Quote/BondInfo?search=' + email;
if (email == '')
{
alert("Invalid Email. Please try again!");
}
else if (!validateEmail(email))
{
alert("Invalid Email format. Please try again!");
}
else
{
localStorage.setItem('email', email);
window.location.replace(encodeURI(url));
}
}); ASKER
not working at all.
Doesn't work the first click? or not all the code even with the second click?
ASKER
no matter how many clicks. it does nothing
What errors do you have at the console ?It's weird because in the test that I have done in the liveweave it's working..
See below how your code is working:
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.