-1

I am using "Agency" a one page Bootstrap template. When the form is successful, and the email is sent, a popup message appears. Instead of a popup, I would like to have a new page open.

$(function() {

$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input#name").val();
        var email = $("input#email").val();
        var phone = $("input#phone").val();
        var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
        // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
        }
        $.ajax({
            url: "././mail/contact_me.php",
            type: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
                message: message
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Thank You. Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Dust
  • 3
  • 1

2 Answers2

1

Replace the success function with this:

success: function() {
           //clear all fields
         $('#contactForm').trigger("reset");
         window.open('http://www.example.com');
       },

This opens a new tab while also clearing the form on your first page.

sideroxylon
  • 4,338
  • 1
  • 22
  • 40
  • Hi sideroxylon. I am new to this, and that file has several lines that have "success: function", could you show me which block of code I need to replace. Also is it possible to have the new page **not** load in a new tab , but instead replace the old page. Thank you. – Dust Mar 05 '15 at 04:42
  • In your code above, replace everything from `success: function() {` to `},'` just above `error: function() {` – sideroxylon Mar 05 '15 at 04:46
  • I was editing my question when you had already replied, so you may not have seen what I changed. Your suggestion worked perfectly, but I would like the new page to open in the same window and not a new tab. How would I do this ? – Dust Mar 05 '15 at 05:01
  • To open in the same window, replace the contents of the `success function` (both lines) with `location.href = 'http://www.yourURL.com'` – sideroxylon Mar 05 '15 at 05:03
  • Sorry sideroxylon, I must misunderstand your instructions, it keeps opening in a new tab. I cleared cache and added the code like this `success: function() { //clear all fields $('#contactForm').trigger("reset"); location.href = 'http://www.yourURL.com'); },` – Dust Mar 05 '15 at 05:16
  • Remove ` //clear all fields $('#contactForm').trigger("reset"); `. If you are navigating to a new page in the same browser tab, you don't need it. – sideroxylon Mar 05 '15 at 05:19
  • It is opening a new tab for the new page and not clearing the form on the old tab. ` cache: false, success: function() { location.href = 'http://my website.com'); },` – Dust Mar 05 '15 at 05:42
  • Have you tested in another browser? `location.href` (or `window.location.href` opens the target URL in the current window. If it's not some odd browser setting, there might be something in bootstrap that overrides it. What do other links on the same page do? Also - is your form in a modal window (floating over the parent page)? – sideroxylon Mar 05 '15 at 06:02
  • Hi @sideroxylon I was using Firefox and then I tried Chrome, but it made no differance. The form looks embedded to me. The form is on the bottom of the page, here is a link to a live preview of the theme. https://ironsummitmedia.github.io/startbootstrap-agency/ here is the download page if you want to look at the code. http://startbootstrap.com/template-overviews/agency/ I used a clean backup of the code and tried again today to at least get it to open in a new tab like yesterday, but now it is just opening to a 404 on my website, very frustrating. Sorry that I am not getting this quicker. – Dust Mar 05 '15 at 22:55
0

After a little googling I think this is what you are looking for. If you just add this code to your success block and change the URL to what page you would like to redirect to it should work (I didnt test it but the logic seems to work to me)

var url = "yourURL";
$(location).attr('href',url);

https://stackoverflow.com/a/1638449/3500081

Community
  • 1
  • 1
Tango199
  • 52
  • 1
  • 6