How to Add form in popup and submit it with ajax in magento ?

1 Answer(s)

We can use static blocks to make popup and call these static block where you want it to call .

Here is the code to make popup

<script src=”//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js”></script>

<link href=”//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css”

   rel=”stylesheet” type=”text/css” />

<table style=”width: 340px; height: 346px;” border=”0″>

<tbody>

<tr>

<td><span > <a href=”javascript:void(0)” id=”Learn-More” style=”color: #00ccff;”>Learn More</a></span></td>

</tr>

</tbody>

</table>

<script type=”text/javascript”>

   $j(document).ready(function()

 {

       $j(“#new-class”).dialog({

           modal: true,

           autoOpen: false,

           title: “Returns &amp; Guarantees”,

           width: 550,

           height: 550

       });

       $j(“#Learn-More”).click(function () {

           $j(‘#returns-guarantees’).dialog(‘open’);

          

       });

$j(“.ui-dialog-titlebar-close”).click(function () {

           $j(‘#returns-guarantees’).dialog(‘close’);

       });

   });

</script>

With help of this code we can make popup.when you click on “Learn More” popup will appear . but still we need content for popup because it is calling this id “#new-class “

Now make second static block and put form in second block

Here is the code for second Block

<script>

      $j(document).ready(function(){

  $j(“#submit”).click(function(){

var website = $j(“#website”).val();

var fname = $j(“#fname”).val();

var phone = $j(“#phone”).val();

var email= $j(“#email”).val();

var num = $j(“#phone”).val();

$j(“img#loaders”).show();

var atposition=email.indexOf(“@”);  

var dotposition=email.lastIndexOf(“.”);

       

// Returns successful data submission message when the entered information is stored in database.

var dataString = ‘website1=’+ website + ‘&fname1=’+ fname + ‘&phone1=’+ phone + ‘&email1=’+ email + ‘&location1=’+ location;

if(website==” || fname==” || phone==” || email==”){

alert(“Please enter required fields”);

$j(“img#loaders”).hide();

return false;

}

if (isNaN(num)) {

         alert(‘Please enter Number for Phone Field!’);

 $j(“img#loaders”).hide();

 return false;

       }

       if (atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){  

 alert(“Please enter a valid e-mail address”);  

 $j(“img#loaders”).hide();

 return false;  

 }

 

      if(num.length<10 || num.length>14)

{

 alert(“Please enter a valid Length of phone Number”);

 $j(“img#loaders”).hide()

 return false;

;  }

       if(email.length>50)

{

 alert(“Please enter a valid Length of Email”);

 $j(“img#loaders”).hide();

 return false;

 }

  if(fname.length>50)

{

 alert(“Please enter a valid Length of Name”);

 $j(“img#loaders”).hide();

 return false;

 }

else{

// AJAX Code To Submit Form.

$j.ajax({

type: “POST”,

url: “Test.php”,

data: dataString,

cache: false,

success: function(data) {

$j(“img#loaders”).hide();

                 $j(“img#success-mark”).show();

                 setTimeout(function() { $j(“img#success-mark”).hide(); }, 5000);

 $j(‘#myform’)[0].reset();

        }

});

}

 

return false;

});

});

  /* $(document).ready(function() {

       $(‘#submit’).click(function(e) {

           e.preventDefault();

           $.ajax({

               type: ‘POST’,

               url: ‘http://stage.tools4trade.co.uk/testmail.php’,

               data: {website: $(‘#website’).val()},

               success: function(data)

               {

                   $(“#content”).html(data);

               }

           });

       });

   });*/

$j.validator.setDefaults({

 debug: true,

 success: “valid”

});

$j( “#website” ).validate({

 rules: {

   website: {

     required: true,

     url: true

   }

 }

});

function checkURL(url) {

   var string = url.value;

   

   if (!~string.indexOf(“http”)) {

       string = “http://” + string;

   }

   

   url.value = string;

   return url;

}

</script>

<style>

.form input[type=text],.form input[type=email],.form input[type=url]{

   width: 100%;

   padding: 15px;

   border: 1px solid #ccc;

   border-radius: 5px;

   box-sizing: border-box;

   resize: vertical;

 

}

.row-form button[type=submit] {

   background-color: #1caaaf;

   color: white;

   padding: 10px 20px;

   border: none;

   border-radius: 4px;

   cursor: pointer;

   margin-top: 12px;

   width: 100%;

   font-size: 18px;

   

  

}

.row-form input[type=submit]:hover {

   background-color: #45a049;

}

.container-form {

   border-radius: 5px;

   padding: 20px;

  

}

.row-form{

text-align: center;

margin: 0 auto;

width: 100%;

}

.col-75.form {

   float: left;

   width: 100%;

   margin-top: 6px;

   text-align: center;

}

/* Clear floats after the columns */

.row-form:after {

   content: “”;

   display: table;

   clear: both;

}

/* Responsive layout – when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media (max-width: 600px) {

   .col-75.form, .row-form input[type=submit] {

       width: 100%;

       margin-top: 0;

   }

}

</style>

<div style=”display: none”>

<div id=”new-class” class=”std”>

<div class=”container-form”>

 <form action=”test.php” id=”myform”>

  

  <div class=”row-form”>

     <div class=”col-75 form”>

       <input type=”url” id=”website” name=”website” onchange=”checkURL(this)” placeholder=”URL”>

     </div>

   </div>

   

   <div class=”row-form”>

    <div class=”col-75 form”>

       <input type=”text” id=”fname” name=”firstname” placeholder=” Name Here”>

     </div>

   </div>

   

   <div class=”row-form”>

    <div class=”col-75 form”>

       <input type=”text” id=”phone” name=”phone” placeholder=”Phone Number Here”>

     </div>

   </div>

   

   <div class=”row-form”>

    <div class=”col-75 form”>

       <input type=”email” id=”email” name=”email” placeholder=” Email Address Here”>

     </div>

   </div>

 

 <div class=”row-form”>

     <button type=”submit” value=”SUBMIT” id=”submit”>SUBMIT </button>

   </div>

 </form>

</div>

<div id=”content”></div>

</div>

</div>

Call this block in which page you want it in magento site like (view.phtml file)

Here is the code to call a magento block

 

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘block_identifier’)->toHtml(); ?>

 

Now submit all the data in database using php file( here we are using test.php file)

Answered on June 19, 2018.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.