Javascript 单击按钮验证表单后运行JS函数

我有2个JS函数；单击表单上的按钮后，第一个

函数1

将信息发送到服务器的python脚本。第二个函数，

function2

转到下一个页面层（不是下一个HTML页面，这是一个多页面表单，所有内容都在一个HTML页面上）

目前，我正在按钮上使用onClick函数：

onClick=“function1（）；”

，以及JQuery。如果三个条目中有一个保留为空，表单将检查并告诉用户填写空字段

我如何使

function2

等待

function1

成功执行，并且所有有效的表单条目和python脚本都没有错误（python脚本返回“”，204，因此一旦运行，页面就没有变化，所以这对这个问题并不重要）

下面是我的JS函数脚本；任何建议都将不胜感激

<script>
  form = document.getElementById("formID");

  function function1() {
    form.action = "/runPythonFunc";
    form.submit();
    // JQuery validates the form to make sure all entries are filled
    // How do I make function2 wait now until all the entries have been filled by the user?
    function2('page2')
  }
</script>



<script language="JavaScript">
  var currentLayer = 'page1';

  function function2(lyr) {
    hideLayer(currentLayer);
    document.getElementById(lyr)
      .style.visibility = 'visible';
    currentLayer = lyr;
  }

  function hideLayer(lyr) {
    document.getElementById(lyr).
    style.visibility = 'hidden';
  }

  function showValues(form) {
    var values = '';
    var len = form.length - 1;
    //Leave off Submit Button
    for (i = 0; i < len; i++) {
      if (form[i].id.indexOf("C") != -1 ||
        form[i].id.indexOf("B") != -1)
        //Skip Continue and Back Buttons
        continue;
      values += form[i].id;
      values += ': ';
      values += form[i].value;
      values += '\n';
    }
    alert(values);
  }
</script>

在上述两个选项之间是否有一种理想的方式，或者在我的例子中是否有一种完全不同的方式来使用AJAX

附加代码，HTML格式：

<form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="">

  <!-- PAGE 1 -->
  <div id="page1" class="page" style="visibility:visible;">

    <!-- USER EMAIL -->

    <label for="Algorithm-Name-3" class="custom-question algorithm-name">Enter your email<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="User-Email" data-name="User Email" placeholder="Email address"
      id="User-Email" required="">

    <!-- ALGORITHM NAME -->

    <label for="Algorithm-Name-3" class="custom-question algorithm-name">What will you name your algorithm?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Name" data-name="Algorithm Name"
      placeholder="Be as creative as you like!" id="Algorithm-Name" required="">

    <!-- ALGORITHM DESCRIPTION -->

    <label for="Algorithm-Desc-3" class="custom-question algorithm-desc">Briefly describe what your algorithm does?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Description"
      data-name="Algorithm Description" placeholder="You can still be creative!" id="Algorithm-Desc" required="">


    <br><br>
    
<!-- NOTE: metaSQL IS FUNCTION1 -->
    <p><input type="submit" class="submit-button-2 w-button" id="C1" value="Add Animal" onClick="metaSQL();"></p>

  </div>

  <!-- PAGE 2 (1st ANIMAL) -->

  <div id="page2" class="page">

    <p style="font-family: Poppins,sans-serif; color: #fff;">1st Animal</p>

    <!-- 1ST ANIMAL NAME -->

    <label for="Enter-species" class="custom-question enter-species" id="one_name">What animal are you looking for?</label>
    <row>
      <p> <input type="text" class="text-field w-input" maxlength="256" name="species1" placeholder="Enter name of animal" id="Enter-species" required="">
        <input type="button" class="submit-button-2 w-button" id="S1" value="Search" onClick="animalSQL()">
        <div class="hidden-load" id="hidden-load">
          <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_xs6VVO.json" background="transparent" speed="0.7" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
        </div>
      </p>
    </row>

    <!-- NOTE: showLayer IS FUNCTION2 -->
    <p><input type="button" class="submit-button-2 w-button" id="B1" value="Go Back" onClick="showLayer('page1')">
      <input type="button" class="submit-button-2 w-button add-another-animal" id="C2" value="Add another animal" onClick="animalSQL(); showLayer('page3')">
      <input type="button" class="submit-button-2 w-button finish_and_submit" id="F1" value="Finish & Submit" onClick="submitButton(), showLayer('page22')">
    </p>

  </div>
  .
  .
  .
</form>

---

一步一步走。。。。删除除id为page1的div之外的所有内容，并在单击按钮时运行ajax（也从按钮中删除

onClick=“metaSQL（）；

），然后发布从console.log（数据）获得的结果

$（文档）.ready（函数（）{
$（“#C1”）。单击（函数（）{
$.ajax({
url:“/runPythonFunc”，
键入：“POST”，
数据：{
电子邮件：$（“#用户电子邮件”）.val（），
entryTwo:$（'#算法名称'）.val（），
条目三：$（'#算法描述'）.val（）
},
成功：函数（数据、状态、jqXHR）{
控制台日志（数据）；
}
});
});
});
输入您的电子邮件

您将如何命名您的算法？

简要描述您的算法的功能？

一步一个脚印……删除除id为page1的div之外的所有内容，并在单击按钮时运行ajax（也从按钮中删除

onClick=“metaSQL（）；

）。然后发布从console.log（数据）获得的结果

$（文档）.ready（函数（）{
$（“#C1”）。单击（函数（）{
$.ajax({
url:“/runPythonFunc”，
键入：“POST”，
数据：{
电子邮件：$（“#用户电子邮件”）.val（），
entryTwo:$（'#算法名称'）.val（），
条目三：$（'#算法描述'）.val（）
},
成功：函数（数据、状态、jqXHR）{
控制台日志（数据）；
}
});
});
});
输入您的电子邮件

您将如何命名您的算法？

简要描述您的算法的功能？

试试看

async function function1() {
    form.action = "/runPythonFunc";
    await form.submit();
    function2('page2');
}

试一试

async function function1() {
    form.action = "/runPythonFunc";
    await form.submit();
    function2('page2');
}

---

在这两行之后

form.action=“/runPythonFunc”；表单提交（）页面不再处理任何客户端代码。这就像单击页面“/runPythonFunc”的链接一样好。现在，如果希望根据提交的表单上的响应调用function2（），则需要在页面加载时编写代码，并查找来自服务器的响应，然后采取措施。不过，最好的方法是使用ajax函数，在成功后检查服务器的响应，并决定是调用function2还是显示错误消息感谢您的建议@AlwaysaLearner，我应该在服务器端寻找什么样的响应（python函数）？在过去的几个小时里，我也一直在尝试使用AJAX，目前正在用我一直在做的事情更新原始帖子，但是还不能正常运行。在您的第一个方法中，尝试一下
success:function（data，status，jqXHR）{console.log（data）}
而不是成功所需的内容，发布您在devtools中看到的内容，直到收到错误：未捕获引用错误：函数1未在HTMLInputElement中定义。onClick请在这两行之后包括表单的html代码
form.action=“/runPythonFunc”；表单提交（）页面不再处理任何客户端代码。这就像单击页面“/runPythonFunc”的链接一样好。现在，如果希望根据提交的表单上的响应调用function2（），则需要在页面加载时编写代码，并查找来自服务器的响应，然后采取措施。不过，最好的方法是使用ajax函数，在成功后检查服务器的响应，并决定是调用function2还是显示错误消息感谢您的建议@AlwaysaLearner，我应该在服务器端寻找什么样的响应（python函数）？在过去的几个小时里，我也一直在尝试使用AJAX，目前正在用我一直在做的事情更新原始帖子，但是还不能正常运行。在您的第一个方法中，尝试一下
success:function（data，status，jqXHR）{console.log（data）}
而不是你所拥有的成功，发布你在devtools中看到的东西，直到得到错误：未捕获引用错误：函数1未在HTMLInputElement中定义。onclick请包括表单的html代码谢谢你的建议，尝试了一下，但得到了错误：
未捕获（承诺中）ReferenceError:表单未在HTMLInputElement.onclick的function1中定义。查看它感谢建议，尝试了一下，但得到了错误：
Uncaught（in promise）ReferenceError:form未在HTMLInputElement.onclick的function1中定义。查看它只是将所有内容剥离，不幸的是，当单击按钮时（条目已填充或为空），按钮没有响应。目前我只看到开发工具中未定义
uncaughtreferenceerror:
。目前正在努力解决这个问题。我的代码看起来和你的完全一样，除了在html下面，我已经
@app.route('/runPythonFunc', methods=['GET', 'POST'])
def runPythonFunc():
    #function does work
    return '', 204

<script>
    $(document).ready(function () {
        $("#C1").click(function () {
            $.ajax({
                url: '/runPythonFunc',
                type: 'POST',
                data: {
                    email: $('#User-Email').val(),
                    entryTwo: $('#Algorithm-Name').val(),
                    entryThree: $('#Algorithm-Desc').val()
                },
                success: function (data, status, jqXHR) { 
                    console.log(data);
                }
            });
        });
    });
</script>




<div id="page1" class="page" style="visibility:visible;">    
    <!-- USER EMAIL -->    
    <label for="Algorithm-Name-3" class="custom-question algorithm-name">Enter your email<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="User-Email" data-name="User Email" placeholder="Email address"                                                                                                               id="User-Email" required="">    
    <!-- ALGORITHM NAME -->    
    <label for="Algorithm-Name-3" class="custom-question algorithm-name">What will you name your algorithm?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Name" data-name="Algorithm Name"                                                                                                                                   placeholder="Be as creative as you like!" id="Algorithm-Name" required="">    
    <!-- ALGORITHM DESCRIPTION -->    
    <label for="Algorithm-Desc-3" class="custom-question algorithm-desc">Briefly describe what your algorithm does?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Description"                                                                                                                                           data-name="Algorithm Description" placeholder="You can still be creative!" id="Algorithm-Desc" required="">   
    <br><br>    
    <p><input type="submit" class="submit-button-2 w-button" id="C1" value="Add Animal" onClick="metaSQL();"></p>
</div>

async function function1() {
    form.action = "/runPythonFunc";
    await form.submit();
    function2('page2');
}