Why am I redirected when I submit form?

Question

On this page I am trying to create form by JQuery. I want to send data by method .post() using action="http://hebrew-transliteration.wz.cz/users/signup.php" but I am redirected instead. Where is the problem and how to successfully post it using JQuery AJAX?

https://krestanske-clanky.webnode.cz/vip/

When I click on button Send, I am redirected.

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             if (jQuery) {  
               // jQuery is loaded  
              $form = $('<form id=current_sender action="http://hebrew-transliteration.wz.cz/users/signup.php" method=post></form>');
              $form.append('<h2>Registrovat ke psaní komentářů</h2>');
              $form.append('<label for="name1">Jméno či přezdívka: </label>');
              $form.append('<input name=name1 type=input maxlength=15  size=10>');
              $form.append('<label for=name2>&nbsp;&nbsp;Příjmení: </label>');
              $form.append('<input name=name2 type=input maxlength=20 size=10>');
              $form.append('<label for=email>&nbsp;Email:</label>');
              $form.append('<input name=email type=input maxlength=40  size=10 value=@>');
              $form.append('&nbsp;<input type=submit value=Send>');
              $('footer#footer').append($form);
             } else {
               alert("JQuery doesn't work");
             }
          });

$("#current_sender").submit(function(e) {
    e.preventDefault(); // avoid to execute the submit
    var form = $(this);
    var url = form.attr('action');
alert(url);
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes form's elements.
           success: function(data) {
               alert(data); // show response
           }
         });
});
        </script>

Try changing the to a . It will be independent from the form -> Add an eventListener to this button — Tracer69, Feb 13 '20 at 12:22
The code to add the event handler (`$("#current_sender").submit()`) is **outside** the `$(document).ready()` event handler, so first it binds the event to all matching forms (there aren't any so this has no effect), then the document is ready, then the form is added to the document. — Quentin, Feb 13 '20 at 12:25

score 1 · Accepted Answer · answered Feb 13 '20 at 12:23

That is because you are adding the submit event listener outside of the $(document).ready() callback, which means that the callbacks aren't bound properly since the form element is likely to be missing at runtime.

If you move the entire block inside $(document).ready() then it should be fine:

$(document).ready(function(){
    // jQuery is loaded  
    $form = $('<form id=current_sender action="http://hebrew-transliteration.wz.cz/users/signup.php" method=post></form>');
    $form.append('<h2>Registrovat ke psaní komentářů</h2>');
    $form.append('<label for="name1">Jméno či přezdívka: </label>');
    $form.append('<input name=name1 type=input maxlength=15  size=10>');
    $form.append('<label for=name2>&nbsp;&nbsp;Příjmení: </label>');
    $form.append('<input name=name2 type=input maxlength=20 size=10>');
    $form.append('<label for=email>&nbsp;Email:</label>');
    $form.append('<input name=email type=input maxlength=40  size=10 value=@>');
    $form.append('&nbsp;<input type=submit value=Send>');
    $('footer#footer').append($form);

    // Add event listener after element is appended to DOM
    $("#current_sender").submit(function(e) {
        e.preventDefault(); // avoid to execute the submit
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes form's elements.
            success: function(data) {
                alert(data); // show response
            }
        });
    });
});

Thank you this helped to solve the problem. – John Boe Feb 13 '20 at 12:25 — John Boe, Feb 13 '20 at 12:25

Why am I redirected when I submit form?

1 Answers1