jquery - 动态添加表单元素后表单提交

Question

我对编程比较陌生，也是这个网站的新手，请容忍我在描述这个问题时犯的任何简单错误。

我正在使用 python 通过 Google App Engine 实现网络应用程序，并使用 jinja2 呈现我的 HTML 模板。

我在 base.html 模板中包含了一些 jquery，以允许用户动态地将输入框添加到表单中。每当添加一组输入框时，它们都会在页面上闪烁，并且看起来好像相关表单已提交到服务器(带有输入框名称的查询字符串[包括刚刚添加的输入框]出现在网址中) 。然后，浏览器中会呈现一个空白页面。

我不知道如何解决这个问题。我猜测这与我的 GET 和 POST 函数格式不正确有关，但我不确定如何继续。我已经包含了相关的 jquery、html、GAE 处理程序和相关的函数定义。任何有关潜在解决方案或故障排除建议的见解将不胜感激。

这是 jquery:

$(document).ready(function() {
  $('#btnAdd').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    var newElemName = $('#inputName' + num).clone().prop('id', 'inputName' + newNum);
    var newElemValue = $('#inputValue' + num).clone().prop('id', 'inputValue' + newNum);

    newElemName.children(':first').prop('id', 'name' + newNum).prop('name', 'name' + newNum);
    newElemValue.children(':first').prop('id', 'value' + newNum).prop('name', 'value' + newNum);

    $('#inputValue' + num).after(newElemName);
    $(newElemName).after(newElemValue);
    $('#btnDel').removeAttr('disabled');

    if (newNum == 13) {
        $('#btnAdd').prop('disabled', true);
    };
  });

  $('#btnDel').click(function() {
    var num = $('.clonedInput').length;

    $('#inputName' + num).remove();
    $('#inputValue' + num).remove();
    $('#btnAdd').removeAttr('disabled');

    if (num-1 == 1) {
      $('#btnDel').prop('disabled', true);
    };
  });

    $('#btnDel').attr('disabled', true);
});

这是表单的标记:

<form class="well form-inline" method="post">
  <legend>custom post</legend>
  <button class="btn" id='btnAdd'>add another row</button> 
  <button class="btn" id='btnDel'>remove row</button>            
    <fieldset>
      <div id='inputName1' class='clonedInput'>
        <input type="text" class="input-xlarge" id="name1" placeholder="name" name="name1" value="{{name1}}">
      </div>
      <div id='inputValue1' class='clonedInput1'>
        <input type="text" class="input-xlarge" id="value1" placeholder="value" name="value1" value="{{value1}}">
      </div>
      <p class="help-block">enter your custom name and value, please.</p>
    </fieldset>
  <input type="submit">
</form>

这是我的 GAE 处理程序和相关函数定义(不完整，我还没有实现大部分 post 函数):

class Create(Handler):
    def get(self):
        if not self.getCookieVal('user_id'):
            self.redirect('/register/')
        self.render('create.html', userCookie=User.by_id(int(self.getCookieVal('user_id'))).username)

    def post(self):
        if not self.getCookieVal('user_id'):
            self.redirect('/register/')

def write(self, *a, **kw):
    self.response.out.write(*a, **kw)

def render_str(self, template, **params):
    return render_str(template, **params)

def render(self, template, **kw):
    self.write(self.render_str(template, **kw))

def getCookieVal(self, name):
    cookieVal = self.request.cookies.get(name)
    if cookieVal:
        return verification.checkSecureVal(cookieVal)  #returns string if value is secure

Answer 1

问题是，只要您单击按钮就会提交表单，请尝试使用按钮类型的输入。

<input type="button" value="add another row"/>