views:

1084

answers:

0

Short and skinny: I'm still a jQuery n00b Form in modal window, data submitted and user receives confirmation. Once the submission confirmation message is received, the user can close the window.

However, the page has not refreshed - so if the user goes to click on the link to activate the modal window and make a new submission, the content of the modal window is shown in its last state.

How can I fix this so the actual form (contained within the div contact_form) is re-presented? I have got part way with this, but keep getting confused and going around in circles.

Also, can this be done in a way which makes it reusable (targeting the form name being passed and saving on constant recoding when reusing)?

jQuery modal box loader/closer & form submitter:

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
     //Cancel the link behavior
     e.preventDefault();

     //reset the form to its defaults
     $("#message").remove()

--- this is where I think what I needs to do has to go ---

     //Get the A tag
     var id = $(this).attr('href');

     //Get the screen height and width
     var maskHeight = $(document).height();
     var maskWidth = $(window).width();

     //Set height and width to mask to fill up the whole screen
     $('#mask').css({'width':maskWidth,'height':maskHeight});

     //transition effect  
     $('#mask').fadeIn(750); 
     $('#mask').fadeTo("fast",0.8); 

     //Get the window height and width
     var winH = $(window).height();
     var winW = $(window).width();

     //Set the popup window to center
     $(id).css('top',  winH/2-$(id).height()/2);
     $(id).css('left', winW/2-$(id).width()/2);

     //transition effect
     $(id).fadeIn(750); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
     //Cancel the link behavior
     e.preventDefault();
     $('#mask, .window').hide();
    }); 

    //if mask is clicked
    $('#mask').click(function () {
     $(this).hide();
     $('.window').hide();
    });   

});

//jquery.net.tutsplus form submit
//taken from

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $('form.validate').submit(function() {
     // validate and process form
     // first hide any error messages
    $('.error').hide();

      var suggestion = $("input#suggestion").val();
     if (suggestion == "") {
      $("label#suggestion_error").show();
      $("input#suggestion").focus();
      return false;
    }

     var dataString = $(this).serialize();
     //alert (dataString);return false;

     $.ajax({
      type: "POST",
      url: "/_global/assets/scripts/formmail/formmail.asp",
      data: dataString,
      success: function() {
      $('#contact_form').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});

HTML of div's displayed within modal box:

<div id="boxes">
    <!-- #customize your modal window here -->
    <div id="dialog" class="window">
    <div id="contact_form">
    <h2>What's missing?</h2>
     <p>
        Need to suggest something to be added to this list? Fill in the details below and our team will review and have this added as soon as possible.
        </p>
  <form name="contact" id="contact" action="" class="validate">
  <input name="_recipients" type="hidden" value="[email protected]" />
  <input name="_subject" type="hidden" value="Feedback submission via the FPC Intranet" />
  <input name="_noteStart" type="hidden" value="The following is an How do we do it feedback submission via the FPC Intranet sent on <% Response.Write FormatDateTime(Date,1) %> by <% If StaffListActive.Fields.Item("psalutation").Value <> "" Then %><%=(StaffListActive.Fields.Item("psalutation").Value) & " " %><% End If %><%=(StaffListActive.Fields.Item("pgivenname").Value) & " "%><%=(StaffListActive.Fields.Item("psurname").Value)%>. Submission is as follows:" />
  <input name="_noteEnd" type="hidden" value="Kind regards,&lt;br/&gt;&lt;br/&gt;Communications Branch&lt;br/&gt;
Forest Products Commission&lt;br/&gt;
Level 1, 117 Great Eastern Highway, Rivervale WA 6103&lt;br/&gt;
Ph: 9475 8888  Fax: 9475 8899&lt;br/&gt;
Email: [email protected]    Web: www.fpc.wa.gov.au" />
    <input name="_name" type="hidden" value="<% If StaffListActive.Fields.Item("psalutation").Value <> "" Then %><%=(StaffListActive.Fields.Item("psalutation").Value) & " " %><% End If %><%=(StaffListActive.Fields.Item("pgivenname").Value) & " "%><%=(StaffListActive.Fields.Item("psurname").Value)%>" />
    <input name="_email" type="hidden" value="<%= StaffListActive.Fields.Item("pemail").Value %><% If InStr(StaffListActive.Fields.Item("pemail").Value, "@") > 0 Then %><% Else %>@fpc.wa.gov.au<% End If %>" />
    <input name="_replyTo" type="hidden" value="<%= StaffListActive.Fields.Item("pemail").Value %><% If InStr(StaffListActive.Fields.Item("pemail").Value, "@") > 0 Then %><% Else %>@fpc.wa.gov.au<% End If %>" />
    <input name="_submitDynamic" type="hidden" value="1" />
      <label for="suggestion" id="suggestion"><strong>Your suggestion</strong></label><br/>
      <textarea id="suggestion" name="suggestion" rows="10" cols="45" class="text-input"></textarea>
      <label class="error" for="suggestion" id="suggestion_error">This field is required.</label><br />
        <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
  </form>
    </div>

     <!-- close button is defined as close class -->
     <p>
        <a href="#" class="close">Close this window</a>
        </p>
    </div>
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>
</div>