Django + jQuery问题

Question

警告：我在Django和jQuery/Javascript都很新。到目前为止，它正在把我拉上一道冷门。我想创建一个搜索页面，允许用户从下拉菜单中选择查询参数，然后在文本框中输入他们的查询文本。我也想动态地创建更多的搜索栏/下拉菜单。我也希望能够显示说明有关的某些下拉菜单选项的可用性（如“岁月可能不适用于所有记录;没有年份信息记录将没有额外的参数显示”）

的我现在有很大的头痛是，我的“更多”按钮似乎作为“提交”按钮，没有任何理由，我可以看到。也就是说，不是显示更多搜索表单，而是点击“更多”按钮将文本框中的内容传输到网址，就像“提交”应该做的那样。我不知道这是我的JavaScript的问题，或者与Django处理表单的方式，或者是什么。就像我说的那样，我在这个东西背后已经完全湿透了，而且我确定这是我忽略的东西，尽管JSlint说一切都很好。有人请帮助我。

代码：

var i, i_str, sel_str, add_form, shownote, changeval, changebool, form_array,more_array, note_array, selected_str; 
$(document).ready(function() { 
i = 1; 
i_str = i.toString(); 
sel_str = (i - 1).toString(); 
add_form = function() { 
    form_array = [ 
     '<p><form id="form' + i_str + '" action="" method="get">', 
     '<select id="row" name="row">', 
     '<option value="dish_name">Name</option>', 
     '<option value="year">Year</option>', 
     '<option value="period">Five-Year Period</option>', 
     '<option value="location">Location</option>', 
     '<option value="ingredient">Main Ingredient</option>', 
     '<option value="course">Course or Dish Type</option>', 
     '</select>', 
     '<label for="query">Dish Name</label>', 
     '<input type="text" name="dish_name" id="query"></input>', 
     '<button id="more">More</button>', 
     '<input type="submit" value="Search"></input>' 
    ]; 
    more_array = [ 
     '<select id="bool" name="bool">', 
     '<option value="none" selected="selected"> </option>', 
     '<option value="and">AND</option>', 
     '<option value="or">OR</option>', 
     '<option value="and_not">AND NOT</option>', 
     '<option value="or_not">OR NOT</option>', 
     '</select>' 
    ]; 
    note_array = [ 
     '<p class="note"></p>', 
     '</form></p>']; 
    $("#search").append(form_array.join("\n")); 
    $("option:eq(" + sel_str + ")").attr("selected", "selected"); 
    $("label").text = $(($("this select").val).text); 
    $("select#row").change(shownote()); 
    $("button").click(function() { 
     $('input[type="submit"]').hide(); 
     $(".search").append(more_array.join("\n")); 
    }); 
    i++; 
}; 
$(document).ready(add_form()); 
}); 
$(document).ready(function() { 
shownote = function() { 
    switch ($(this).val) { 
    case "year": 
     $(".note").append("Note: Year information may not be available for all dishes. Dishes without years will not be returned without additional search criteria.<br />"); 
     break; 
    case "period": 
     $(".note").append("Note: Please enter periods in YYYY-YYYY format. Period information may not be available for all dishes. Dishes without periods will not be returned without additional search criteria.<br />"); 
     break; 
    case "location": 
     $(".note").append("Note: Location information may not be available for all dishes. Dishes without location information will not be returned without additional search criteria.<br />"); 
     break; 
    } 
}; 
}); 
$(document).ready(function() { 
changeval = function() { 
    var changed_to = $("#row").val, get_new_label = function (changed_to) {switch (changed_to) { 
    case "dish_name": 
     return "Dish Name"; 
    case "year": 
     return "Year"; 
    case "period": 
     return "Five-Year Period"; 
    case "location": 
     return "Location"; 
    case "ingredient": 
     return "Main Ingredient"; 
    case "course": 
     return "Course or Dish Type"; 
    } 
     }; 
    $('this label[for="query"]').innerHTML = get_new_label(changed_to); 
    $('this input[id="query"]').attr("name", changed_to); 
}; 
}); 
$(document).ready(function() { 
changebool = function() { 
//something that changes the boolean values of the search string 
}; 
}); 
$("#form" + i_str + " #row").change(changeval()); 
$("#form" + i_str + " #row").change(shownote()); 

Answer 1

有一点我可以在你的JavaScript和标记的同时输出的结构评论。这不是你的要求，但如果你想要它，我会很乐意帮忙。

为了防止发送您的按钮：

<button type='button'>My button<button> 

这里是一个参考，如果你是好奇：

没有指定类型属性的按钮元素表示相同 事，作为一个按钮元素其类型属性设置为“submit”。

http://dev.w3.org/html5/markup/button.html