How to update client side form using vanilla js

Question

1.00/5 (1 vote)

See more:

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

PHP

<?
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>^__i class="fas fa-capsules">                        <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 10-Jun-20 0:36am

MohammedZr

Add a Solution

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.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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