Textpattern CMS

#1 2017-09-16 17:49:48

ibadullah

Member

From: Kabul, Afghanistan

Registered: 2017-09-16

Posts: 49

Prevent reload on modal of bootstrap when submit form

I’m new with Textpattern with my first project, it looks very nice !
How to prevent from refreshing all the page when submiting the registration form on a modal of bootstrap?
By the help of mck_login plugin, users can register and login to the website.

<a href="#" data-toggle="modal" data-target="#reg_form">Register</a>

<div class="modal fade" id="reg_form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <h3>Register Form</h3>
      <txp:mck_register_form>
        <txp:mck_login_errors />
        <txp:mck_login_input type="text" name="mck_register_realname" label="Full Name: " />
        <txp:mck_login_input type="text" name="mck_register_name" label="Username: " /><br />
        <txp:mck_login_input type="text" name="mck_register_email" label="Email: " /><br />
        <button class="button" type="submit">Register</button>
      <txp:else />
        <p>Email sent to the provided email address with your account's login details.</p>
      </txp:mck_register_form>
    </div>
  </div>
</div>

Last edited by ibadullah (2019-04-10 06:00:40)

#2 2017-09-17 07:54:26

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,616

Website

Re: Prevent reload on modal of bootstrap when submit form

As you say, this is due to the page refresh. The form has to post the submitted data to process the registration and enter details in the database.

What you need to do is trap the form post action when the submit button is pressed so that the entire page does not reload, and then reload the result via Ajax in the bootstrap modal.

That’s a javascript/bootstrap question rather than a textpattern question. I’m not very proficient with bootstrap but you’ll find numerous threads on stackoverflow that deal with your question. I know it’s not a direct answer, but perhaps that helps…

BTW: you may find live form validation useful too to prevent the form submitting with incorrect/incomplete data. Again, there are numerous javascript validation scripts out there that can help.

---

TXP Builders – finely-crafted code, design and txp