Dynamic Conditions/Criteria in PHP form

[coool]

I have this:[code=mysql]
SELECT $items FROM $table WHERE $conditions[/code]

in my form I'm asking the user to select items from a list - multible selections
and I'm asking the user to select from which table he/she would like to extract the data

now my problem with the conditions selection ! (CRITERIA)

here's an image of what I'm looking for:

http://img76.imageshack.us/my.php?image=criteriafz2.jpg

[coool]

I'm wondering how can i by a click have a new criteria line

then all criteria lines should be saved to thier variables ! so i can use them later inside a sql query statement after the word "WHERE"

do i have to use java script ! .. or do i have to use php functions ! or multiple forms submitions !! ..

[pbmods]

Heya, coool.

To actually create the inputs, you'll need to use JavaScript.

But if you name them criteria[], field[], etc., then PHP will automatically create arrays so that you don't have to keep track of individual variable names.

For more information, check out this page:

http://php.net/manual/en/language.variables.external.php#id2536797

[coool]

well, I've tried the technique of hidden elements

because I only want 10 criteria rows

so I displayed one.. and make 9 rows hidden using CSS

now when user click on "ADD CRITERIA ROW"

there should be a javascript function that change the element to display

my problem now with this javascript function :(

i'm using <tr> not <div> ----- becuase with <div> i couldn't hide using css - i don't know why !

so do you have any javascript function that change <tr> to show !

[kovik]

CSS works on <tr> and <div>. Changing the class of a <tr> or <div> with JavaScript is done the same way.

[code=js]element.classNa me = 'foo';[/code]

[pbmods]

Heya coool.

Check this out:
[code=html]
<form id="thePfhorm" ...>
</form>

<div id="dolly" style="display: none">
<input name="criteria[]" ... />
.
.
.
<input type="button" value="Remove" onclick="this.p arentNode.paren tNode.removeChi ld(this.parentN ode);" />
</div>

<input type="button" value="Add" onclick="addInp ut();" />

<script type="text/javascript">
// <![CDATA[
// Add the first set of inputs.
addInput();
// ]]>
</script>
[/code]

[code=javascript]
function addInput()
{
var $newElement = document.getEle mentById('dolly ').cloneNode(tr ue);
$newElement.id = '';
$newElement.sty le.display = '';

document.getEle mentById('thePf horm').appendCh ild($newElement );
}
[/code]

Instead of creating all the inputs up front (which clutters up your form values when submitting and limits the total number of inputs), you instead can clone a template and dynamically create exactly as many or as few as you need.

[coool]

what do you think of this code? - it's not working what's wrong with it !

[code=html]
<script type="text/javascript">
function Show(e)
{
if(document.get ElementById(e). style.display == 'none')
{
document.getEle mentById(e).sty le.display = 'block';
}
}
</script>

<tr id='criteria1'>
<?echo CriteriaRow();? >
//this function have some form elements/html similar to the picture in one of my posts
</tr>

<input type="button" value="Display Criteria" onClick="Show(' criteria1');">
[/code]

[code=css]
#criteria1
{
display: none;
}
[/code]

when i click on the button.. nothing appear !

[pbmods]

Heya, coool.

Try removing the conditional from your Show() function.

P.S. instead of using '<?', consider using '<?php', as that will make your code more portable. "Short tags", as they are called, have been deprecated; not all servers recognize them, and they will be removed from PHP in a future release.

[coool]

You are really SMART

It's WORKING

I feel I wonna CRY ...... THAAAAAAAAANKS VeRy MuCh :)

[pbmods]

Heya, coool.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

[coool]

oh I've a little question..

why the if statement didn't work ! .. I really need to use it

because I'm going to hide 9 <tr>s

and with every click I need to show one of them

------

I tried this code.. and i know it's wrong ! ..

[html]

<tr id='row2'>
<?php echo newRow(); ?>
</tr>
<tr id='row3'>
<?php echo newRow(); ?>
</tr>
<tr id='row4'>
<?php echo newRow(); ?>
</tr>

<input type="button" value="Add Row" onClick="Show(' row');">
[/html]

[php]
<script>
function Show(e)
{
var i;
i = 2;

while(document. getElementById( e+i).style.disp lay != 'none')
{
document.getEle mentById(e+i).s tyle.display = 'block';
else if(document.get ElementById(e+i ).style.display == 'block')
i++;
}
}
</script>
[/php]

[pbmods]

Heya, coool.

The display property of a visible element is not always 'block', but it will always be 'none' for an invisible element.

But in reality, if you know that the element is supposed to end up with a display of 'block', it does no harm to set it anyway, even if that element is already visible.

Consider:
[code=javascript]
function Show(e)
{
var i = 2;
while(var element = document.getEle mentById(e+i))
{
element.style.d isplay = 'block';
++i;
}
}
[/code]

[coool]

Thanks for your help :)

things are working just as i want :D

[pbmods]

Heya, coool.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

[BigM]

pbmods,

Thanks for that excellent script, just wanted to add though, there were two bits with extra spaces in it that stopped it working, drove me nuts before checking with the javascript console!!

Here's a working version below for anyone else who comes across this:

<html>
	<head>
		<script type="text/javascript">
			function addInput(){
		        var $newElement = document.getElementById('dolly').cloneNode(true);
				$newElement.id = '';
				$newElement.style.display = '';
				document.getElementById('thePfhorm').appendChild($newElement);
			}
		</script>
	</head>
	<body>	
		<form id="thePfhorm"> 
		</form>
		
		<div id="dolly" style="display:none">
			<input type="text" name="criteria[]">
            <input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
        </div>		
		<br>
		<input type="button" value="Add" onclick="addInput();">
		
		<script type="text/javascript">
			// <![CDATA[
			// Add the first set of inputs.
			addInput();
			// ]]>
		</script>
	</body>
</html>

JM