Miko. eCommerce Template

Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

On Form Submit - hide the ba-form-submit-field, Show a hidden div and delay the page re-direct

1 month 2 weeks ago #1

  • tony's Avatar
  • tony
  • Posts: 36
HI, I am trying to to hide the Balbooa form submit field using JS

$('form').submit(function () {

and at the same time show a div i have hidden with css and also delay Balbooa forms url redirect for a set time while an animation runs.

I have this example set up which shows and hides when submitted but im not sure it will apply / work with your form? jsfiddle.net/morganix/8ad9whnp/9/

$('form').submit(function () {
$('#checking').show();
$('.ba-form-submit-field').hide();
return false;
});

Any help would be much appreciated.

thankyou

1 month 2 weeks ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,
Thank you for contacting us

Your question is not clear, what and for what result you need to do?

Regards,
Vyacheslav, Balbooa.com

1 month 2 weeks ago #3

  • tony's Avatar
  • tony
  • Posts: 36
HI. I have created a div just below my balbooa form and hidden it using css which contains an animation.

When the form is completed and the user clicks submit, i want to hide the submit button field and delay the form re-direct and reveal the hidden div ( while a short animation plays )

It will then re-direct as normal


1 month 2 weeks ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
There is no such option, it requires a lot of customization,
the support provides assistance in problems with the default functionality and a small custom.

Regards,
Vyacheslav, Balbooa.com

1 month 2 weeks ago #5

  • tony's Avatar
  • tony
  • Posts: 36
Hi, yes I understand it’s not your task to offer customisation.

I already have a working example set up as shown in previous post. Will this code work in balboa form JS code area?

$('form').submit(function () {
$('#checking').show();
$('.ba-form-submit-field').hide();;
});

And how can I edit the form redirect timer?

1 month 2 weeks ago #6

  • tony's Avatar
  • tony
  • Posts: 36
hi, I have compiled this code below based on some research but i can not find the balbooa form ID to use. Where can i get this from please? Also do you think the below script would work or can you please point me in the right direction for the best method to use with your form in order for me to achieve the result im looking for :) Thank you in advance


<script type="text/javascript">
$('#form-id').submit(function(e) {
e.preventDefault(); // prevent form from being submitted

//hide button & show hidden div functions before submit
$('.ba-form-submit-field').hide();
$('#checking').show();
//end functions

setTimeout(() => {}, 4000);
return true;
});
});
</script>

1 month 2 weeks ago #7

  • tony's Avatar
  • tony
  • Posts: 36
Hi, I know your very busy but do you have any advice please?

You know better than me on how to delay the form submit and hide the button

thanks

1 month 2 weeks ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,

You cannot do this in a code editor.
To do this, you need to edit the form files (these changes will be lost with each update)

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 5 days ago #9

  • tony's Avatar
  • tony
  • Posts: 36
Hi Vyacheslav, thanks for your support again :)

The script i was going to put into the head section of page, but i dont know if it would work.

Can you advise which core file of balbooa forms would need to be edited?

Also would i use the code i shared above or something similar to this one below?

$('.button').on('click', function() {

//first hide button div
$(".ba-form-field-item.ba-form-submit-field").hide();

//now show the hidden div on web page
$("#checking").css('display', 'flex');
})

1 month 5 days ago #10

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You can do this in file ba-form.js (components/com_baforms/assets/js/ba-form.js)
But after the update, all changes will be lost.

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 3 days ago #11

  • tony's Avatar
  • tony
  • Posts: 36
HI Vyacheslav, hope you are well. Sorry to keep bothering you, but you know more about your form than anyone.

Does this code look like it is correct to do the task as mentioned?

$('form').submit(function (e) {
e.preventDefault();
$('#checking').show();
$('.ba-form-submit-field').hide();

setTimeout(() => {}, 5000);
return true;
})

Also within ba-form.js where would you add it? or does it need something extra to work.

Sorry again as im not 100% on this area.

thank you again

1 month 3 days ago #12

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You need to find the code in file ba-form.js (components/com_baforms/assets/js/ba-form.js)
(line 1380)
formsApp.sendAjaxForm(form, $this);
replace it to
$f('#checking').show();
                $f('.ba-form-submit-field').hide();
                setTimeout(function(){
                    formsApp.sendAjaxForm(form, $this);
                }, 9999);


Best Regards,
Vyacheslav, Balbooa Support Team

1 month 2 days ago #13

  • tony's Avatar
  • tony
  • Posts: 36
Vyacheslav you are a legend :) thank you so much, works perfect

1 month 2 days ago #14

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You are welcome ;)

If you like our Form Builder and support, please take a moment to rate it! :cheer:
extensions.joomla.org/extension/forms/

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum