skip to Main Content

I have a problem in my coding, I made it very very short so that I could get a fast answer, and not to waste your time, I have an input text, an input number and a button, when I click a button, a function would call named (getvalue), but the problem is the ajax call run after the javascript code, the big project that am working on, one of the ajax call, is that if the other php file returns invalid, then I don’t want to apply .val() in the input text with id (num), cause if it’s invalid, and the calculation is wrong, why should the javascript code work?!, I don’t want to be run if the ajax returns invalid, that’s all I have some ajax call requests inside this function in my project and need to run and call before any other javascript codes, how could I do that?!

here is the index file php code:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" name="" id="inp">
    <button onclick="getValue()">Click Me</button>

    <br>
    <input type="text" name="" id="num">

    <script src="jquery-3.6.1.min.js"></script>
    <script>
        function getValue() {

            var inpText = $("#inp").val();
            var inpNum = $("#num");
            alert("hey ")
            alert("hello world ")
            //   javascript coding..... aproximately 100 lines

            inpNum.val("random num...")


            $.ajax({
                type: 'POST',
                url: 'validate.php',
                data: {
                    myInput: inpText,
                },
                complete: function(r) {
                    if (r.responseText == "validNum") {
                        alert("valid")
                    } else {
                        alert("invalid number, please enter another number  ")
                    }

                }
            });       
        }
    </script>
</body>

</html>
<?php

again, I made it very simple, just so you understand, I don’t want to delete validate.php file and put the whole code inside index.php, with all other ajax call requests.

2

Answers


  1. You can execute js code after ajax with then()

    $.ajax({
      type: 'POST',
      url: 'validate.php',
      data: {
      myInput: inpText,
      },
      complete: function(r) {
        if (r.responseText == "validNum") {
        alert("valid")
      } else {
        alert("invalid number, please enter another number  ")
      }
     }
    }).then(function getValue() {
      var inpText = $("#inp").val();
      var inpNum = $("#num");
      alert("hey ")
      alert("hello world ")
      //   javascript coding..... aproximately 100 lines
      inpNum.val("random num...")
    });
    
    Login or Signup to reply.
  2. async function myFunction() {
      // This function will be called before the AJAX request is sent.
    }
    
    async function fetchData() {
      const response = await fetch('/api/endpoint');
      const data = await response.json();
      return data;
    }
    
    const data = await fetchData();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search