Heres the scenario. I am creating a page where admin users can create the WHERE part of a SQL query. The function in this page is that the admin users should be able to add undefined amount of AND’s and OR’s on the clause and show the built up clause on the page in real time. Also they should be able to remove the recently added OR’s or AND’s. My problem is I cant think of how to loop wisely thorugh all added and existing AND’s and OR’s. Also can’t figure out how I am going to get the values in the right place for the real time showing. Heres my current code. Any help is appreciated and if you didn’t understand what I am trying to achieve please ask for more details.
<html>
<head>
<title></title>
<link rel="StyleSheet" href="../js/jquery-ui-1.8.13.custom/css/redmond/jquery-ui-1.8.13.custom.css" type="text/css" title="jquery-ui-plugins-styles">
<script type="text/JavaScript" src="../js/jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js"></script>
<script type="text/JavaScript" src="../js/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
var op = $('#operation :selected').text();
var value = '';
var test = 'feature_id = 498 AND answer_data_int '
$('#sql').append(test);
$('#operation').change(function() {
op = $("#operation :selected").text();
sql = test + op +' '+ value;
$('#sql').html(sql);
})
$('#value').keyup(function () {
value = $(this).val();
sql = test + op +' '+ value;
$('#sql').html(sql);
});
// näiden uusien käsittely pitää automatisoida ja tehdä dynaamiseksi.
$('#addOR').click(function(e) {
e.preventDefault();
var value2 = '';
$('#content').append('OR <select id="operation-1"><option>=</option><option><</option><option>></option><option>>=</option><option><=</option></select');
$('#content').append('<input type="text" id="value2">');
sql = sql + ' OR answer_data_int ' + value2;
$('#sql').html(sql);
});
$('#addAND').click(function(e) {
e.preventDefault();
var value2 = '';
$('#content').append('AND <select id="operation-1"><option>=</option><option><</option><option>></option><option>>=</option><option><=</option></select');
$('#content').append('<input type="text" id="value2">');
sql = sql + ' AND answer_data_int ' + value2;
$('#sql').html(sql);
});
});
</script>
</head>
<body>
<form method="POST" action="TEST9.php">
<div id="content">
Some feature:
<select id="operation">
<option>=</option>
<option><</option>
<option>></option>
<option>>=</option>
<option><=</option>
</select>
<input type="text" id="value">
</div>
</form>
<div id="sql"></div>
<br>
<a href="" id="addOR">add OR</a><br>
<a href="" id="addAND">add AND</a><br>
</body>
</html>