CODEWITHSUNDEEP
jqueryajaxcolorbox
sebas
sebas

Reputation: 742

POST form using ajax and then trigger colorbox

I'm trying to post a form using jquery-ajax and at the same time load a hidden div on a colorbox pop-over.

The hidden div to load is called "#hidden-div" .

So far i have the code below:

Any ideas on how to make it post ALL the values and then trigger the colorbox pop-over with the hidden div?

The code below is not posting the data and not triggering the pop over :(

  <script>
$(document).ready(function() {
    $("#frmSS4").submit(function(event,dontCheck) {
        if(dontCheck === true) return;
        $.ajax({
        type     : 'POST',
        url      : "http://clientes.cupon0km.com/form.php?form=4",
        data     : $(this).serialize(),
        dataType : 'jsonp'
    });
        event.preventDefault(); 
        $("#hidden-div").colorbox({inline:true, width:"auto", fixed:true});
    });
});
</script>

Upvotes: 2

Views: 4120

Answers (4)

Dharmalingam Arumugam
Dharmalingam Arumugam

Reputation: 407

User html instead of href as bellow

$(#divid).colorbox({inline:true, width:"auto", fixed:true,html:data});

Upvotes: 0

Marshall &#198;on
Marshall &#198;on

Reputation: 407

Replace your ajax statement with this:

  $.ajax({
       type     : 'POST',
       url      : "http://clientes.cupon0km.com/form.php?form=4",
        data     : $(this).serialize(),
        dataType : 'jsonp',
        success: function( data ) {
           $.colorbox({inline:true, width:"auto", fixed:true, href:"#hidden-div"});
        }

    });

Upvotes: 1

Jasper
Jasper

Reputation: 76003

To send form data you can use .serialize() which serializes all the data in your form, instead of doing it one input at a time:

   data: { email: $('#email').val(), CustomFields_17_4: $('#CustomFields_17_4').val(),     CustomFields_12_4: $('#CustomFields_12_4').val(), CustomFields_13_4:     $('#CustomFields_13_4').val(), CustomFields_16_4: $('#CustomFields_16_4').val() },

Can change to:

   data: $(this).serialize(),

With this referring to the form (because this code is within the event handler for the form).

To open a colorbox instance you just need to call the initialization code inside the success callback function.

Docs for .serialize(): http://api.jquery.com/serialize

<script>
$(document).ready(function() {
    $("#frmSS4").submit(function(event,dontCheck) {
        if(dontCheck === true) return;
        $.ajax({
            type     : 'POST',
            url      : "http://clientes.cupon0km.com/form.php?form=4",
            data     : $(this).serialize(),
            dataType : 'jsonp'//this line will allow you to do cross-domain AJAX requests (I believe this is one of your problems)
        });
        event.preventDefault(); 
        //initialize colorbox here, Antonio Languna has an example in his answer
    });
});
</script>

Upvotes: 0

Antonio Laguna
Antonio Laguna

Reputation: 9292

The script is a little obscure but if I understanded it right, you should try something like this:

<script>
$(document).ready(function() {
$("#frmSS4").submit(function(event,dontCheck) {
   if(dontCheck === true) return;
   $.ajax({
   type: 'POST',
   url: "http://clientes.cupon0km.com/form.php?form=4",
   data: $(this).serialize(),
       success: function(data) {
               $("#dinero-form").trigger("submit",true); // What is this?
               $.colorbox({html: $('#hidden-div').html()});
       }
   });
   event.preventDefault(); 
});
});
</script>

Upvotes: 1

Related Questions