Jquery - Help!

do you have a link to the page? if you look in the console, are any errors popping up?

one other question, does the page get submitted properly and the data gets saved?

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"/>

Select allOpen 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;
  });
});

Select allOpen in new window

When I tested this I was getting serialized data on the variable datastring.

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();

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%>

Select allOpen 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>

Select allOpen in new window

but now the form refreshes the page...

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

Thank you

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%>

Select allOpen 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>

Select allOpen in new window

Still nothing! Help!

Thank you

line 22 is incorrect, you're missing the # sign:

$('#EmailAlertsForm, #EmailAlertsFormRegistered').fadeOut(200).hide();

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() {

Sorry - still no joy

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

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

Thank you

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;
        });
    });

Select allOpen in new window

Any suggestions

Thanks

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');
                //    }
                //});
            }
}
    });

Select allOpen in new window

thank you