MohammedZr Ответов: 0

Как обновить форму на стороне клиента с помощью vanilla js

<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?


Что я уже пробовал:

Я пытался использовать vanilla js, но Vanilla JS не может быть запущена по запросам, она будет "встроена/встроена" в ответ. 

<?
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>

ZurdoDev

Я не могу понять, о чем ты просишь.

MohammedZr

я хочу добавить элементы к элементу на стороне клиента ( карусель ) из запроса POST с помощью vanilla js

ZurdoDev

Это то, что вы хотите сделать. Но где же вы застряли? Никто не сделает все это за тебя.

MohammedZr

можете ли вы увидеть код в вопросе тег body содержит блок кода PHP есть оператор if, который вызывает myFunction() для добавления элементов в карусель, но он не может быть вызван, потому что vanilla будет встроена/встроена, так что вот где я застрял

ZurdoDev

Вы можете использовать событие document.ready от jQuery https://learn.jquery.com/using-jquery-core/document-ready/ который срабатывает после загрузки страницы, а затем вызывает вашу функцию.

MohammedZr

@ZurdoDev я попробовал это сделать :
$(документ).готово(функция(){
})
и я помещаю свою функцию внутрь него и нет никакого ответа он не работает

ZurdoDev

Не помещайте в него свою функцию, вызывайте в нем свою функцию.

0 Ответов