passing data to the fancy box using jquery?

Question

i want to know how to pass information from my the page to fancybox(lightbox) using jquery. i want to pass the information typed in the textbox(.question_box) when clicking the addButton to bring up a fancybox. html:

<input class="question_box" type="text">
<a id="addButton" class="pop_up" href="add_note.html">Ask Question!</a>

jquery:

/* Configuring the fancybox plugin for the "Add a note" button: */
    $("#addButton").fancybox({
        'zoomSpeedIn'       : 600,
        'zoomSpeedOut'      : 500,
        'easingIn'          : 'easeOutBack',
        'easingOut'         : 'easeInBack',
        'hideOnContentClick': false,
        'padding'           : 15
    });

What page does this button appear on? What content is found on add_note.html? Do you want the fancybox to contain only the typed content? Is a different template supposed to appear in fancybox with the typed content included? — Bryan Downing, Mar 16 '11 at 01:40
That code looks like it will do what you want just fine, perhaps you could elaborate on exactly what you want this code to do, and what it is not doing that you want it to? — mattsven, Mar 16 '11 at 01:42
yeh im sorry i forget to mention that on the add_note.html thiers a textbox thier (.input_from_page) that is mean to get the value from (.question_box) :)) sorry about the misunderstanding!! — pingpong, Mar 16 '11 at 01:42
Just having the a's href link to "add_note.html" will not make it submit the question. — mattsven, Mar 16 '11 at 01:44
i dnt get what you mean, the href='add_note.html' is the actual page of the fancybox, i just want to pass the data from the input to that page, so i can display it :), the add_note.html will do the sumbitting the question!!! — pingpong, Mar 16 '11 at 01:45
You realize that a link DOES NOT submit data. It simply changes the URL of the browser. For this, you need to use a FORM. On top of that, a .HTML page cannot receive "POST" data, only "GET" data. Unless, of course, you are using URL rewrites. — mattsven, Mar 16 '11 at 01:51
thats what i want GET DATA, not POST!!! i just want to get the input value(.question_box) :)) — pingpong, Mar 16 '11 at 01:53

score 1 · Answer 1 · answered Mar 16 '11 at 01:58

1

The proper HTML is:

<form action="add_note.html" method="GET">
<input class="question_box" name="question" type="text" />
<button id="addButton" class="pop_up" href="add_note.html">Ask Question!</button>
</form>

And your add_note.html should look for the GET data "question".

answered Mar 16 '11 at 01:58

mattsven

22,305
11
68
104

thank do i get the data in add_note.html using html or php lol thakns:)) +1 upvote from me – pingpong Mar 16 '11 at 02:00
You can use javascript or PHP. If you wish to simply display the question to the user when the page goes to add_note.html, use javascript. If you wish to save and display the question, use PHP. BTW, you should click the check mark, not the upvote ;) – mattsven Mar 16 '11 at 02:02

score 0 · Accepted Answer · edited May 23 '17 at 09:58

0

You can do like this: Get value from textbox put it into the link of #addButton

$('.question_box').keyup(function(){
   $('#addButton').attr('href', 'add_note.html?str=' + $(this).val());
})

In add_note.html use this function to get the parameter

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

How can I get query string values in JavaScript?

edited May 23 '17 at 09:58

Community

1
1

answered Mar 16 '11 at 02:03

Khoa Nguyen

1,319
7
21

hey thanks for the answer, when i get the paramter using var value= getParametereByname(str); how can i print value inside my textbox? :)) – pingpong Mar 16 '11 at 02:19
You can use $('#your_textbox_id').val(getParametereByname(str)); – Khoa Nguyen Mar 16 '11 at 02:23
Did you include jquery library in add_note.html? This code $('#your_textbox_id') need jquery. And did you check the link is generated and passed correctly? You can see it in Firebug. – Khoa Nguyen Mar 16 '11 at 02:31
yes i have :( now it load properly, but the value is not getting passsed http://www.pastie.org/1677015 this is my full script – pingpong Mar 16 '11 at 02:35
Sorry, the code should like this: $('#note-body').val(getParameterByName('str')); – Khoa Nguyen Mar 16 '11 at 03:14
Please make sure the function getParameterByName() is correct. I mistyped the function name in my above comment. I tested the code and it works for me. – Khoa Nguyen Mar 16 '11 at 03:21
yeh i found that bug aswell, and it corrected when i paste the pastie. but it still deosnt work!! can you show me your code!! – pingpong Mar 16 '11 at 03:24

passing data to the fancy box using jquery?

2 Answers2