0

I've tried to modify this post but for some reason it's not working, I'm quite new to JS so I could be missing something in the code I just can't tell where.

I'm building a 3 stage process out of tabs, the tabs are:

  • contact form;
  • tab 2;
  • tab 3;

I don't want the user to have to click 'Submit' on the form and then a separate 'Continue' button to go to the second tab, so I'm looking to apply a Javascript query/callback to the form submission button that links to the second tab but only if the form has been submitted successfully.

This is my existing Javascript:

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").submit(function() {

    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>

Currently this isn't triggering anything.

The submit button's class is .dhvc-form-submit,

View Image

The second tab has the href ID #an_76234532.


Have I missed something and if not how can I achieve this functionality?

  • 2
    Please don't display images of the source code. Take the time to copy the relevant parts and include them to your question. Also check your browser console for errors or use it to debug. – NewToJS Sep 29 '17 at 17:56
  • 1
    This is 3 tabs not 3 pages? You want it to navigate just set window.location = pagename – rjustin Sep 29 '17 at 17:56
  • @NewToJS OP's code **is** in the question... – DontVoteMeDown Sep 29 '17 at 17:58
  • @rjustin I have amended 'pages' to 'tabs', all 3 tabs are on the same page –  Sep 29 '17 at 18:00
  • @DontVoteMeDown not the html. I cannot tell if the submit `button` is within a `form` because if it isn't then it has nothing to submit.... hence nothing executing. – NewToJS Sep 29 '17 at 18:00
  • If your goal is to show a tab or scroll to a section of the page when the id is appended to the url you need specific libraries for this. otherwise its usually something like `domain.com/page#idoftab` – rjustin Sep 29 '17 at 18:02
  • @NewToJS ok but perhaps is better to ask that question to him instead of ask him to add the whole page html – DontVoteMeDown Sep 29 '17 at 18:02
  • @DontVoteMeDown Would you like to read my comment/suggestion again? I didn't ask for the whole page. **"Take the time to copy the relevant parts"** – NewToJS Sep 29 '17 at 18:04
  • @NewToJS he actually added what he think that is *relevant*. He probably doesn't know so he would have to add the whole html to guess what you mean as relevant. – DontVoteMeDown Sep 29 '17 at 18:05
  • @rjustin the second tab id is `domain.com/page/#an_76234532`, will I require extra libraries? I had `window.location =` working before with onclick on the submit button but it wasn't conditional on form submission, I know I can link to the tab with jQuery, it's the conditional part I can't get working. –  Sep 29 '17 at 18:06
  • @van is your `button` place within a `form`? If not then you will find it has nothing to submit and your buttons javascript event is based on submit. You can add a form or change the event listener to `click` – NewToJS Sep 29 '17 at 18:07
  • @NewToJS the button is generated by a plugin as part of a form, it's definitely linked to the form. I'm trying to apply a conditional `window.location =` to the button that belongs to the form so that I can avoid placing a second button to 'Continue'. –  Sep 29 '17 at 18:10

2 Answers2

0

I think the problem you're running into is that the form submits before the ajax request can fire - you need to add e or event as a function parameter then call e.preventDefault() as the first part of your code. That'll make it so submitting just fires that function and the default form functionality doesn't take over.

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").submit(function(e) {
    e.preventDefault();
    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>
will
  • 1,947
  • 1
  • 13
  • 19
0

it does not fire anything because the event is a click. if your selector was the form, it would trigger on submit, use click instead or change selector for the form's Id

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").click(function() {

    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>
Ralph Thomas Hopper
  • 733
  • 4
  • 15