Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Form submit + jQuery plugin help

    I use jQuery very often, but am not a javascript expert and have trouble wrapping my head around it sometimes when I have to make alterations.

    In my current project I am using ColorBox (http://colorpowered.com/colorbox/ - one of the plugins that makes a new page pop up in a pretty way). So when I click on an image, the new page pops up and the browser window behind it goes dark, you know the drill.

    But I also need to use this image as the submit button in a form. So when the user presses the submit button, the form action page comes up, and the form is submitted to this new page.

    I'm having trouble making both of these things work.

    The ColorBox line of code in question looks like this:

    Code:
    <a href="quote_life.html" class='example5'><img src="images/btn_getquote.png" /></a>
    That works. I'm having no problem with ColorBox.

    But how to turn that into a submit button? It's the "class='example5'" that triggers ColorBox. So I've tried adding that to a line of input:

    Code:
    <input type="image" src="images/btn_getquote.png" class='example5'>
    And I've tried adding an "OnClick='SubmitForm();'" line to the first example above, etc. I'm just not sure what combinations I should be using to make this work. Always, when I try to turn the first "a href" line of code into a submit function, the form works, but the ColorBox breaks.

    Hints? This doesn't seem like it should be difficult. Thank you!

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    353
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Try this one probably:
    PHP Code:
    <script type="text/javascript">
                $(
    document).ready(function(){
                    
    //Examples of how to assign the ColorBox event to elements
                    
    $(".example5").colorbox({href:"quote_life.html"});
                });
    </script> 

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, that does work ... it makes the submit image open the colorbox. But the form info does not pass through.

    I have now read in the ColorBox forum that I have to use it in conjunction with jQuery.post (http://docs.jquery.com/Ajax/jQuery.post) but I haven't gotten that to work, either.

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    353
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Hi again jswofford,

    Sorry, somehow I missed the form submission phrase in your thread.
    Must be too sleepy at that time .

    Hmm, turns out that this does seem difficult.
    My server is down at this time, so I try to simulate "a quick and dirty" form-submission, using native javascript.
    Hope you could enhance this using jQuery.

    Here the method is GET. And the logic is first to create a blank iframe of colorbox, then retarget existing form to that iframe.

    Here they are:

    FORMDOC.HTM - contains form with user_name and user_email as input texts.
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <
    title>formdoc.htm</title>

    <!-- --------- 
    COLORBOX STYLE SCRIPTS --------- -->
    <
    link type="text/css" media="screen" rel="stylesheet" href="./colorbox/colorbox.css" />
    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="./colorbox/jquery.colorbox.js"></script>
    <script type="text/javascript">

    // PREPARE MYFORM TO CHANGE TARGET TO COLORBOX IFRAME, THEN DO SUBMISSION
    function submit_myformf(){
      var
        b=document.getElementById("myform");
      
      b.target=document.getElementsByTagName("iframe")[0].name;
      b.submit();
    }

    // OPEN COLORBOX IFRAME FIRST
    function open_colorbox_iframef(){
      $.fn.colorbox({
          html:"Loading..",
          open:   true,
          iframe: true,
          width: "320px",
          height: "320px",
          onComplete: submit_myformf
        });
    }

    </script>

    <!-- --------- CUSTOM STYLE & SCRIPTS --------- -->
    <style type="text/css">
    #page{
      width: 240px;
      height: 192px;
      margin: 1em auto;
      padding: 1em;
      background-color: #888;
      color: #fff;
    }
    #myform{
      text-align: right;
      line-height: 200%;
    }
    </style>

    </head>

    <body>
      <div id="page">
        Subscribe to our jokes?
        <form name="myform" id="myform" action="targetdoc.htm" method="get">
          <label for="user_name">user_name: </label>   <input type="text" name="user_name">
          <label for="user_email">user_email: </label> <input type="text" name="user_email">
          <input type="button" value="submit" id="mybutton" onclick="open_colorbox_iframef();">
        </form>
      </div>
    </body>
    </html> 
    TARGETDOC.HTM: is the action target of the FORMDOC.HTM, it check whether inputs submission is successful.
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <
    title>targetdoc.htm</title>

    <!-- --------- 
    CUSTOM STYLE SCRIPTS --------- -->
    <
    style type="text/css">
    #page{
      
    width240px;
      
    height192px;
      
    margin1em auto;
      
    padding1em;
      
    background-color#888;
      
    color#fff;
    }
    </
    style>
    </
    head>

    <
    body>
      <
    div id="page">
        <
    script type="text/javascript">
        var
          
    a=document.location.search.substr(1); //MINUS ? CHARACTER
          
    result="";
        if (
    a.length>0){
          var 
            
    b=a.split("&");             // split q=x&sid=y into b[0] & b[1] respectively.
            
    c=b[0].split("=");          // split q=x into c[0] & c[1] respectively; c[1]=x.
            
    d=b[1].split("=");          // split sid=y into d[0] & d[1] respectively; d[1]=y.
          
    result="<p>Thank you "+c[1]+".</p>";
          
    result+="<p>We shall send our jokes to "+unescape(d[1])+" monthly.</p>";
        }
        else{
          
    result="No no no. I didn't get your info yet.";
       }
        
    document.write(result);
        
    </script>
      </div>
    </body>
    </html> 
    Let me know the result then...
    Last edited by hdewantara; 01-19-2010 at 03:09 PM.

  • #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    353
    Thanks
    9
    Thanked 52 Times in 51 Posts
    I have now read in the ColorBox forum that I have to use it in conjunction with jQuery.post (http://docs.jquery.com/Ajax/jQuery.post) but I haven't gotten that to work, either.
    Well probably using jQuery is shorter:

    For using a form like:
    Code:
    <form name="myform" id="myform">
      ...
      <input type="image" src="images/btn_getquote.png" id="mybutton">
    </form>
    the script would look like:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("#mybutton").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
        $.post("quote_life.php",        // PERFORM AJAX POST
          $("#myform").serialize(),      // WITH SERIALIZED DATA OF MYFORM
          function(data){                // DATA NEXT SENT TO COLORBOX
            $.fn.colorbox({
              html:   data,
              open:   true,
              iframe: false,            // NO FRAME, JUST DIV CONTAINER?
              width:  "320px",
              height: "320px"
            });
          },
          "html");
      });
    }); 
    </script>

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, i'm sorry to open this old topic, but i'm actually having this exact problem, for so long now.
    All I want to do is load the form results in a colorbox. I've tried for days to get this to work with no luck.

    This is my form:

    PHP Code:
    <form name="myform" id="myform" method="link" action="../buy.php" >
    <
    div style='display: none'><input type="text" value="hide value data" name="LastName"></div>
      <
    input type="submit" value=""  class="button2" id="mybutton">
    </
    form
    As you can see, i'm using method="link", not get or post, because i'm using a script to pass input values to another page. This script: http://www.htmlgoodies.com/beyond/ja...le.php/3471111
    I could use get to, as far as I can tell if it's needed.

    And I've tried to use hdewantara's method with no luck, even if I use it without changes it doesn't work.

    Also it's important that the content loads within an iframe.


    Please someone help me, I'm very tired of trying
    Last edited by julittok; 09-10-2011 at 11:33 PM.


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

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