I want to build a web page where user can select data from different html controls and form a conditional query. For instance
a == 2
and
b == 4
and
c == 6
or
x == 0
The data for a, b, c and x comes from html controls and user is also able to delete different conditions in the query.
Later I want to transform this query into json/xml and send it to the server.
Appreciate your suggestions for ui framework or live examples?
PS: I am using django framework and planning to use jquery.
You can write some easy jQuery to build a form and then you can use something like serializeArray to send it to the server:
http://docs.jquery.com/Ajax/serializeArray
Something like the following should work pretty well for you to build off:
<form class="search-form" action="search.php" method="get">
<div class="search-conditions"></div>
<div>
<input class="add-button" type="button" value="Add condition" />
<input class="submit-button" type="submit" value="Search" />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('.add-button').click(function() {
var selectField = $('<select name="field-boolean[]"><option value="and">AND</option><option value="or">OR</option></select>');
$('<div class="condition"></div>')
.append(selectField)
.append('<input name="field-name[]" type="text" />')
.append(' = ')
.append('<input name="field-value[]" type="text" />')
.appendTo('.search-conditions');
});
$('form').submit(function() {
console.log($('.search-form').serializeArray('.search-form'));
return false;
});
});
//]]>
</script>
