Dynamic Conditions/Criteria in PHP form

[coool]

I have this:

SELECT $items FROM $table WHERE $conditions

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.va....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.

element.className = 'foo';

[pbmods]

Heya coool.

Check this out:

<form id="thePfhorm" ...>
</form>
 
<div id="dolly" style="display:none">
    <input name="criteria[]" ... />
    .
    .
    .
    <input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
 
<input type="button" value="Add" onclick="addInput();" />
 
<script type="text/javascript">
// <![CDATA[
    // Add the first set of inputs.
    addInput();
// ]]>
</script>
 

function addInput()
{
    var $newElement = document.getElementById('dolly').cloneNode(true);
    $newElement.id = '';
    $newElement.style.display = '';
 
    document.getElementById('thePfhorm').appendChild($newElement);
}
 

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 !

<script type="text/javascript">
function Show(e)
{
        if(document.getElementById(e).style.display == 'none')
        {
                document.getElementById(e).style.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');">
 

#criteria1
{
display: none;
}
 

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.display != 'none')
{
document.getElementById(e+i).style.display = 'block';
else if(document.getElementById(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:

function Show(e)
{
        var i = 2;
        while(var element = document.getElementById(e+i))
        {
                element.style.display = 'block';
                ++i;
        }
}
 

[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

[BigM]

Sorry guys, could I ask a follow up question on this.

Once you've got this working, how do you harvest the entered info to post to a database?

I've been playing around with some different php ideas to do it but no luck so far.

[ronnil]

Sorry guys, could I ask a follow up question on this.

Once you've got this working, how do you harvest the entered info to post to a database?

I've been playing around with some different php ideas to do it but no luck so far.

Hi BigM

Taking the code you posted above, you see you named your textfield "criteria[]"

as you know the field's values can normally be collected with $_POST or $_GET. This is actually still the case, the only thing is that when you put in the square brackets, your result will be an array :)

if you wanted to gather all the inputfields you would use something like

<?php
foreach($_POST['criteria'] as $value)
{
    echo $value;
}
?>
 

if you try to print out $_POST['criteria'] you will most likely see "Array".

[ronnil]

@BigM again :)

you need to put your formfields inside the form tag, also if you wrap a div or table tag around them, if you don't, nothing will get send with the form :)

and make sure to set the method attribute too, cause the GET method might not always be the browser default :)

[BigM]

Thanks very much ronnil, working perfectly now. :)