Displaying an image after pressing submit html

Question

I have the following code to display an image after i press submit

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" onclick="$('#image1').show()"/>

Name is retrieved by

var y=document.forms["myForm"]["fname"].value;

Where fname is

<h4>Name: <input type="text" name="fname" size="61" /></h4>

Only problem is this is using Jquery, so I can't seem to pass it through any of my other validations like checking if the name field is null.

if (name==null || name=="")
    {
    alert("First name must be filled out");
    return false;
    }

Is there a Javascript equivalent to this that I can stick in my else statement so it will only show it if the form actually submits properly passing the validation checks beforehand?

Thanks

Answer 1

do all that in jquery.

if (name==null || name=="")
{
alert("First name must be filled out");
return false;
}
else
{
$('#image1').show()
}

Answer 2

You should be using the .submit() event handler of jQuery instead of attaching an onclick property to the submit button. The onclick property will not fire its function in the event that a user submits the form via the enter key; however, the .submit() method will capture it as well.

$("form[name=myForm]").submit(function(e) {
  //get value of name here.
  var name = this.fname.value; //this refers to the form, because that is what is being submitted.

  //Do validation.
  if (name == null || name == "") {
      //If failed, then prevent the form from submitting.
      alert("First name must be filled out.");
      e.preventDefault();
      return;
  }

  //If validation passed, show image.
  $("#image1").show();

});

Answer 3

First, remove the onclick attribute from the submit button:

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" />

Since you're using jQuery, attaching handlers to click events in JavaScript is a snap (and it's also a good practice).

I almost always use the following pattern for form validation (and on the submit of the form , rather than the click of the submit button because there are other ways to submit forms than clicking the button).

$(document).ready(function () {
    var formIsValid = function formIsValid () {
        // your validation routines go here
        // return a single boolean for pass/fail validations
        var name =document.forms.myForm.fname.value;
        return !!name; // will convert falsy values (like null and '') to false and truthy values (like 'fred') to true.
    };
    $('form').submit(function (e) {
        var allGood = formIsValid();
        if (!allGood) {
            e.preventDefault();
        }
        $('#image1').toggle(allGood); // hide if validation failed, show if passed.
        return allGood; // stops propagation and prevents form submission if false.
    });
});