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?
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 MontySenior Web Developer / CEO of ExchangeTree.org Commented:
do you have a link to the page? if you look in the console, are any errors popping up?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
one other question, does the page get submitted properly and the data gets saved?
0
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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();
0
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
0
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
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
line 22 is incorrect, you're missing the # sign:

$('#EmailAlertsForm, #EmailAlertsFormRegistered').fadeOut(200).hide();
0
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() {
0
garethtnashAuthor Commented:
Sorry - still no joy
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
0

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
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
0
garethtnashAuthor Commented:
Thank you
0
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
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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

0
garethtnashAuthor Commented:
thank you
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.