values of POST method are ignored when the PHP file loads as an jquery modal screen (colorbox)?

Question

I have an html page with this code:

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
  $(document).ready(function(){
    //Examples of how to assign the Colorbox event to elements
    $(".group1").colorbox({rel:'group1'});
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    $(".group4").colorbox({rel:'group4', slideshow:true});
    $(".ajax").colorbox();
    $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
    $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".inline").colorbox({inline:true, width:"50%"});
    $(".callbacks").colorbox({
      onOpen:function(){ alert('onOpen: colorbox is about to open'); },
      onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
      onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
      onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
      onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });

    $('.non-retina').colorbox({rel:'group5', transition:'none'})
    $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

    $("#cboxFormButton").click(function(e){

    e.preventDefault();


    $.colorbox({href: $(this).closest('form').attr('action') });


    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
      $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
      return false;
    });
  });
</script>
</head>
<body style="">

and this is my form:

<div>
<form action="rrr.php" method="POST" target="_blank" class="">
  <input id="111" name="a" type="hidden" value="1"/>
  <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>
</div>

and I'm posing to this rrr.PHP file:

<?php 

if(isset($_POST['a']));

switch ($_POST['a']) {

    case "1":
        $param1 = "1";
        break;

    case "2":
        $param1 = "2";
        break;

    default:
        $param1 = "other";
}
?>

The problem: in the frame that pops out the rrr.php file, the value "1" that was posted is ignored, so I Get the result as if a default value was posted.

(I don't want to use the GET function)

What's wrong?

I dont understand how does the PHP loads on the modal screen. Does it work without it? — meda, Feb 22 '14 at 23:50

Emre Aydin · Accepted Answer · 2014-02-23T00:20:17.920

0

$.colorbox({
href: $(this).closest('form').attr ('action'),
data: {a: $("input#111").val()}
});

This should work fine now.

edited Feb 23 '14 at 00:20

answered Feb 22 '14 at 23:42

Emre Aydin

569
2
16

I get a fatal error. I've posted it right under ` – rockyraw Feb 22 '14 at 23:45
oh my bad it is var_dump($_POST); – Emre Aydin Feb 22 '14 at 23:47
I get `array(0) { } parameter1 is other` – rockyraw Feb 22 '14 at 23:50
if var_dump($_POST); returns array(0){} then your values are not posted to rrr.php – Emre Aydin Feb 22 '14 at 23:56
well, that's exactly what I'm asking - what's hindering them from getting posted? without the modal they do get posted. – rockyraw Feb 22 '14 at 23:57
i was trying to understand that correct values are sent in correct format. Since they are not sent at all, we need to check your jquery code. – Emre Aydin Feb 23 '14 at 00:00
thanks, this seems to work but still with a problem, [can you check this new question?](http://stackoverflow.com/questions/21962705/two-identical-post-actions-with-jquery-modal-screen-one-works-and-one-doesnt) – rockyraw Feb 23 '14 at 00:49

meda · Answer 2 · 2014-02-23T00:32:56.643

0

The event.preventDefault() method stops the default action of an element from happening.

In your case:

$("#cboxFormButton").click(function(e){
 e.preventDefault();

It would prevent your submit button from submitting the form.

You dont have much choices you know, since you don't want to use query string and preventing default action, then you have to do the post in jQuery:

$(function() { 
    $("#formID").submit(function() {
        $.post($(this).attr("action"), $(this).serialize(), function(data) {
            $.colorbox({html:data});
        },
        'html');
        return false;
    });
});

edited Feb 23 '14 at 00:32

answered Feb 23 '14 at 00:17

meda

45,103
14
92
122

ok, but if I take out this line, the whole modal won't work at all; instead of opening a popup layer, it would pass me to complete new url. – rockyraw Feb 23 '14 at 00:22
yea I know, and you really dont want query strings – meda Feb 23 '14 at 00:24
not sure how to implement this, the other answer seems to work, what's the difference between these methods? – rockyraw Feb 23 '14 at 01:05

values of POST method are ignored when the PHP file loads as an jquery modal screen (colorbox)?

2 Answers2