Canvas Support

Disable ajaxSubmit

7 replies·opened Dec 20, 2020
I
iNoizeDec 20, 2020

Hello,
can i disable the ajaxsubmit on the class form-widget but let validate the fields ?

S
SemiColonWebSTAFFDec 20, 2020

Hello,

This is Definitely Possible.

Consider using the File attached to this reply. Then simply add the .custom-submit Class to the .form-widget DIV.

If you are using the js/plugins.js or the js/plugins.min.js File, you will need to Update the above codes in these Files as well. More information on using Javascript Files is available here; http://docs.semicolonweb.com/docs/getting-started/javascript/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

I
iNoizeDec 21, 2020

Hello, I changed the plugins.ajaxform.js with your version and added the .custom submit class.
Butt still get the ajax request ?

This is currently my form code 

            <div class="col-md-6">
             <!--  <div class="col-padding"> -->
                <div class="quick-contact-widget form-widget custom-submit clearfix my-3">

                  <h3 class="text-capitalize ls1 font-weight-normal">Kontakt aufnehmen</h3>

                  <div class="form-result"></div>

                  <form id="quick-contact-form" name="quick-contact-form" action="#" method="post" class="quick-contact-form mb-0">

                  <!--   <div class="form-process"> 
                      <div class="css3-spinner">
                        <div class="css3-spinner-scaler"></div>
                      </div>
                    </div> -->

                    <input type="text" class="required sm-form-control input-block-level not-dark" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Name" />

                    <input type="email" class="required sm-form-control email input-block-level not-dark" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Email" />

                    <input type="text" class="required sm-form-control input-block-level not-dark" id="quick-contact-form-phone" name="quick-contact-form-phone" value="" placeholder="Tel: (+49-555-2221)" />

                    <textarea class="required sm-form-control input-block-level not-dark short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="5" cols="30" placeholder="Nach was suchen Sie ? (z.B.: Villa on the Beach)"></textarea>

                    <input type="text" class="d-none" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="" />
                   <!--  <input type="hidden" name="prefix" value="quick-contact-form-"> -->

                    <div class="form-check">
    <input type="checkbox" class="form-check-input " id="exampleCheck1" checked>
    <label  for="exampleCheck1"><span style="font-size: 8px; color: #555; "> <?= __("Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Informationen zum Umgang mit Nutzerdaten finden Sie in unserer");?>  <a href="<?=$pages->get(1111)->url?>" target="_blank" > <?= __("Datenschutzerklärung");?> </a></span></label>
  </div>

                    <button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-small button-rounded m-0" value="submit">Email senden</button>

                  </form>

                </div>
           <!--    </div> -->
            </div>
S
SemiColonWebSTAFFDec 21, 2020

Hello,

This should work fine. We have tested this code and then provided this to you. Can you please confirm if you are using js/plugins.min.js or AJAX JS loading? Because if you are using the js/plugins.min.js File, you will need to update the codes there as well. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

I
iNoizeDec 21, 2020

Hello,
now i see i use the plugins.min.js like in your examples.

How to update this ?

Thank you

S
SemiColonWebSTAFFDec 21, 2020

Hello,

The js/plugins.min.js File includes all the JS Plugins combined and minified. First, you will need to update the js/plugins.js File by finding the plugins.ajaxform.js Functions inside this File and then update it with the codes provided by us. Then minify this File using this Minifier: https://javascript-minifier.com/ .

Meanwhile, we have done this for you. Use the file attached.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

I
iNoizeDec 22, 2020

Super Thanks, I thought there were special tricks.
One question
is it possible to validate checkbox is checked ?
If i add only the required class then the script doesnt work for all fields.

Thanks 

                    <div class="form-check" style="    padding-left: 2.25rem;">
    <input type="checkbox" class="form-check-input " id="exampleCheck" checked>
    <label  for="exampleCheck1"><span style="font-size: 10px; color: #555; "><?= __("Ich akzeptiere die");?>  <a href="<?=$pages->get(1111)->url?>" target="_blank" > <?= __("Datenschutzerklärung");?>.</a></span></label>
  </div>
S
SemiColonWebSTAFFDec 22, 2020

Hello,

Very happy to Help! :)

You can try using something like this:

<div class="col-12 form-group">
	<div class="form-check show-error-msg">
		<input class="form-check-input required" type="checkbox" name="template-contactform-agree-terms" value="Yes">
		<label class="form-check-label" for="defaultCheck1">
			Agree to the Terms
		</label>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard