Question

I have a simple form:

<form name ="Add" action="Add-Results.php" method="post">
 <label for="name" class="smallfont">Name</label>
 <input type="text" name="name" size="30" />
 <label for="name_error" class="error">Please enter a name</label>
 <input type="image" name="submit" src="../Content/Images/login-submit.gif">
</form>

Which works fine until I add in the following jquery

$(document).ready(function()
{
 $(".error").hide();
 $("input[name=submit]").click(function() 
 {
  $(".error").hide();
  var name = $("input[name=name]").val();

  if (name == "") $("label[for=name_error]").show();

 return false;
 });

});
</script>

When I put in the jquery nothing happens when I click the submit. When I take out the jquery the form posts without a problem. Any ideas?

Answer 1

Maybe you could put all the logic in a function, and on the onclick event of the button call that function, like this:

function checkName()
{
var flag = true;

$(".error").hide();
var name = $("input[name=name]").val();

if (name == "")
{
    $("label[for=name_error]").show();
    flag = false;
}

return flag;

}

then

<input type="image" name="submit" onClick="checkName()" src="../Content/Images/login-submit.gif">