Click here to Skip to main content
14,603,916 members
Rate this:
Please Sign up or sign in to vote.
<pre>trying to call a javascript function from a PHP web request ( if statement )
what I want to do is a form to create a new Products (draft) first the client well go to the draft information form to set the name and other information and the ( number of products ) so when he continues to insert the products in the next page the server will create a number of forms depending on the products count, so my question is how can I accomplish this what I'm supposed to do?


What I have tried:

I tried to use vanilla js but Vanilla JS can't be run on requests, it will be "embedded/inlined" in the response.

<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
$count = $_POST['productscount']

?>
<html>

<head>
    <title>Project - new Draft</title>
    <meta charset="utf-8">
    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
    <link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
    <link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
    <link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
    <link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
    <!-- including custom javascript -->
    <script src="..\js\functions\js.js"></script>
    <script>
    function myFunction(){
    var formscount = <?php echo(json_encode($productscount)); ?>;
    if (formscount > 0) {
        active="";
        for (i=0; i < formscount; i++) {
            var str='active'
            if (i > 0){
            str =  ''
            }
            $('#demo').append($('<div class="carousel-item '+str+'">                        <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body">    <img src="..\\upload\\panadol.png" style="width:205px; height:205px;">    <div class="row justify-content-center">        <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a>    </div>    <hr />    <div class="card-text" style="font-family: hana; font-size:23px; color:black;">        <div class="row" style=" flex-direction: row-reverse;">            <div class="col-sm col-lg-auto">                <div class="form-group product-name-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div>                    <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج">                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group dosage-form-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div>                    <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;">                        <option selected>نوع الدواء</option>                        <option value="1">أدوية</option>                        <option value="2">مستلزمات الام والطفل</option>                        <option value="4">معدات طبية</option>                        <option value="4">بروتينات ومكملات غذائية</option>                    </select>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group productqty-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input>                </div>            </div>        </div>        <hr />        <div class="row" style="flex-direction: row-reverse;">            <div class="col-sm col-lg-auto">                <div class="form-group stock-code-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group chemicalcom-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group concentration-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input>                </div>            </div>        </div>        <hr />        <div class="row" style="flex-direction: row-reverse;">            <div class="col-sm col-lg-auto">                <div class="form-group packsize-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group mandate-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div>                    <input type="date" id="mandate_@" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group expdate-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div>                    <input type="date" id="expdate_@" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input>                </div>            </div>        </div>        <div class="row" style="flex-direction: row-reverse;">            <div class="col-sm col-lg-auto">                <div class="form-group sale-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div>                    <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;">                        <option selected>الخصم على المنتج</option>                        <option value="1">نعم</option>                        <option value="2">لا</option>                    </select>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group discou-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input>                </div>            </div>            <div class="col-sm col-lg-auto">                <div class="form-group bounsfor-group">                    <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div>                    <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input>                </div>            </div>        </div>        <hr />        <center>            <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;">                <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a>            </nav>        </center>    </div></div></div></div>'));            event.preventDefault()
        }
    }
}
</script>
    <!-- Fontawseome Kit -->
    <script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>

<body>

    <?

if($_SERVER['REQUEST_METHOD'] == 'POST')
{

        echo '<script> myFunction(); </script>';
    
}
?>
    <!-- Bootstrap Jquery JavaScripts  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts  -->
    <!-- Bootstrap Jquery JavaScripts Ends -->
    <!-- navegtion bar bootstrap 4  -->
    <?php include("..\\home\\navbar.php"); ?>
    <!-- basket sidebar -->
    <?php include("..\\home\\basket.php"); ?>
    <!-- Main Products Form -->
    <center>
        <div class="card justify-content-center cont">
            <div class="card-body">
                <div class="card-text">
                    <nav class="navbar header justify-content-center">
                        <a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
                    </nav>
                    <hr />
                    <center>
                        <div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
                            <!-- The slideshow -->
                            <div class="carousel-inner canner">
                            </div>

                            <!-- Left and right controls -->
                            <a class="carousel-control-prev d-none d-md-block"  href="#demo" data-slide="prev">
                                <span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
                            </a>
                            <a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
                                <span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
                            </a>
                        </div>
                    </center>
                </div>
            </div>
        </div>
    </center>
</body>

</html>
Posted
Comments
ZurdoDev 10-Jun-20 15:41pm
   
I can't tell what you are asking.
MohammedZr 12-Jun-20 5:38am
   
i want to append items to a client side element ( carousel ) from a POST request using vanilla js
ZurdoDev 12-Jun-20 7:07am
   
That is what you want to do. But where are you stuck? No one will do all of that for you.
MohammedZr 12-Jun-20 9:38am
   
can you see the code in the question the body tag contains a PHP code block there is an if statement that calls myFunction() to add items into the carousel but it can't be called because vanilla will be inline/embedded, so that's where I get stuck
ZurdoDev 12-Jun-20 9:44am
   
You can use jQuery's document.ready event https://learn.jquery.com/using-jquery-core/document-ready/ which fires after the page is loaded and then call your function.
MohammedZr 12-Jun-20 12:39pm
   
@ZurdoDev i tried this :
$(document).ready(function(){
})
and I put my function inside it and there is no respond it's not working
ZurdoDev 12-Jun-20 12:58pm
   
Don't put your function in it, call your function in it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100