Form submit + jQuery plugin help

jswofford · 01-13-2010, 08:20 PM

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!

hdewantara · 01-17-2010, 12:04 AM

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>

jswofford · 01-19-2010, 12:00 AM

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.

hdewantara · 01-19-2010, 03:02 PM

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{

  width: 240px;

  height: 192px;

  margin: 1em auto;

  padding: 1em;

  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...

hdewantara · 01-19-2010, 07:19 PM

Quote:

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>

julittok · 09-10-2011, 10:32 PM

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