SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Passing form data to a lightbox

    Hi,

    I've been trying to figure out a solution to this for ages, but getting no where. I'd like to have a form on the page which when submitted opens a lightbox and echos that form data. I've tried the below, but it doesn't seem to work. Does anyone know a solution to this? Doesn't have to be the facebox lightbox, can be any lightbox script.

    Thanks!


    http://www.searchlabtest.com/facebox/examples/index.php

    Code:
      <script type="text/javascript">
        jQuery(document).ready(function($) {
    	$("#submitMe").click( function(event) {
        $.facebox("<iframe src='var.php'></iframe>" );
      
    }); 
        })
      </script>
    
    ......
    
     <form action="var.php" method="POST">
        <select name="q"> 
    	<option value="Worked_1!"/>Worked_1</option>
    	<option value="Worked_2!"/>Worked_2</option>
    	<option value="Worked_3!"/>Worked_3</option>
    	</select><br /><br />
    	<input type="button" value="Send form data to lightbox" id="submitMe" /> 
    </form>
    var.php is simply...
    Code:
    <html>
    <body>
    <?php echo $_POST[q]; ?>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by boognish View Post
    Code:
    <html>
    <body>
    <?php echo $_POST[q]; ?>
    </body>
    </html>
    The q in your PHP code is currently a variable, and so will be throwing an error because that variable has not been defined.

    You will want to use a string there instead. See for example, http://php.net/manual/en/reserved.variables.post.php
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The q in your PHP code is currently a variable, and so will be throwing an error because that variable has not been defined.

    You will want to use a string there instead. See for example, http://php.net/manual/en/reserved.variables.post.php
    Thanks very much for your response. I missed that, so I change the code to <?php echo $_GET["q"]; ?>. Though it still doesn't seem to have sorted the issue. It still doesn't echo the value in the iframe in the lightbox.

    Any ideas what else I could try? Alternate solutions? Really struggling to resolve this one!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by boognish View Post
    I change the code to <?php echo $_GET["q"]; ?>
    The method that the form is using is post, so PHP will have to use $_POST - not $_GET
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The method that the form is using is post, so PHP will have to use $_POST - not $_GET
    Good spot, don't know how I ended up changing it to a GET, I changed it to <?php echo $_POST["q"]; ?>. That's two silly mistakes now!

    Though the value still isn't showing up in the lightbox. I'm pretty sure my current code is not the correct way to achieve what I want. Any ideas on a solution?

    Thanks!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by boognish View Post
    I'm pretty sure my current code is not the correct way to achieve what I want. Any ideas on a solution?
    Well the way to submit form data to a server-side script without having the page reload, is via ajax - which with jQuery is done by replacing the form submit event with an ajax request instead.

    It's done something like this:

    HTML Code:
    <form id="submitResponseToLightbox" action="var.php" method="POST">
    Code javascript:
    function updateLightbox(content) {
        // update the lightbox from here
    }
     
    $("#submitResponseToLightbox").submit(function(event) {
        var form = this,
            serializedData = $(form).serialize();
     
        var request = $.ajax({
            url: "var.php",
            type: "post",
            data: serializedData
        });
     
        request.done(function (response, textStatus, jqXHR) {
            updateLightbox(response);
        });
     
        // prevent the default web page submission of the form
        event.preventDefault();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks so much for your help on this. I added the code to the page...

    Code:
      <script type="text/javascript">
        jQuery(document).ready(function($) {
    	$("#submitMe").click( function(event) {
        $.facebox("<iframe src='var.php'></iframe>" );
      
    }); 
        })
      </script>
      <script type="text/javascript">
      
      
      function updateLightbox(content) {
        // update the lightbox from here
    }
     
    $("#submitResponseToLightbox").submit(function(event) {
        var form = this,
            serializedData = $(form).serialize();
     
        var request = $.ajax({
            url: "var.php",
            type: "post",
            data: serializedData
        });
     
        request.done(function (response, textStatus, jqXHR) {
            updateLightbox(response);
        });
     
        // prevent the default web page submission of the form
        event.preventDefault();
    	$.facebox("<iframe src='var.php'></iframe>" );
    });
      </script>
    </head>
    
    <body>
     <form id="submitResponseToLightbox" action="var.php" method="POST">
        <select name="q"> 
    	<option value="Worked_1!"/>Worked_1</option>
    	<option value="Worked_2!"/>Worked_2</option>
    	<option value="Worked_3!"/>Worked_3</option>
    	</select><br /><br />
    	<input type="button" value="Send form data to lightbox" id="submitMe" /> 
    </form>
    This doesn't seem to work though...
    http://www.searchlabtest.com/facebox/examples/

    Have to admit, not really sure what I'm doing with this. Can you tell me where I'm going wrong?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Well for a start, you're updating the lightbox at the wrong place. You need to perform the update after the request to the var.php has returned its contents, which is from the request.done method. See that updateLightbox function? Place the code to update the lightbox inside of that function. That is where the content from the var.php file will be sent.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean this? ...

    Code:
      <script type="text/javascript">
      
      
      function updateLightbox(content) {
           jQuery(document).ready(function($) {
    	$("#submitMe").click( function(event) {
        $.facebox("<iframe src='var.php'></iframe>" );
      
    }); 
        })
    }
     
    $("#submitResponseToLightbox").submit(function(event) {
        var form = this,
            serializedData = $(form).serialize();
     
        var request = $.ajax({
            url: "var.php",
            type: "post",
            data: serializedData
        });
     
        request.done(function (response, textStatus, jqXHR) {
            updateLightbox(response);
        });
     
        // prevent the default web page submission of the form
        event.preventDefault();
    });
      </script>
    http://www.searchlabtest.com/facebox/examples/

    Sorry, not sure I follow, whats the code to update the lightbox?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by boognish View Post
    Sorry, not sure I follow, whats the code to update the lightbox?
    Well from what I see on the facebox page, it should be as easy as:

    Code JavaScript:
    $.facebox(content);
    Last edited by paul_wilkins; Mar 25, 2013 at 14:20. Reason: fix link
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Let's approach this again from first principles.

    First - get the form working, submitting to the php form, and while we're at it, remove those accursed <br> tags which are to be used only for layout addresses and poetry.

    HTML Code:
    <!doctype html>
    <html>
    <head>
        <title>Send form data to facebox</title>
        <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <form id="sendToFacebox" action="var.php" method="POST">
        <p><select name="q"> 
            <option value="Worked_1!"/>Worked_1</option>
            <option value="Worked_2!"/>Worked_2</option>
            <option value="Worked_3!"/>Worked_3</option>
        </select></p>
        <p><input type="submit" value="Send form data to facebox" /></p>
    </form>
    That works well, in that it sends the data to the php file, which is a good safety measure for when scripting is not available (some turn it off for security, other businesses deliberately disable it, etc...)

    Now to put the scripting in there. Place the scripting at the end of the body, just before the </body> tag. That ensures that the scripting doesn't slow the loading of the page, and also allows the scripting to easily interact with the contents of the page before it finishes loading.

    In this case, you're using jquery and facebox, so place the CSS link for facebox in the head, and the scripting libraries for jQuery and facebox at the end of the body. And, a script for what we're going to write next too.

    HTML Code:
    <head>
        ...
        <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        ...
    
        <script src="js/jquery.min.js"></script>
        <script src="facebox/facebox.js"></script>
        <script src="js/sendformtofacebox.js"></script>
    </body>
    The scripting should be as simple to achieve now, as the following code:

    Code javascript:
    $('#submitResponseToLightbox').submit(function(event) {
        var form = this,
            serializedData = $(form).serialize();
     
        $.post(form.action, serializedData)
        .done(function (response, textStatus, jqXHR) {
            $.facebox(response);
        });
     
        // prevent the default web page submission of the form
        event.preventDefault();
    });

    We could even start refactoring some parts of the scripting around now, to help make it easier to see what is going on.
    For example, the .done function, only needs the response parameter.

    Code javascript:
    .done(function (response) {
        $.facebox(response);
    });

    And even simpler than that, because we're passing the parameter straight to the facebox function, we can just pass the facebox function directly to done.

    Code javascript:
    .done($.facebox);

    We can also move some of the code out to separate functions, such as with an overrideFormSubmit function:

    Code javascript:
    function overrideFormSubmit(form, func) {
        $(form).submit(function(event) {
            func.call(this);
     
            // prevent the default web page submission of the form
            event.preventDefault();
        });
    }
     
    overrideFormSubmit('#sendToFacebox', function () {
        ...
    });

    And with a formPostAjax function:

    Code javascript:
    function formPostAjax(form, func) {
        var serializedData = $(form).serialize();
     
        $.post(form.action, serializedData)
        .done(func);
    }
    ...
    formPostAjax(this, $.facebox);

    So that the final code that we end up with, supported by the overrideFormSubmit and the formPostAjax functions, is:

    Code javascript:
    function overrideFormSubmit(form, func) {
        $(form).submit(function(event) {
            func.call(this);
     
            // prevent the default web page submission of the form
            event.preventDefault();
        });
    }
     
    function formPostAjax(form, func) {
        var serializedData = $(form).serialize();
     
        $.post(form.action, serializedData)
        .done(func);
    }
     
    overrideFormSubmit('#sendToFacebox', function () {
        formPostAjax(this, $.facebox);
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Oh yes, there's just one more change that I would make to the above (my) code, and it's a formatting change.

    Code:
    $.post(form.action, serializedData)
    .done(func);
    JavaScript handles the above code as one statement, but it's not all that clear to the person viewing it, if it's supposed to be one statement or two.

    The above code works the same as if it were in one line:

    Code:
    $.post(form.action, serializedData).done(func);
    But with jQuery, it's better to separate those different aspects of things if they aren't tightly related, or may grow to handle different situations.
    So, indenting the .done part helps to express that the .done part is connected with the part above it, and makes it easy to add other things that the .post may need to handle too.

    Code javascript:
    $.post(form.action, serializedData)
        .done(func);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •