how to call to javascript function using php?

Question

This question is more complex than we think.

I need to call a function in javascript from php if some condition is met.

The php code and the javascript function are in the same file.

I don't need to generate code of java script function because it is not effective to be done in a function with parameters and I also need to make changes to the contents of the function.

How do I call CreateSVG(); line 58 in the php code? many thanks.

My full file looks like below:

<?php
require_once("includes/initialize.php");
?>
<!DOCTYPE html>
<html>
<head>
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


</head>
<body>


    <div id="frame_shape">&nbsp;
        <div id="main">
            <h2>OOP Class Demo using PHP</h2>
            <h2>Drawing shape usinig user parameteres.</h2>
            <p>
            Please enter two numbers to calculate the area of rectangle or tringle and press submit...
            <p>
                <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <br>width<input type=text name='width'>
                    <br>height<input type=text name='height'>
                    <h2>select shape</h2>
                    <input type="radio" name="shape" value="Rectangle" /> Rectangle
                    <br><input type="radio" name="shape" value="Tringle" /> Tringle
                    <br><input type="submit" name="submit" value="Submit Form"><br>
                </form>
        <br/><br/>
        </div>
        <div id="retangle">
            <div id="svgContainer"></div>
        </div>
        <div id="Tringle"></div>
            <div id="contener">
                <?php
                 echo("<br>");
                        if (isset($_POST['submit'])) {
                                if (!empty($_POST['shape'])) {
                                  if ($_POST['shape'] === 'Rectangle') { 
                                      // create object of rectangle and calculate it is area
                  $rect = new Rectangle ($_POST['width'], $_POST['height']);
                  echo 'rectangle of this size would have the area of ', $rect->GetArea(), "<br />";
                  //echo '<script type="text/javascript">', 'CreateSVG();', '</script>';
                  echo '<script>CreateSVG();</script>';

                                  }
                                    else if ($_POST['shape'] === 'Tringle'){
                                              // create object of tringle and calculate it is area by extends
                  $tri = new Triangle ($_POST['width'], $_POST['height']);
                  echo 'triangle of this sizes would have the area of ', $tri->GetArea();
                                         }
                                }
                       }
                ?>
            </div>
    </div>

<script>

$(document).ready(function() {

    function CreateSVG(){
            var xmlns = "http://www.w3.org/2000/svg";
            var boxWidth = <?php echo $_POST['width'];?>;
            var boxHeight = <?php echo $_POST['height'];?>;
            alert(boxWidth + ' ' + boxHeight);
            var svgElem = document.createElementNS (xmlns, "svg");
            svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
            svgElem.setAttributeNS (null, "width", boxWidth);
            svgElem.setAttributeNS (null, "height", boxHeight);
            svgElem.style.display = "block";

            var g = document.createElementNS (xmlns, "g");
            svgElem.appendChild (g);
            g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');

                // draw linear gradient
            var defs = document.createElementNS (xmlns, "defs");
            var grad = document.createElementNS (xmlns, "linearGradient");
            grad.setAttributeNS (null, "id", "gradient");
            grad.setAttributeNS (null, "x1", "0%");
            grad.setAttributeNS (null, "x2", "0%");
            grad.setAttributeNS (null, "y1", "100%");
            grad.setAttributeNS (null, "y2", "0%");
            var stopTop = document.createElementNS (xmlns, "stop");
            stopTop.setAttributeNS (null, "offset", "0%");
            stopTop.setAttributeNS (null, "stop-color", "#ff0000");
            grad.appendChild (stopTop);
            var stopBottom = document.createElementNS (xmlns, "stop");
            stopBottom.setAttributeNS (null, "offset", "100%");
            stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
            grad.appendChild (stopBottom);
            defs.appendChild (grad);
            g.appendChild (defs);

                // draw borders
            var coords = "M 0, 0";
            coords += " l 0, 300";
            coords += " l 300, 0";
            coords += " l 0, -300";
            coords += " l -300, 0";

            var path = document.createElementNS (xmlns, "path");
            path.setAttributeNS (null, 'stroke', "#000000");
            path.setAttributeNS (null, 'stroke-width', 10);
            path.setAttributeNS (null, 'stroke-linejoin', "round");
            path.setAttributeNS (null, 'd', coords);
            path.setAttributeNS (null, 'fill', "url(#gradient)");
            path.setAttributeNS (null, 'opacity', 1.0);
            g.appendChild (path);

            var svgContainer = document.getElementById ("svgContainer");
            svgContainer.appendChild (svgElem); 
    }




});
</script>
</body>
</html>

Remove your function from Document.ready(){ } and put it outside of it may be it can help — Sumit Neema
– Sumit Neema, Commented Aug 30, 2012 at 7:40
I just want to call to function CreateSVG(); which know how to draw the shape according the user parameter the function know to do that but .I need to call it not to echo it. — yossi
– yossi, Commented Aug 30, 2012 at 7:43

Scott · Accepted Answer · 2012-08-30 07:44:51Z

Move the CreateSVG() Javascript function into the HEAD region, and remove the document.Ready syntax so the header reads ...

<?php
require_once("includes/initialize.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>OOP Class Demo using PHP by yossi levi.</title>
    <script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function CreateSVG() {
             /* Add the existing function here */
        }
    </script>
    <style>
        body {  font-size:20px; background:#00CCFF; }
        button { margin:2px; }
        /* Styles removed for simplicity */
     </style>
</head>

In your method you are trying to call a function that isn't yet defined.

deep · Accepted Answer · 2012-08-30 07:42:17Z

1

Following example will help you:

 <?php
     ----
     ----

    if (< SOME CONDITION >) {
    echo "<script language=javascript>CreateSVG()</script>";
    }

    ---- 
    ---- 
   ?>

answered Aug 30, 2012 at 7:42

deep

8717 silver badges6 bronze badges

Comments

divide by zero · Accepted Answer · 2012-08-30 07:44:17Z

put <?php if (condition) :?> block between this function

<?php if (condition): ?>
    <script>

    $(document).ready(function() {

        function CreateSVG(){
                var xmlns = "http://www.w3.org/2000/svg";
                var boxWidth = <?php echo $_POST['width'];?>;
                var boxHeight = <?php echo $_POST['height'];?>;
                alert(boxWidth + ' ' + boxHeight);
                var svgElem = document.createElementNS (xmlns, "svg");
                svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
                svgElem.setAttributeNS (null, "width", boxWidth);
                svgElem.setAttributeNS (null, "height", boxHeight);
                svgElem.style.display = "block";

                var g = document.createElementNS (xmlns, "g");
                svgElem.appendChild (g);
                g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');

                    // draw linear gradient
                var defs = document.createElementNS (xmlns, "defs");
                var grad = document.createElementNS (xmlns, "linearGradient");
                grad.setAttributeNS (null, "id", "gradient");
                grad.setAttributeNS (null, "x1", "0%");
                grad.setAttributeNS (null, "x2", "0%");
                grad.setAttributeNS (null, "y1", "100%");
                grad.setAttributeNS (null, "y2", "0%");
                var stopTop = document.createElementNS (xmlns, "stop");
                stopTop.setAttributeNS (null, "offset", "0%");
                stopTop.setAttributeNS (null, "stop-color", "#ff0000");
                grad.appendChild (stopTop);
                var stopBottom = document.createElementNS (xmlns, "stop");
                stopBottom.setAttributeNS (null, "offset", "100%");
                stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
                grad.appendChild (stopBottom);
                defs.appendChild (grad);
                g.appendChild (defs);

                    // draw borders
                var coords = "M 0, 0";
                coords += " l 0, 300";
                coords += " l 300, 0";
                coords += " l 0, -300";
                coords += " l -300, 0";

                var path = document.createElementNS (xmlns, "path");
                path.setAttributeNS (null, 'stroke', "#000000");
                path.setAttributeNS (null, 'stroke-width', 10);
                path.setAttributeNS (null, 'stroke-linejoin', "round");
                path.setAttributeNS (null, 'd', coords);
                path.setAttributeNS (null, 'fill', "url(#gradient)");
                path.setAttributeNS (null, 'opacity', 1.0);
                g.appendChild (path);

                var svgContainer = document.getElementById ("svgContainer");
                svgContainer.appendChild (svgElem); 
        }




    });
    </script>
<?php endif; ?>

Vinayak Phal · Accepted Answer · 2012-08-30 07:45:07Z

Insert this code at the end of the script tag...

<?php          
    if (isset($_POST['submit'])) {
        if (!empty($_POST['shape'])) {
            if ($_POST['shape'] === 'Rectangle') { 
                  echo "CreateSVG();";
            }
        }
    }
?>

Like this... Showing a part of the code...

$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height() );
$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height() +', left: '+ $("#Tringle").position().left +' top: '+ $("#Tringle").position().top);

<?php          
    if (isset($_POST['submit'])) {
        if (!empty($_POST['shape'])) {
            if ($_POST['shape'] === 'Rectangle') { 
                  echo "CreateSVG();";
            }
        }
    }
?>

});
</script>

Collectives™ on Stack Overflow

how to call to javascript function using php?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related