Question

Caveat: I’m VERY new at both Django and jQuery/Javascript. So far, it’s driving me up a friggin’ wall. I want to create a search page that allows users to select query parameters from a drop-down menu and then enter their query text in a text box. I also want to dynamically create more search bars/drop-down menus. I also want to be able to display notes about the availability of certain drop-down menu options (e.g. “Years may not be available for all records; records without year information will not be displayed without additional parameters.”)

The big headache I’m having right now is that my “more” button seems to be functioning as a “submit” button, for no reason I can see. That is to say, instead of displaying more search forms, clicking the “more” button transfers the stuff in the textbox to the url, like “submit” is supposed to do. I don’t know if it’s an issue with my javascript, or with the way Django handles forms, or what. Like I said, I’m totally wet behind the ears at this stuff, and I’m sure it’s something dumb I’m overlooking, although JSlint says everything is fine. Someone please help me.

Code:

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

There is a bit I could comment on the structure of both your javascript and output of the markup. This isn’t your request though, but if you want it I’ll be happy to help out.

To prevent your button from sending:

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

Here is a reference if you are curious:

A button element with no type attribute specified represents the same
thing as a button element with its type attribute set to “submit”.

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