Forum

Thread tagged as: Question, Problem, Forms

Forms app, JS and page refresh

I have a form successfully submitting to the Forms app. I'm trying to prevent the page refresh and want to handle a successful submission with JS.

For the action I've tried action="" which reloads the page, and action="javascript:void(0);" which seems to prevent anything from happening at all. In both cases, the following isn't working:

<perch:success>
<script type="text/javascript">
    console.log("YES");
</script>
</perch:success>

I've also tried AJAX:

<perch:success>
<script type="text/javascript">
    $.ajax({ 
        type: "POST", 
        url: "/_contact-form.php", 
        data: dataString, 
        success: function() {
            console.log("YES");
        })
    });
</script>
</perch:success>

In all cases, the page simply refreshes. How can I prevent the page refresh entirely and run JS on a successful submission? Thanks!
Shane Lenzen

Shane Lenzen 18 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

In your ajax example, are you populating dataString ?
Fred Stidston

Fred Stidston 0 points

6 years ago

I'm interested in the answer to this
Shane Lenzen

Shane Lenzen 18 points

6 years ago

Fred, I've been doing it like this:

Contact form template:

<perch:form id="contactform" action="javascript:void(0);" method="post" app="perch_forms">

    <div>
        <perch:label for="first_name">First Name</perch:label>
        <perch:input type="text" id="first_name" required="true" label="First Name" />
    </div>

    <div>
        <perch:label for="last_name">Last Name</perch:label>
        <perch:input type="text" id="last_name" label="Last Name" />
    </div>

    <div>
        <perch:label for="email">Email Address</perch:label>
        <perch:input type="email" id="email" required="true" label="Email Address" />
    </div>

    <div>
        <perch:label for="message">Message</perch:label>
        <perch:input type="textarea" id="message" label="Message" rows="5" encode="false" />
    </div>

    <div>
        <perch:input type="submit" id="submit" value="Send Message" />
    </div>

    <perch:success>
    <script>
            return 'SUCCESS';
    </script>
    </perch:success>
</perch:form>

Then, on the page where the form exists, I use this JS (w/ jQuery)

$('#form1_contactform').submit(function(){ 
  $.ajax({
    type: "POST",
    data: $('#form1_contactform').serialize(),
    dataType: "html",
    timeout: 8000,
    cache: true
  }).done(function(data) {
    if(data.indexOf("SUCCESS") > -1) {
      // code for success goes here
    } else {
      // code for failure goes here
    };
  }).fail(function() {
    // code for failure goes here
  });
  return false;
});

Hope it helps.
Shane Lenzen

Shane Lenzen 18 points

5 years ago

I would like to update this thread, because my above post is completely wrong. I realized this when I needed to modify the above code to accommodate file uploads. This is how I'm doing it now:

<perch:success>
  <div class="formResponse">SUCCESS</div>
</perch:success>
<perch:error for="resume" type="filetype">
  <div class="formResponse">Resume must be a PDF or Office document.</div>
</perch:error>
<perch:error for="resume" type="fileupload">
  <div class="formResponse">Resume upload failed. Please check the file size and try again.</div>
</perch:error>
<perch:error for="all" type="general">
  <div class="formResponse">CMS Submission Failure</div>
</perch:error>

and the .ajax() options:

var formData = new FormData($(form)[0]);
$.ajax({
  type: "POST",
  data: formData,
  dataType: "html",
  contentType: false,
  processData: false,
  cache: true,
  timeout: 60000,
}).done(function(data) {
    var response = $(data).find(".formResponse").html();
  if(response.indexOf("SUCCESS") > -1) {
    // do success stuff here.
  } else {
    // do fail stuff here. the Perch failure message is the "response" var
  }
}).fail(function() {
     // AJAX failed, no Perch error
});

If anyone has found a better way, I'm all ears!