Help with closing message box and submiting

JavaScript
23

Sorry you’ve lost me there. Which is the form page, the page containing that #upload-form I suppose? How can it not be accessed?

PS: If you mean the redirect on success: I was just asking about the message logic for now. You can check if the form got submitted in the network panel of your browser dev tools.

24

The form page is the the same file code that I’ve provided in this posting. When I add your code and select the upload button, the upload form page doesn’t display, nothing happens when the Upload button is selected.
When Ithe file has this code, the form page displays upon selecting the Upload button:

   $('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}?hash=' + $('.main_session').val(),
	  //});

	 // $('#submit-btn').click(function (event) {
	  //  event.preventDefault()
	 //   $('.loading_msg').show()
	//  });

	//  $('.loading_msg').click(function () {
	  //  $('#upload-form form').submit()
//});

      beforeSend: function() {
etc......

just trying to clarify.
I look forward to any additional help.

25

Which upload button are you referring to – is there additional logic involved to show the form? Could you provide the required markup and JS for this (or better yet a fiddle or similar)?

Here’s one based on with the information I have so far: when clicking the submit button, the message is getting shown, and when clicking that message, the form is getting submitted:

26

Thanks agin for your reply.
After copying your JS from your fiddle, and adding it in like so:

   $('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}?hash=' + $('.main_session').val(),
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");

$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})
 },

the upload page is accessible (I don’t know why it wasn’t before), and the Form submits successfully, but unfortunately without displaying a Message.
(the same html is used).

I look forward to any comments

27

Well I can only reiterate: do not add event listeners inside beforeSend(); and in the case of the submit button, it’s actually too late as the button already got clicked when beforeSend() is getting called.

If it’s not working any more when putting it out of that function, there seems to be something missing in the code you posted which is responsible for this. What’s with that upload button to display the form that you mentioned?

28

Oh well, or maybe try another approach: inside beforeSend(), check if the loading message is visible. If it is, proceed submitting the form; otherwise show the message and cancel the submission:

const $loadingMsg = $('.loading_msg')
const $uploadForm = $('#upload-form form')

$uploadForm.ajaxForm({
  url: '...',
  beforeSend: function () {
    if ($loadingMsg.is(':visible')) {
      return true
    }

    $loadingMsg.show()
    return false
  }
})

$loadingMsg.click(function () {
  $uploadForm.submit()
})
30

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.