views:

131

answers:

4

I currently have a page setup like this:

PHP Variable Declarations
HTML header, then a form to submit GET query
The PHP that processes some stuff based on the GET data
a bit of JavaScript that makes a pretty graph from the retrieved, processed data

What I want to do is have only the form show up when the page is first loaded, and then when the query is entered, have the graph appear at the bottom of the page. It's using the flot library, and the JS currently looks like this:

<script id="source" language="javascript" type="text/javascript">   
$.plot($("#test"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
</script>

Do I need to replace the $.plot with some event handler or something? I'm a total JS neophyte!

Thanks!

+1  A: 

In your file you will want to have something like the following:

<?php if ($someConditionalForTheForm) { ?>
<form>....</form>
<?php } else { ?>
<script id="source" language="javascript" type="text/javascript">   
$.plot($("#test"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
</script>
<?php } ?>
Jordan S. Jones
+2  A: 

I'd personally use php for this (but I'm rubbish at JS...so I'm biased...=) )

<?php

$formSubmitted = $_POST['formSubmitted'];

    if (!isset($formSubmitted)) { ?>
    <form method="post" enctype="form/multipart" action="<?php echo $_SERVER['PHP_SELF']; ?>">

    <input name="formSubmitted" id="formSubmitted" type="hidden" value="1" />

    ...

    </form>
                               <?php }

    else {

      // show the graph

         }

    ?>
David Thomas
A: 

in your PHP, output the form code first and then see whether the form has been submitted already:

if (isset($_GET['your_form_parameter'])) {
    also_output_the_JS_graph;
}

This way the form will show always, and the graph only upon submitting the form.

Peter Perháč
A: 

.js (need jquery)

$(document).ready(function(){       
    $('#myformsubmit').click(function(){
        $.ajax({
            type: "GET",
            url: "/your_data_processing_file.php",
            data: "",
            success: function(result){
         $("#graph").html(result); 
                    /*
                     result is whatever you get from your script that handles 
                     your submited data
                     */
            }
        });
    });
});

.html

    <form id="myform">.....</form>
    <div id="graph"><!-- here i want my result appear after submit 
without reloading the page, i'm so 1337 --></div>

To be even more cool, you could return json data as a result and take care of that via your graph js.

zalew
if I got your problem correctly and you're satisfied with my answer, I'd recommend you change the question title to 'how to load form processed data via js' as for me, the question is not about order in php code. cheerz.
zalew