Forum

Thread tagged as: Question, Forms

Ajax Form App Single page website

Hi there. I have two Forms on the bottom of my single page website which are hided in base of a radio button choice. So for example if you choose the radio "general enquiry" it will show a form otherwise if you choose "catering enquiry" you will see another form. What I'm trying to achieve is to prevent the page refresh (the default form action) and want to handle a successful submission with JS and show the message.

I tryed this solution text to link but no luck for me.

On my index page i have:

<form id="select-form"> 
       <label>General Enquiry<input value="general" type="radio" checked="checked" name="formselector" class="general-enquire"></label>     
         <label>Catering Enquiry<input value="catering" type="radio" name="formselector" class="catering-enquire"></label>     
</form>
<div id="general-form">
      <?php perch_content('Contact - Form'); ?>
 </div>
 <div style="display:none" id="catering-form">
       <?php perch_content('Contact - Form - Catering'); ?>
 </div>

So show/hide the div in base of the radio button. By default the General form is show.

<perch:form id="form-contact-general" method="post" app="perch_forms" role="form">
<div>
     <perch:input class="form-control" type="text" id="name" required="true" label="Name" placeholder="Your name" />
     <perch:error for="name" type="required">Please add your name</perch:error>
</div>

<div>
    <perch:input class="form-control" type="email" id="email" required="true" label="Email" placeholder="E-mail" />
    <perch:error for="email" type="required">Please add your email address</perch:error>
    <perch:error for="email" type="format">Please check your email address</perch:error>
</div>

<div>
    <perch:input class="form-control" type="text" id="phone" required="true" label="Phone" placeholder="Phone" />
    <perch:error for="phone" type="required">Please add your name</perch:error>
</div>

<perch:input class="form-control" type="textarea" id="message" required="true" rows="5" label="Message" placeholder="Message" />
<perch:error for="message" type="required">Please add the message</perch:error>     

<div>
   <perch:input class="form-submit" type="submit" id="submit" value="Send" />
</div>

<perch:success>
    <perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</perch:success>

</perch:form>

How can I prevent the page refresh and run JS on a successful submission? Thanks Vince.
Vincenzo Alaia

Vincenzo Alaia 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, you can do that. You'll need to implement the JavaScript to handle it though - it's not part of Perch.
Damon Golding

Damon Golding 1 points

6 years ago

If you are using jQuery you can use this to stop the page refresh:

$('form').on( 'submit', function(e){
    e.preventDefualt();
});

You will need to create a AJAX call to submit the form, also you will need to use <perch:input type="cms" /> which will output a input tag with a string that perch_forms uses to validate the call.

Something like this may work for you:

var formData = {}; // Where form data will be stored

// Loop through input tags with class name .form-control then get data and place in formData var
$('#form-contact-general .form-control').each(function(){

  var $this = $(this);

  fromData[$this.attr('name')] = $this.val(); // Use the name of current tag and set the value to the value of the field

});

// As this field is generated in perch (and we are not allowed to add a class name to it) we need to grab this separately
fromData['cms-form'] = $('#form-contact-general input[name="cms-form"]').val();

// AJAX call
$.ajax({
    url: window.location.pathname, // Send request to this page
    type: "POST",
    data: formData // Send our form data
})
.done(function(data,status){
  // Completed
}) 
.fail(function(){
  // Error :(
});
Vincenzo Alaia

Vincenzo Alaia 0 points

6 years ago

Hi Damon Golding thanks for your reply. I cannot figure out why if I use

$('form').on( 'submit', function(e){
    e.preventDefualt();
});

I got a JS error ( e.preventdefault is not a function ).

If I changed it with

$('form').submit(function(event) {
        event.preventDefault();
});

and press the submit button nothing happen. The form is not submitted at all.

In my form template i added

<div>
   <perch:input type="cms" />
</div>

just before the

<div>
   <perch:input class="form-submit" type="submit" id="submit" value="Send" />
</div>

and immediately after the submit button i have the thanks message

<perch:success>
    <perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" /></perch:success>

Also in my form setting on success Redirection i have #enquire which is the achor link to my forms.

Do you have any idea?

Thanks, Vince.
Vincenzo Alaia

Vincenzo Alaia 0 points

6 years ago

UPDATES!

Ok was a ridiculous problem. Instead to loop through input tags, I am using .serialize() function and seams to have some problem with <perch:input type="date". I change it in type="text" and it works.

Thanks for your help guys. I can confirm that also the code on this post works.

Vince.
Damon Golding

Damon Golding 1 points

6 years ago

Sorry I had a type in my code, that's why you were getting the error.

Basically e.preventDefault(); stops/interrupts normal behaviour. That's why the form doesn't send when using this.

I'm glad you got it working :)
Andrew Coe

Andrew Coe 0 points

5 years ago

I just created a Perch single page website with jQuery validation and ajax submission - I've written a detailed post, including full code exmaples, on my blog about how to do it. You can read it here.