HOME

<? include 'header.php';?>
<style type="text/css">

 @media (max-width: 479px) and (min-width: 320px){ 

    #joinus{
       
        padding: 10% !important;

    }

  }

</style>

 <header class="amaezi-fullscreen-header section-bg" data-image-src="img/content/footer_bg-1.jpg">



        <!-- HEADER OVERLAY -->

        <div class="amaezi-header-overlay"></div>



        <!-- Header Video -->

        <!-- <div class='youtube-video'></div>

        <a class="youtube-player" data-property="{videoURL:'Tl8E1DzJ0bo',containment:'.youtube-video',autoPlay:true, mute:true, startAt:0, opacity:1,ratio:'16/9',showControls:false,showYTLogo:false}"></a> -->



        <!-- HEADER CONTENT -->

        <div class="amaezi_header_content">

            <h1 class="amaezi_header_title">Join As Volunteer</h1>

           

        </div>

    </header>



<section class="section-bg" data-image-src="img/content/footer_bg-1.jpg">

    <!-- MAIN CONTAINER -->

    <div id="container" class="main-content">

        <!-- Page content -->

        <div class="container high-padding">

            <div class="row">

                <div class="col-md-12 main-container">

                    <!-- Post content -->

                    <div class="post-content animateIn" data-animate="fadeIn">



                        <!-- TITLE + SUBTITLE section -->

                     <form  class="row make-reservation submit-contact animateIn" id="category">

                            <div class="col-md-1">

                            </div>

                            <div class="col-md-10" id="joinus" style="padding:70px;">

                                <div class="row">

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

                                        <input id="name" type="text" placeholder="Name" name="name" />

                                    </div>

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

                                        <input id="fname" type="text" placeholder="Father Name/ Guardian Name" name="fname" />

                                    </div>

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

                                        <input name="dob" style="height:60px;" id="dob" type="text"  onfocus="(this.type='date')" placeholder="Date">

                                    </div>


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

                                        <input id="education" type="text" placeholder="Education Level" name="education" />

                                    </div>

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

                                        <input id="occupation" type="text" placeholder="Occupation" name="occupation" />

                                    </div>

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

                                        <input id="email" type="text" placeholder="Email Id" name="email" />

                                    </div>

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

                                        <input id="mobile" type="text" placeholder="Mobile No" name="mobile" />

                                    </div>

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

                                        <input id="address" type="text" placeholder="Address" name="address" />

                                    </div>

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

                                        <input id="city" type="text" placeholder="City" name="city" />

                                    </div>

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

                                        <input id="state" type="text" placeholder="State" name="state" />

                                    </div>

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

                                        <textarea id="descr" name="descr" placeholder="Describe Your Self" rows="4"></textarea>

                                    </div>

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

                                        <div class="g-recaptcha" data-sitekey="6LcwNQ4jAAAAAKXcMR_h42jBW1BcDnF2ASDv9eAS"></div>

                                    </div>
                                    <br>
                                    <div class="col-md-12">

                                        <button type="button" onclick="sendjoin();" name="submit_contact" class="btn btn-danger fullwidth btn-lg unbordered right-side">Say Hello <i class="icon-cursor"></i></button>

                                    </div>

                                    <p class="success-message">Thank you for contacting us! We will get back to you soon!</p>

                                </div>  

                            </div>

                            <div class="col-md-1">

                            </div>


                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


  <script src="https://www.google.com/recaptcha/api.js" async defer></script>

 



<? include 'footer.php';?>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

function sendjoin(){
      var pdata = new FormData(document.getElementById("category"));     
        $.ajax({
                    url: "joindb.php",
                    type: "POST",
                    data:  pdata,
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data)
                   {
                     alert(data.trim());
                     location.reload();
                  },
                   error: function() 
                    {
                    }           
        });

   }

  function sendemail(){

        

         var dataString = 'email='+$("#email").val()+'&name='+$("#name").val()+'&phone='+$("#phone").val()+'&message='+$("#message").val();

       

         $.ajax({

               type: "POST",

               url: "contactdb.php",

               data: dataString,

               cache: false,

               success: function(result){  

               alert(result); 

                location.reload();

                  //$("#plist").html(result);

               }

          });

    }



</script>