Jquery ajax - Ajax function is not recognized although it is defined in the script

DrDoom
December 13, 2019
218 views
3 votes
3 Answers

I’m trying to submit two separate forms while using one button. After days of research I came to the conclusion, that I can’t do this without using AJAX.

The 1st form submits to a Mikrotik router (so a user gets HotSpot Access), which checks the username and password. Mikrotik login page requires this “path”: $(link-login-only).

The 2nd form has to send the email the user entered, but it has to send it after cca. 0.5sec, since it takes about that long for the user to gain internet access.

So far I’ve encountered two errors which I can’t resolve:

1st: on this line: <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br /> – Uncought ReferenceError: SendAjax is not defined

2cnd: on this line url: "$(link-login-only)", – Uncought SyntaxError: Unexpected Identifier

Full code:

!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>

After looking at the code before posting, would it be a solution to add a hidden button on the 1st form, and using ajax to send the 1st form before having a 0.5sec delay and then executing the 2nd form?

Answers

Please try this:

!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>

Your code seems fine to me you have syntax error check this bellow
for the first error, you need to call the function on the button event.

$(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);
     }
});

The second error is due to the fact that you have one extra closing parenthesis }

The reason for SendAjax not defined is because your script may not be in the same file as your code. SendAjax works in the following:

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery ajax – Ajax function is not recognized although it is defined in the script

Answers