Jquery - Help!

Hello All,

I'm a little stuck with my Jquery.

I have one of two forms on an ASP page based on if else statement

<% if (Request("Region") <> "") OR (Request("Sector") <> "") OR (Request("Location") <> "") then %>
<%if Not IsObject(Session("JobseekerID")) then %>
<form action="" name="EmailAlertsForm" id="EmailAlertsForm" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="N">
  <input type="hidden" name="Sector2" id="JBESector">
  <input type="hidden" name="Region2" id="JBERegion">
  <input type="hidden" name="Location2" id="JBELocation">
  </legend>
  <label for="email">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <div style="float: left; width: 278px; padding: 0px 4px 4px 4px; margin-top: 8px; background-color: #608EC7; border-radius: 4px;">
  <div style="float:left; width:236px; padding-top:4px;">
  <input name="email" type="email" required id="JBEemail" placeholder="Email address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" maxlength="255"/>
  </div>
  <div style="float: left; width: 42px; padding-top: 5px;">
  <input name="EmailSignUp" type="button" id="EmailSignUp"  value="GO"/>
  </div>
  </div>
  <!--div class="paperPlane"></div-->
  <div class="clearfix"></div>
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%Else%>
<form action="" name="EmailAlertsForm" id="EmailAlertsFormRegistered" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="Y">
  <input type="hidden" name="UserID" id="JBEUserID">
  <input type="hidden" name="Sector" id="JBESector">
  <input type="hidden" name="Region" id="JBERegion">
  <input type="hidden" name="Location" id="JBELocation">
  </legend>
  <label for="email2">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <input name="EmailSignUp2" type="button" id="EmailSignUp2"  value="Notify Me !"/>
  <!--div class="paperPlane"></div-->
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%End if%>
<%End if%>

Open in new window


I'm trying to use Jquery to submit the form and hide the form..

<script type="text/javascript" >
$(function() {
$("#EmailAlertsForm button, #EmailAlertsFormRegistered button").click(function() {
var email = $("#JBEemail").val();
var UserID = $("#JBEUserID").val();
var Validated = $("#JBEValidated").val();
var Sector = $("#JBESector").val();
var Region = $("#JBERegion").val();
var Location = $("#JBELocation").val();
var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();

if(email=='' || UserID=='')
{
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "/actions/jbe.asp",
data: dataString,
success: function(){
$('#EmailAlertsForm, EmailAlertsFormRegistered').fadeOut(200).hide();
$('#EmailAlertsSuccess').fadeOut(200).Show();
}
});
}
return false;
});
});
</script>

Open in new window


Nothing is happening?

Any suggestions?

Thank you
garethtnashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontyWeb Ninja at largeCommented:
do you have a link to the page? if you look in the console, are any errors popping up?
Big MontyWeb Ninja at largeCommented:
one other question, does the page get submitted properly and the data gets saved?
Tom BeckCommented:
There's nothing in there to cause the form to submit. Change your buttons to type="submit" like:
<input name="EmailSignUp" type="submit" id="EmailSignUp"  value="GO"/>

Open in new window

Then handle the submit event of either of the forms using the EmailAlertsForm class rather than the "click" of the specific buttons. Use e.preventDefault() to stop the form from submitting the usual way.
$(function() {
  $(".EmailAlertsForm").submit(function(e) {
	e.preventDefault();
	var email = $("#JBEemail").val();
	var UserID = $("#JBEUserID").val();
	var Validated = $("#JBEValidated").val();
	var Sector = $("#JBESector").val();
	var Region = $("#JBERegion").val();
	var Location = $("#JBELocation").val();
	var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();
	
	if(email=='' || UserID=='')
	{
	    $('.error').fadeOut(200).show();
	}
	else
	{
		$.ajax({
			type: "POST",
			url: "/actions/jbe.asp",
			data: dataString,
			success: function(){
			$('#EmailAlertsForm, EmailAlertsFormRegistered').fadeOut(200).hide();
			$('#EmailAlertsSuccess').fadeOut(200).Show();
			}
		});
     }
     return false;
  });
});

Open in new window

When I tested this I was getting serialized data on the variable datastring.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Big MontyWeb Ninja at largeCommented:
you don't need to change to an onsubmit handler, the click event handler will work since you're making an ajax call, and NOT submitting...

you need to change

$("#EmailAlertsForm button, #EmailAlertsFormRegistered button").click(function() {

to

$("#EmailAlertsForm input[type=button], #EmailAlertsFormRegistered input[type=button]").click(function () {

you're using an input element, not a button element, which is why nothing was happening.

I also didn't see and elements with a class of error, so the line

$('.error').fadeOut(200).show();

will not work.

finally, in order to prevent javascript errors to occur, you need to change:

$('#EmailAlertsSuccess').fadeOut(200).Show();

to

$('#EmaiFormlAlertsSuccess').fadeOut(200).Show();
garethtnashAuthor Commented:
Hey,

So I have changed to this;

<% if (Request("Region") <> "") OR (Request("Sector") <> "") OR (Request("Location") <> "") then %>
<%if Not IsObject(Session("JobseekerID")) then %>
<form action="" name="EmailAlertsForm" id="EmailAlertsForm" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="N">
  <input type="hidden" name="Sector2" id="JBESector">
  <input type="hidden" name="Region2" id="JBERegion">
  <input type="hidden" name="Location2" id="JBELocation">
  </legend>
  <label for="email">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <div style="float: left; width: 278px; padding: 0px 4px 4px 4px; margin-top: 8px; background-color: #608EC7; border-radius: 4px;">
  <div style="float:left; width:236px; padding-top:4px;">
  <input name="email" type="email" required id="JBEemail" placeholder="Email address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" maxlength="255"/>
  </div>
  <div style="float: left; width: 42px; padding-top: 5px;">
  <input name="EmailSignUp" type="submit" id="EmailSignUp"  value="GO"/>
  </div>
  </div>
  <!--div class="paperPlane"></div-->
  <div class="clearfix"></div>
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%Else%>
<form action="" name="EmailAlertsForm" id="EmailAlertsFormRegistered" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="Y">
  <input type="hidden" name="UserID" id="JBEUserID">
  <input type="hidden" name="Sector" id="JBESector">
  <input type="hidden" name="Region" id="JBERegion">
  <input type="hidden" name="Location" id="JBELocation">
  </legend>
  <label for="email2">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <input name="EmailSignUp2" type="submit" id="EmailSignUp2"  value="Notify Me !"/>
  <!--div class="paperPlane"></div-->
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%End if%>
<%End if%>

Open in new window


And this;

<script type="text/javascript" >
$(function() {
$("#EmailAlertsForm").submit(function() {
e.preventDefault();
var email = $("#JBEemail").val();
var UserID = $("#JBEUserID").val();
var Validated = $("#JBEValidated").val();
var Sector = $("#JBESector").val();
var Region = $("#JBERegion").val();
var Location = $("#JBELocation").val();
var datastring = $("#EmailAlertsForm").serialize();

if(email=='' || UserID=='')
{
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "/actions/jbe.asp",
data: dataString,
success: function(){
$('#EmailAlertsForm').fadeOut(200).hide();
$('#EmailAlertsSuccess').fadeOut(200).Show();
}
});
}
return false;
});
});
</script>

Open in new window


but now the form refreshes the page...

the URL is http://goo.gl/om7Sst - (in development by the way)

Thank you
garethtnashAuthor Commented:
And, just tried this -

<% if (Request("Region") <> "") OR (Request("Sector") <> "") OR (Request("Location") <> "") then %>
<%if Not IsObject(Session("JobseekerID")) then %>
<form action="" name="EmailAlertsForm" id="EmailAlertsForm" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="N">
  <input type="hidden" name="Sector2" id="JBESector">
  <input type="hidden" name="Region2" id="JBERegion">
  <input type="hidden" name="Location2" id="JBELocation">
  </legend>
  <label for="email">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <div style="float: left; width: 278px; padding: 0px 4px 4px 4px; margin-top: 8px; background-color: #608EC7; border-radius: 4px;">
  <div style="float:left; width:236px; padding-top:4px;">
  <input name="email" type="email" required id="JBEemail" placeholder="Email address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" maxlength="255"/>
  </div>
  <div style="float: left; width: 42px; padding-top: 5px;">
  <input name="EmailSignUp" type="button" id="EmailSignUp"  value="GO"/>
  </div>
  </div>
  <!--div class="paperPlane"></div-->
  <div class="clearfix"></div>
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%Else%>
<form action="" name="EmailAlertsForm" id="EmailAlertsFormRegistered" class="EmailAlertsForm clearfix">
  <legend>Get <%=(MetaPage)%> emailed job alerts
  <input name="Validated" type="hidden" id="JBEValidated" value="Y">
  <input type="hidden" name="UserID" id="JBEUserID">
  <input type="hidden" name="Sector" id="JBESector">
  <input type="hidden" name="Region" id="JBERegion">
  <input type="hidden" name="Location" id="JBELocation">
  </legend>
  <label for="email2">Get the latest <%=(MetaPage)%> direct to your inbox</label>
  <input name="EmailSignUp2" type="button" id="EmailSignUp2"  value="Notify Me !"/>
  <!--div class="paperPlane"></div-->
</form>
<div id="EmailAlertsFormSuccess" style="display:none;">Success Message Here</div>
<%End if%>
<%End if%>

Open in new window


with

<script type="text/javascript" >
$(function() {
$("#EmailAlertsForm input[type=button], #EmailAlertsFormRegistered input[type=button]").click(function () {
var email = $("#JBEemail").val();
var UserID = $("#JBEUserID").val();
var Validated = $("#JBEValidated").val();
var Sector = $("#JBESector").val();
var Region = $("#JBERegion").val();
var Location = $("#JBELocation").val();
var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();

if(email=='' || UserID=='')
{
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "/actions/jbe.asp",
data: dataString,
success: function(){
$('#EmailAlertsForm, EmailAlertsFormRegistered').fadeOut(200).hide();
$('#EmaiFormlAlertsSuccess').fadeOut(200).Show();
}
});
}
return false;
});
});
</script>

Open in new window


Still nothing! Help!

Thank you
Big MontyWeb Ninja at largeCommented:
line 22 is incorrect, you're missing the # sign:

$('#EmailAlertsForm, #EmailAlertsFormRegistered').fadeOut(200).hide();
Tom BeckCommented:
In your attempt to run the code I suggested you are using the id rather than the class.

$("#EmailAlertsForm").submit(function() {

Should be

$(".EmailAlertsForm").submit(function() {
garethtnashAuthor Commented:
Sorry - still no joy
Big MontyWeb Ninja at largeCommented:
i just tested the following code (except for the actual ajax call) and it worked:

<script type="text/javascript" >
    $(function () {
        $("#EmailAlertsForm input[type=button], #EmailAlertsFormRegistered input[type=button]").click(function () {
            var email = $("#JBEemail").val();
            var UserID = $("#JBEUserID").val();
            var Validated = $("#JBEValidated").val();
            var Sector = $("#JBESector").val();
            var Region = $("#JBERegion").val();
            var Location = $("#JBELocation").val();
            var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();

            if(email=='' || UserID=='') {
                $('.error').fadeOut(200).show();
            }
            else {
                //$.ajax({
                //    type: "POST",
                //    url: "/actions/jbe.asp",
                //    data: dataString,
                //    success: function () {
                        $('.EmailAlertsForm').fadeOut(200).hide();
                        $('#EmailAlertsFormSuccess').fadeIn('slow');
                //    }
                //});
            }
            return false;
        });
    });
</script>

Open in new window


make sure your userID and email values are not blank, otherwise nothing will happen

test page

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
garethtnashAuthor Commented:
Hey,

That works!

One question, it is

if(email=='' || UserID=='')  

email or UserID not null right?

So it must be the ajax call that is causing the issue? How could that be?

Thanks
Big MontyWeb Ninja at largeCommented:
One question, it is

if(email=='' || UserID=='')  

email or UserID not null right?

not necessarily null, no, but rather an empty string, which in this case is what you want

if you're using Chrome, hit F12 while on the page, then click the NETWORK tab, this will show you all of the calls going back and forth to the server, including ajax calls. anything in red is an error, click it and you'll get more info on the error
garethtnashAuthor Commented:
Thank you
garethtnashAuthor Commented:
Just one last question, sorry, and maybe it's another question,...

I also need the query to fire if someone hits enter also...

    $(function () {
        $("#EmailAlertsForm input[type=button], #EmailAlertsFormRegistered input[type=button]").click(function () {
            var email = $("#JBEemail").val();
            var UserID = $("#JBEUserID").val();
            var Validated = $("#JBEValidated").val();
            var Sector = $("#JBESector").val();
            var Region = $("#JBERegion").val();
            var Location = $("#JBELocation").val();
            var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();

            if(email=='' || UserID=='') {
                $('.error').fadeOut(200).show();
            }
            else {
                //$.ajax({
                //    type: "POST",
                //    url: "/actions/jbe.asp",
                //    data: dataString,
                //    success: function () {
                        $('.EmailAlertsForm').fadeOut(1000).hide();
                        $('#EmailAlertsFormSuccess').fadeIn('slow');
                //    }
                //});
            }
            return false;
        });
    });

Open in new window


Any suggestions

Thanks
Big MontyWeb Ninja at largeCommented:
put the meat of your code into a function, the call that function from your event handlers:

    $(function () {
        $("#EmailAlertsForm input[type=button], #EmailAlertsFormRegistered input[type=button]").click(function () { saveData();
        });

        //-- detect enter key
       $('document).keydown(function (e) { if(e.keyCode == 13)        saveData();    })

function saveData() {
           var email = $("#JBEemail").val();
            var UserID = $("#JBEUserID").val();
            var Validated = $("#JBEValidated").val();
            var Sector = $("#JBESector").val();
            var Region = $("#JBERegion").val();
            var Location = $("#JBELocation").val();
            var datastring = $("#EmailAlertsForm, #EmailAlertsFormRegistered").serialize();

            if(email=='' || UserID=='') {
                $('.error').fadeOut(200).show();
            }
            else {
                //$.ajax({
                //    type: "POST",
                //    url: "/actions/jbe.asp",
                //    data: dataString,
                //    success: function () {
                        $('.EmailAlertsForm').fadeOut(1000).hide();
                        $('#EmailAlertsFormSuccess').fadeIn('slow');
                //    }
                //});
            }
}
    });

Open in new window

garethtnashAuthor Commented:
thank you
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.