javascript - POST 返回值到 MongoDB onsubmit

Question

我有一个节点快速设置，可以将输入到各种复选框和文本区域的值保存到 MongoDB 数据库中。最初，您还可以使用复选框在单击按钮时计算分数，以及单击另一个按钮来发布信息，如下所示:

new.ejs代码

  <form action="/pipelines" method="POST">
    <%- include('_form_fields') %>
  </form>

_form_fields.ejs 代码

<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<div>
      <p>Information</p>
      <label for="url">GitHub URL:</label>
      <input required value="<%= pipeline.url %>" type="text" name="url" id="url"><br>

      <input type="checkbox" id="exampleCheck" name="exampleCheck" value="<%= pipeline.exampleCheck? 'checked' : '' %>"  onclick="checkboxTicked('exampleCheck', 3.5)">
      <label for="exampleCheck">Example Check</label><br>

      <button type="button" id="myCheck" onclick="splitURL(document.getElementById('url').value)">Calculate Score</button>
      <button type="submit" class="btn btn-primary">Save</button>
</div>
</section>
</div>

从那以后，我尝试结合 myCheck按钮和 submit按钮变成一个按钮。

new.ejs代码

  <form action="/pipelines" method="POST" onsubmit="splitURL(document.getElementById('url').value)">
    <%- include('_form_fields') %>
  </form>

form_fields.ejs 代码

<div id="main_content_wrap" class="outer">
  <section id="main_content" class="inner">
<div>
      <p>Information</p>
      <label for="url">GitHub URL:</label>
      <input required value="<%= pipeline.url %>" type="text" name="url" id="url"><br>

      <input type="checkbox" id="exampleCheck" name="exampleCheck" value="<%= pipeline.exampleCheck? 'checked' : '' %>"  onclick="checkboxTicked('exampleCheck', 3.5)">
      <label for="exampleCheck">Example Check</label><br>

      <button type="submit" class="btn btn-primary">Save</button>
</div>
</section>
</div>

我想发布返回的 onsubmit对 mongodb 的值(value)。类似于 value="<%= pipeline.score %> 的内容如复选框和输入中所示。实现这一目标的最佳方法是什么？

Answer 1

当您提交表单时，它会提交。因此页面刷新。 所以你需要停止这种行为

function sendData() {
   event.preventDefault();
   const form = $(this)[0];
   let url = form.url.value

   //your code here. You can play with url

   $(form).submit();
}

$('.my-form').on('submit', sendData);

还有你的表单

  <form action="/pipelines" method="POST" class="my-form">
    <%- include('_form_fields') %>
  </form>