Question

我对编程比较陌生并且对这个网站不熟悉，请记住我在描述这个问题时遇到的任何简单错误。

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

我在base.html模板中包含了一些jquery，允许用户动态地将输入框添加到表单中。每当添加一组输入框时，它们就会在页面上闪烁，似乎有问题的表单提交给服务器（带有输入框名称的查询字符串[包括刚刚添加的那些]出现在URL中）。然后，在浏览器中呈现空白页面。

我不确定如何解决此问题。我猜它与我的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"/>

Answer 2

您是否熟悉chrome开发人员工具来调试html，scrips和network io。 https://developers.google.com/chrome-developer-tools/

动态添加表单元素后的表单提交

2 个答案: