How i pass html input data to javascript

Question

i want to parse input data to razorpay script. i am new in php because basically i am mobile app developer. this is my first try in php. i tried post methode also. i donot know where i do mistake in this code. i want to pass email to razorpay script field

 <div class="form-filde">

                    <form action="contact_us.php" method="post" >

                        <div class="row">

                            <div class="col-sm-6">

                                <div class="input-box">

                                    <input type="text" placeholder="Name" data-validation="required" name="name" >

                                </div>

                                <div class="input-box">

                                    <input type="text" placeholder="Email" data-validation="required" name="email" >

                                </div>

                                <div class="input-box">

                                    <input type="text" placeholder="Subject" data-validation="required" name="subject" >

                                </div>

                            </div>

                            <div class="col-sm-6">

                                <div class="input-box">

                                    <textarea placeholder="Message"  name="message"></textarea>

                                </div>

                            </div>

                            <div class="col-sm-12">

                                <div class="submit-box">

                                    <input type="submit" value="SEND" class="btn">
                                                </div>   

                                </div>    
                            </div>  
 <script
        src="https://checkout.razorpay.com/v1/checkout.js"
        data-key="my key"
        data-amount="100000"
        data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
        data-name="ssss.com"
        data-description="Android Training Courses"
        data-image="https://some.com/itrain/images/logo.png"
        data-theme.color="#3276B1"
         data-prefill.email=document.getElementById('email').value
    ></script>


                    </form>

                </div>

Someone help me on how to work on this.

Answer 1

Change :

<input type="text" placeholder="Email" data-validation="required" name="email" >

With

<input type="text" placeholder="Email" data-validation="required" name="email" id="email" >

Update -
Try with below one -

<div class="form-filde">

    <form action="contact_us.php" method="post" id="frm_container">

        <div class="row">

            <div class="col-sm-6">

                <div class="input-box">

                    <input type="text" placeholder="Name" data-validation="required" name="name" >

                </div>

                <div class="input-box">

                    <input type="text" placeholder="Email" data-validation="required" name="email" id="email">

                </div>

                <div class="input-box">

                    <input type="text" placeholder="Subject" data-validation="required" name="subject" >

                </div>

            </div>

            <div class="col-sm-6">

                <div class="input-box">

                    <textarea placeholder="Message"  name="message"></textarea>

                </div>

            </div>

            <div class="col-sm-12">

                <div class="submit-box">

                     <input type="submit" value="SEND" class="btn"> 
                                </div>   

                </div>    
            </div>  

<script>
    var email_val = document.getElementById('email').value;
    document.querySelector("#email").addEventListener("change",setEmail);
    function setEmail(e){   
        try{

            var elem = document.getElementById("razorpay_script");            
            var elem2 = document.querySelector(".razorpay-payment-button");
            document.querySelector("#frm_container").removeChild(elem);  
            document.querySelector("#frm_container").removeChild(elem2);  
        }catch(err){
            console.log(err);
        }

        email_val = e.target.value;
        addScript(email_val);
        //
    }

    function addScript(email_val) {
        var s = document.createElement( 'script' );
        s.setAttribute( 'src', "https://checkout.razorpay.com/v1/checkout.js" );
        s.setAttribute( 'id', "razorpay_script" );
        s.setAttribute( 'data-key', "my key" );
        s.setAttribute( 'data-amount', "100000" );
        s.setAttribute( 'data-buttontext', "Enrol Now to Get 10% Spot Registration Discount" );
        s.setAttribute( 'data-name', "ssss.com" );
        s.setAttribute( 'data-description', "Android Training Courses" );
        s.setAttribute( 'data-image', "https://some.com/itrain/images/logo.png" );
        s.setAttribute( 'data-theme.color', "#3276B1" );
        s.setAttribute( 'data-prefill.email', email_val );
        document.querySelector("#frm_container").appendChild( s );
    }

</script>
<!--  <script
        src="https://checkout.razorpay.com/v1/checkout.js"
        data-key="my key"
        data-amount="100000"
        data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
        data-name="ssss.com"
        data-description="Android Training Courses"
        data-image="https://some.com/itrain/images/logo.png"
        data-theme.color="#3276B1"
        data-prefill.email= email_val
    ></script> -->


                    </form>

                </div>

hope it helps :)