0

我想创建一个使 appair 成为下拉列表的按钮。这个下拉列表的内容通过我的数据库中的一个数组传递给我的 EJS。

这是我到目前为止所得到的：

EJS：

  <form class="" action="/post" method="post">


// some inputs here

<div class="container">
  <p>Select a related list of keywords :</p>
  <div class="container1">
    <button class="add_form_field1">keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
</div>
</div class="container">
  <button type="submit">Submit</button>
</form>

// some more code not relevant here, and my script for the magic to (not) append :

<script>
$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field1");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div>  <select name="role">          <% if(typeof keywords == 'object' && 
keywords.length > 0){ %><% for(var j = 0; j < keywords.length; j++) {%><option 
value='keywords[j]'>keywords[j]</option>  <% } %> <% } %> </>select>  <a href="#" 
class="delete">Delete</a></div>'); //add selectbox
    } else {
      alert('You Reached the limits')
    }
  });
  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
  });
  </script>

这是我的应用相关代码：

app.get('/post', isLoggedIn, (req, res) =>{

db.collection('keywords').find().toArray()
.then(results => {
res.render('test.ejs', {keywords:results})
})
.catch(error => console.error(error))
})

主要问题是container1中的按钮直接“发布”表单而不做任何与脚本相关的事情。

有人可以帮忙吗？:)

编辑：将 div 类“container1”的内容更改为：

div class="container1">
    <select name="keyword[]"><% for(var j = 0; j < keywords.length; j++) {%><option value='<%=keywords[j]._id%>'><%=keywords[j].keyword%></option>  <% } %> </select>
    <button type="button" role="button" class="add_form_field1">Add keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>

第一个下拉列表的显示部分就像一个魅力，提交按钮（右侧）也是如此，但仍然面临应该使更多下拉列表出现的按钮的问题..

解决方案：

感谢@Kinglish 脚本：

 <script>
    $(document).ready(function() {
      var max_fields = 10;
      var wrapper = $(".container1");
      var add_button = $(".add_form_field1");

      var x = 1;
      (add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
          x++;
          wrapper.append('<div>  <select name="keyword[]"> <% for(var j = 0; j < keywords.length; j++) {%><option value=<%=keywords[j]._id%>><%=keywords[j].keyword%></option>  <% } %> </select>  <a href="#" class="delete">Delete</a></div>');
        } else {
          alert('You Reached the limits')
        }
      });
      wrapper.on("click", ".delete", function(e) {
        $(this).parent('div').remove();
        x--;
      })
    });
  </script>

EJS：

<div class="container">
  <p>Select a related list of keywords :</p>
  <div class="container1">
    <button type="button" role="button" class="add_form_field1">Add keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
</div>
4

2 回答 2

0

在表单中，所有按钮都被视为提交按钮。

不知何故，您必须告诉表单这不是我的提交按钮。

如果类型不起作用，您必须在按钮标签中添加 type="button" 添加角色="button"

希望它会工作！

于 2021-05-24T13:57:50.083 回答
0

有很多小错别字导致 JS 错误，阻止代码执行并导致表单提交。请查看以下内容并从中更新您的代码。我删除了 asp 循环，所以这可以测试，但你可以很容易地把它放回去

// some more code not relevant here, and my script for the magic to (not) append :

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field1");

  var x = 1;
  add_button.click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      wrapper.append('<div><select name="role"><option>test</option></select><a href="#" class="delete">Delete</a></div>'); //add selectbox
    } else {
      alert('You Reached the limits')
    }
  });
  wrapper.on("click", ".delete", function(e) {
    $(this).parent('div').remove();
    x--;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="/post" method="post">

  <div class="container">
    <p>Select a related list of keywords :</p>
    <div class="container1">
      <button class="add_form_field1">keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

于 2021-05-24T15:13:00.223 回答