Функция Ajax не распознается, хотя она определена в скрипте

Я пытаюсь отправить две отдельные формы, используя одну кнопку. После нескольких дней исследований я пришел к выводу, что я не могу этого сделать без использования AJAX.

Первая форма отправляется на маршрутизатор Mikrotik (таким образом, пользователь получает доступ к HotSpot), который проверяет имя пользователя и пароль. Страница входа в Mikrotik требует этого «пути»: $ (только для входа по ссылке).

Вторая форма должна отправить электронное письмо, введенное пользователем, но она должна отправить его после cca. 0,5 секунды, поскольку пользователю требуется примерно столько же времени, чтобы получить доступ в Интернет.

Пока что я столкнулся с двумя ошибками, которые не могу исправить:

1-й: в этой строке: <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br /> - Uncought ReferenceError: SendAjax не определен

2cnd: в этой строке url: "$(link-login-only)", - Uncought SyntaxError: Unexpected Identifier

Полный код:

!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" name="dst" value="$(link-orig)" />
        <input type="hidden" name="popup" value="true" />
        <input type="hidden" name="username" type="text" value="username" />
        <input type="hidden" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">


    function SendAjax() {
        var email = $("#email").val();
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }
        // AJAX code to submit form
        else {$.ajax({
                type: "POST"
                url: "$(link-login-only)",                
                data: $("#hotspot").serialize(),
            });

            function callback(){
            $.ajax ({
                    url: $("#mail").attr('action'),
                }

            });
            }
            setTimeout(callback(), 1000);
        }
    }
</script>
</html>

Посмотрев код перед публикацией, можно ли было бы добавить скрытую кнопку в 1-ю форму и использовать ajax для отправки 1-й формы до того, как будет задержка 0,5 с, а затем выполнить вторую форму?


jquery ajax mikrotik
person DrDoom    schedule 13.12.2019    source источник
comment
setTimeout(callback(), 1000); ‹--- ошибка. Этот код неверен, он не ждет 1 секунду, чтобы выполнить обратный вызов   -  person epascarello    schedule 13.12.2019
comment
Думаю, я сделал довольно много ошибок и со временем исправлю их. Но сначала я бы хотел избавиться от основных проблем. Спасибо, что указали на это =)   -  person DrDoom    schedule 13.12.2019

Ответы (3)


arrow_upward
1
arrow_downward

Ваш код кажется мне нормальным, у вас есть синтаксическая ошибка, проверьте это ниже на первую ошибку, вам нужно вызвать функцию для события кнопки.

$(document).on('click', '#submit', function(event) {
        event.preventDefault();         
        var email = $("#email").val();
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }else {
            $.ajax({
                type: "POST"
                url: "$(link-login-only)",                
                data: $("#hotspot").serialize(),
            })
            .always(function() {
                console.log("first call completed");
            });
            function callback(){
             $.ajax ({
              url: $("#mail").attr('action'),
          // } you need to remove this parenthesis
      });
         }
         setTimeout(callback(), 1000);
     }
});

Вторая ошибка связана с тем, что у вас есть лишняя закрывающая скобка }

person Abdul Manan    schedule 13.12.2019
comment
Спасибо за hte anwser, но SendAjax все еще не определен. знак равно - person DrDoom; 13.12.2019
comment
замените мой код всей функцией sendAjax (), как показано ниже. - person Abdul Manan; 13.12.2019
comment
Сделал полную замену. не сработало. все еще не определен SendAjax. - person DrDoom; 13.12.2019
comment
$(document).on('click', '#submit', function(event) означает, что нажатие на кнопку id = submit запускает код внутри нее. - person Abdul Manan; 13.12.2019
comment
удалите onclick="SendAjax()" из кнопки отправки - person Abdul Manan; 13.12.2019
comment
все в порядке. Я попробую. сообщу через секунду =) - person DrDoom; 13.12.2019
comment
Скачал jquery и поставил на роутер. Проблем больше нет, похоже, проблема с SendAjax решена. Но, как я уже упоминал ранее, у меня все еще есть ошибка Unexpected SynthaxError. Но поскольку проблема, указанная в заголовке, решена, я приму ваш ответ. Спасибо за помощь. Во многом это оцениваю. - person DrDoom; 13.12.2019

arrow_upward
1
arrow_downward

Пожалуйста, попробуйте это:

!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" id="dst" name="dst" value="$(link-orig)" />
        <input type="hidden" id="popup" name="popup" value="true" />
        <input type="hidden" id="username" name="username" type="text" value="username" />
        <input type="hidden" id="password" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" id="email" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">

    $(document).on('click', '#submit', function(event) {

        if (!$("#email").val()) {
            alert("Please enter your email.");
            return false;
        }

        // AJAX code to submit form #hotspot
        $.ajax({

            type: "POST"
            url: "$(link-login-only)",                
            data: $("#hotspot").serialize(),
            success: (data => {
                console.log(data)

                // After getting response of #hotspot, Subbmitting the second form #mail
                $.ajax ({
                    url: $("#mail").attr('action'),
                    data: $("#mail").serialize(),
                    success: (dataMail => {
                        console.log(dataMail);
                    }),
                    error: (errorMail => {
                        console.log(`#hotspot successfuly submitted but #mail getting error: ${errorMail}`)
                    })
                })
            }),
            error: (error => {
                console.log(`#hotspot not submitted because #mail getting error: ${error}`);
            })
        });
    });
</script>
</html>
person Pushpendra Kumar    schedule 13.12.2019
comment
Извините за отзыв принятого anwser, но SendAjax все еще не определен. : / - person DrDoom; 13.12.2019

arrow_upward
0
arrow_downward

Причина, по которой SendAjax не определена, заключается в том, что ваш скрипт может быть не в том же файле, что и ваш код. SendAjax работает следующим образом:

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" name="dst" value="$(link-orig)" />
        <input type="hidden" name="popup" value="true" />
        <input type="hidden" name="username" type="text" value="username" />
        <input type="hidden" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">


    function SendAjax() {
        alert('OK');
    }
</script>
</html>

person hydra    schedule 13.12.2019
comment
JS / JQuery находится в том же файле под формами. Я не знаю, почему это не определено ... - person DrDoom; 14.12.2019