I got this script to use it as a search engine, but when I tried to change the button to replace it with a CSS styled button (including fontawesome), the button doesn't call the results. I am a newbie and my javascript knowledge is limited.
<form name="searchengine">
<input type = text name ="keywords" placeholder ="Search..." style ="font-size:14px;hight:35px;width:240px;" value="" maxlength=40>
<input type = button name="go" Value=" đ " style ="height:30px;width:35px;" onClick="search()">
</form>
I just adjusted the inline styling but I would like to replace it with this:
<form name="searchengine">
<input type="hidden" name="keywords" value="1">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button class="icon"><i class="fa fa-search"></i></button>
</div>
</form>
I know that there is no onclick function assigned on the second example but I have searched everywhere and couldn't find an answer, I have tried different ways to make it "clickable" but with no success. Below are some examples of what I have done. Most come from Stackoverflow.
<span onClick="myFunction()"><i class="fa fa-search"></i></span>
<i class="fa fa-search" onclick="search()"></i>
Thanks in advance for your help. Please let me know if you require the full script.
Here is the entire script. Thanks for your help.
<html>
<title>
Search Engine
</title>
<head>
<script>
title = new Object();
desc = new Object();
links= new Object();
matched= new Object();
keywords= new Object();
found= new Object();
var temp=0;
// actual location or the item to be searched // description of he location
// actual link
// percentage match found
// keywords as parsed from the input
// # of titles present in the database
title[0]=14
//no of keywords after parsing
keywords[0]=0
//no of matches found.
found[0]=0
<!-- Begin List of Searchable Items -->
<!--put the list of the links and descriptions here!!-->
title[1]="Introduction FAQs Java JavaScript beginner"
desc[1]="JavaScript Primer (Part 1 of 2) "
links[1]="http://www.javascriptkit.com/primer1.htm"
matched[1]=0
title[2]="objects document function parameter last modified date"
desc[2]="JavaScript Primer (Part 2 of 2) "
links[2]="http://www.javascriptkit.com/primer2.htm"
matched[2]=0
title[3]="alert confirm prompt box pop up dialog"
desc[3]="Creating Alert, Confirm, and Prompt Boxes"
links[3]="http://www.javascriptkit.com/alert.htm"
matched[3]=0
title[4]="event handler onClick onLoad onMouseover onMouseout onUnload"
desc[4]="Understanding Event Handlers in JavaScript"
links[4]="http://www.javascriptkit.com/event.htm"
matched[4]=0
title[5]="object model tree accessing forms "
desc[5]="Accessing and Validating Forms Using JavaScript (Part 1 of 2)"
links[5]="http://www.javascriptkit.com/form1.htm"
matched[5]=0
title[6]="form validation onBlur onSubmit"
desc[6]="Accessing and Validating Forms Using JavaScript (Part 2 of 2)"
links[6]="http://www.javascriptkit.com/form2.htm"
matched[6]=0
title[7]="date object write html setTimeout function"
desc[7]="Creating Time Dependent Scripts using JavaScript (Part 1 of 2)"
links[7]="http://www.javascriptkit.com/time1.htm"
matched[7]=0
title[8]="live clock watermark"
desc[8]="Creating Time Dependent Scripts using JavaScript (Part 2 of 2)"
links[8]="http://www.javascriptkit.com/time2.htm"
matched[8]=0
title[9]="image preload rollover effect filter"
desc[9]="Images and JavaScript- Apples and Apples (Part 1 of 2)"
links[9]="http://www.javascriptkit.com/image1.htm"
matched[9]=0
title[10]="rollover effect"
desc[10]="Images and JavaScript- Apples and Apples (Part 2 of 2)"
links[10]="http://www.javascriptkit.com/image2.htm"
matched[10]=0
title[11]="new window open secondary reload close toolbar menubar status bar "
desc[11]="Windows and JavaScript"
links[11]="http://www.javascriptkit.com/window.htm"
matched[11]=0
title[12]="frames access object multiple"
desc[12]="Loading Two frames with one link."
links[12]="http://www.javascriptkit.com/twoframes.htm"
matched[12]=0
title[13]="selection list options array text vale"
desc[13]="I'll hava a double combo please (Part 1 of 2)"
links[13]="http://www.javascriptkit.com/combos1.htm"
matched[13]=0
title[14]="combo link box jump"
desc[14]="I'll hava a double combo please (Part 2 of 2)"
links[14]="http://www.javascriptkit.com/combos2.htm"
matched[14]=0
<!-- End list of Searchable items -->
function search(){
// get the input from the input by the user and strip it into keywords //
var skeyword=document.searchengine.keywords.value.toLowerCase();
var check=1;
var pos=0;
var i=0;
var j=0;
var itemp=0;
var config='';
while (true)
{
if (skeyword.indexOf("+") == -1 )
{
keywords[check]=skeyword;
break;
}
pos=skeyword.indexOf("+");
if (skeyword !="+")
{
keywords[check]=skeyword.substring(0,pos); check++;
}
else
{
check--;
break;
}
skeyword=skeyword.substring(pos+1, skeyword.length);
if (skeyword.length ==0)
{
check--;
break;
}
}
// the keywords have been put in keywords object.
keywords[0]=check;
//alert(check);
// matching and storing the matches in matched
for ( i=1; i<=keywords[0];i++)
{
for (j=1;j<=title[0];j++)
{
if (title[j].toLowerCase().indexOf(keywords[i]) > -1 )
{
matched[j]++;
}
}
}
// putting all the indexes of the matched records in found
for (i=1;i<=title[0];i++)
{
if (matched[i] > 0 )
{
found[0]++;
// increment the found
found[found[0]]=i;
}
}
//alert("found 0 " + found[0]);
// sort the list as per max percentage of matches
for (i=1;i<=found[0]-1;i++)
{
for(j=i+1;j<=found[0];j++)
{
if ( matched[found[i]]< matched[found[j]] )
{
temp= found[j];
found[j]=found[i];
found[i]=temp;
}
}
}
config='toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
output = window.open ("","outputwindow",config)
output.document.write('<title> Atlantis Direct Search Result </title>');
output.document.write('<BODY bgcolor=#ffffff text=#000000 link=#990099 vlink =#339966 >');
output.document.write('<center> <h1> Search Results </h1></center>');
output.document.write('<hr>');
output.document.write(' The Keyword(s) you searched :: '.big() );
for (i=1; i<=keywords[0]; i++)
{
output.document.write( keywords[i].bold() +" "); }
output.document.write('<br>');
if (found[0]==0)
{
output.document.write('<hr>');
output.document.write("<b>No matches resulted in this search </b> <br>");
output.document.write("You may close the results and reduce the length/number of the keywords <br>");
}
else
{
output.document.write(" <hr> <b> The Results of the search are : </b> ");
output.document.write( found[0] +" Entries found ".italics());
output.document.write("<table border=1 width=100%>");
for (i=1; i<=found[0];i++)
{
output.document.write("<tr><td valign=topbgcolor=#9999ff>");
output.document.write("<h3>" +i +"</h3>"); output.document.write("<td valign=top>");
itemp=found[i];
output.document.write(desc[itemp].bold() +"<br>" +links[itemp].link(links[itemp])+"<br>");
temp= (matched[itemp]/keywords[0])*100
output.document.write("<i> Matched with keywords :: "+temp+" % </i>" );
matched[itemp]=0
}
found[0]=0;
output.document.write("</table>");
}
output.document.write ('This search was created by © Satadip Dutta 1997'); output.document.write ("<hr>");
output.document.write ("<form><center>");
output.document.write ("<input type='button' value='Start Another Search' onClick = 'self.close()'>") ;
output.document.write ("</center></form>");
output.document.close();
}
</script>
<head>
<body bgcolor="#ffffff">
<center>
<H1>Search Engine</H1>
</center>
<hr>
This is a search engine implemented in Javascript. You will need a
Java Script enabled browser to run this search.
<hr>
<P>
</P>
<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5>
<TR>
<TD WIDTH="20%" ALIGN="left">
This search is NOT case sensitive.
</TD>
<TD WIDTH="80%" ALIGN="left">
Put "+" between keywords in a list if using more than one keywords.
</TD>
</TR>
</TABLE>
<form name="searchengine">
<center>
Keywords:
<input type = text name ="keywords" placeholder ="Search..." value="" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
<br>
</center>
</form>
<hr>
<!-- you can write more text/instructions out here. -->
</body>
<html>
Some points to consider:
You forgot to set the type of your button to submit
Links are normally place on the <head>
You should give your form an action
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
...
<form name="searchengine" action="doSomething">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
</div>
Hope it helps.
This code works just fine. Your link is messed up, why is it just // instead of https://? Your links should be in the head, if they aren't they aren't loaded before the body, which causes a split second of unstyled content to show before it reaches the stylesheet. Your form should have an action to perform and your search button should be of the type submit so it's a submit button for the form.
The below code and jsfiddle work just fine if you want to try them out.
Also, Dreamweaver is not that impressive, I recommend getting Netbeans instead, it does the same job but for free (all you really want from your web IDE is code completion so you don't have to write as much, and both Netbeans and Dreamweaver does this equally well except that Netbeans is better for more all-around programming for all kinds of languages).
https://jsfiddle.net/vfmrc40k/
<html>
<head>
<!-- Links go in the head, they are not scripts and this makes them load before the body so that you don't get a split second of unstyled content showing -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function performSearch () {
alert('I am searching!')
// Use e.g. jQuery to get the value for the search box, it's easiest
}
</script>
</head>
<body>
<!-- Your form should have an action to perform, in this case a javascript function. It isn't just 'correct', it also makes it possible to press Enter to perform the search, because enter and the submit button both trigger the forms action. -->
<form name="searchengine" action="javascript:performSearch()">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
<!-- You forgot a </div> -->
</div>
</form>
</body>
</html>
Related
I am trying to compare two fields generated with Jinja, however, without the need of pressing the submit button.
I have used the included validators, standard if cases, etc. None of them work as expected, so I tried Javascript.
In general, I want to:
Compare two fields (domain/server). If their IP addresses are not exactly a 'Confirm' button should be shown.
In order to do that, I need to reload the server-side HTML.
Additionally, I am unable to figure out how to compare the two fields' IP addresses via Javascript.
Here is a sample code:
<div id="home" class="text-center">
Hello, {{ username }}
</div>
<body>
<input type="text" id="domain" size="30">
<input type="text" id="server" size="30">
{% if not compareArecords %}
<button type="button" class="btn btn-danger">Danger</button><br>
{%endif %}
</body>
<script>
document.getElementById("domain").addEventListener("keyup", compareArecords);
document.getElementById("server").addEventListener("keyup", compareArecords);
function compareArecords() {
var text1 = document.getElementById("domain");
var text2 = document.getElementById("server");
if (text1.value === text2.value)
return true;
else
return false;
}
</script>
What's typically done in order not to have to reload the html is to have the element hidden with css until you need to display it. In your example would be something like
<body>
<input type="text" id="domain" size="30">
<input type="text" id="server" size="30">
<button type="button" class="btn btn-danger hidden" id="btn-danger">Danger</button><br>
</body>
<script>
document.getElementById("domain").addEventListener("keyup", compareArecords);
document.getElementById("server").addEventListener("keyup", compareArecords);
function compareArecords() {
var text1 = document.getElementById("domain");
var text2 = document.getElementById("server");
if (text1.value === text2.value)
// Nothing to do here!
else {
var danger_btn = document.getElementById("btn-danger");
danger_btn.classList.toggle("hidden");
}
}
</script>
Css:
.hidden { display: none; }
It should be noted that you can also generate the Danger button entirely with javascript, and that's not overly complicated either, should you want to do that, but it has some drawbacks like separation of concerns.
I know this basic subject has been broached many times, and I have used code that has been posted from here in my own application. However, I have run into an error I just cannot resolve, and it is making me crazy. I have a form with two hidden controls (which have not been an issue in other forms), a file control, some standard input controls and a textarea ... (a sample of the form is below). When I use JavaScript (and Ajax) to try to submit it, I am getting an error that I cannot resolve:
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
Form:
<form class='form form-horizontal' method='post' action='' name='attachment_form' id='attachment_form'>
<input value=1 name='event_link3' id='event_link3' hidden />
<input value=9683 name='contributor_link3' id='contributor_link3' hidden />
<div class='row'>
<!-- file upload option -->
<div class='col-lg-5 col-11'>
<div class='form-group file-upload'>
<label>Select File to Upload:</label><br />
<input type='file' class='form-control' id='attachment_file'
name='attachment_file' accept='.pdf, .mp4, .mov, .avi, .f4v'
data-toggle='tooltip' data-placement='bottom'
title='File to be uploaded should be 'standard' video or pdf format'
/>
</div> <!-- / form-group -->
</div> <!-- // col-5 -->
<div class='col-1'> <a name='attachment_clear'
onclick='attachment_clear()'
class='btn btn-primary btn-md clearButton'
data-toggle='tooltip' data-placement='bottom' title='Clear Selection'
style='margin-left: -12px !important; margin-top: 40px !important;'>
<i class='fa fa-trash' aria-hidden='true'></i></a>
</div> <!-- // col-1 -->
<div class='col-lg-6 col-12'>
<label>Web Link/URL:</label><br />
<input type='url' class='form-control'
id='web_url' name='web_url'
data-toggle='tooltip' data-placement='bottom'
title='Web address must include http:// or https:// to be valid'
/>
</div> <!-- // col-6 -->
</div> <!-- // row -->
<div class='row'>
<div class='col-lg-6 col-12'>
<label>Short Description:</label>
<input class='form-control' name='short_description' id='short_description'
data-toggle='tooltip' data-placement='bottom'
title='A short description of the file (displayed for link)' required/>
<p class='help-block'><b>Short Description is Required</b> -- the text will be used
to display as text for the file link.</p>
</div> <!-- // col-6-->
<div class='col-lg-6 col-12'>
<label>File Description:</label>
<textarea class='form-control' name='description' id='description' rows=5 required></textarea>
<p class='help-block'><b>Description is Required</b> -- Describe the file or link in as much
detail as you need ... you can also format this to some extent (see toolbar)</p>
</div> <!-- // col-12-->
</div> <!-- // row -->
<button id='attachment_submit' name='attachment_submit' class='btn btn-primary' style='margin-top: 10px;'><i class='fa fa-upload'></i> Upload Attachment</button>
</form>
The Javascript code to deal with the form is based on code I have pulled here on StackOverflow, and has been working successfully in other places. I cannot see what is different or wrong with this ...
$("#attachment_form").submit(function(e)
{
e.preventDefault();
// first thing, clear out the message div used for this (if there's anything there):
document.getElementById("attachment_message").innerHTML = "";
// validation:
var filename_check = document.getElementById( "attachment_file" ).value;
var web_url_check = document.getElementById( "web_url" ).value;
if ( filename_check == "" && web_url_check == "" )
{
alert( "You must either select a file to upload or enter a web address ..." );
return;
}
// on the flip side:
if ( filename_check != "" && web_url_check != "" )
{
alert( "You must either select a either file to upload or a web address, not both ..." );
return;
}
// get value from TinyMCE
var description = tinymce.get('description').getContent();
// make sure it's in the textarea by the same name
document.getElementById( "description" ).value = description;
// this has always worked in the past, but having issues:
var formData = new FormData(this);
// this is where the error occurs when I open the web console of my browser
I am hoping someone has experience with this and can tell me what the error is, as I am completely stumped at this point. (I have checked "this.id" in an alert to be sure I am using the correct form ...)
The FormData call probably expects a DOM element and not a jQuery element. Try passing this[0] or this.get() to get the Html element of the form.
Okay, I found my problem (thanks to the suggestion to look at the output log by Art3mix above). The issue was that I had a surrounding div tag that was also called "attachment_form" (I have a collapsible (bootstrap 4) div that is opened with a button, and I didn't even think about the fact that I had named the form the same as the div). By changing that (and references to it) to "attachment_window" instead, that resolve the whole thing. Wow. Thanks for the suggestion to look at the console output log. I seldom, if ever, look at that.
I have a page with where mp3 products are being sold. Each page represents an album entity.
At a minimum each page contains an album product and at least one or more mp3âs available for purchase as a separate products.
Each album and mp3 product has itâs on form with an input[type=submit] button that functions as an âadd to cartâ button.
Some mp3âs have been designated as album only. This is done w/ markup via a span tag.
<span class=âalbum-only-tagâ>True</span>
Based on that markup, Iâm trying to write some javascript that will do 3 things:
⢠remove the table containing the price
⢠disable the submit button, so userâs cannot add to cart (they instead have to purchase the album).
â˘change the value of the input[type=âsubmitâ] to read as âalbum onlyâ.
Also, after code runs as per mp3 it needs to stop, and leave the other price table & âadd to cartâ buttons intact.
My jQuery code here is not working. My use of the next() function is incorrect i guess.
What jQuery function should i use to access the next table and the next form input[type=âsubmitâ] button in this markup?
btw - the markup here has been abbreviated.
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="ds- 1col node node--ltv-track-ii node-teaser node-product-type node--ltv-track-ii node-product-type-teaser node-ltv-track-ii-teaser view-mode-teaser node--teaser node--ltv-track-ii--teaser clearfix">
<span class="album-only-tag">True</span>
<table class="commerce-price-rrp-your-price">
<tr class="odd">
<td class="webprice-title">Price</td>
<td class="webprice-total">$5.95</td> </tr>
</table>
<div class="field field-name-field-product">
<form class="commerce-add-to-cart commerce-cart-add-to-cart-form-1909 commerce-cart-add-to-cart-form-1909" action="/ltvalbums/wah/lokaha" method="post" id="commerce-cart-add-to-cart-form-1909" accept-charset="UTF-8">
<div><input type="hidden" name="product_id" value="1909" />
<input type="hidden" name="form_build_id" value="form-qbskkxq4JIW0IEzmvAgwqow7QylhhgdtnfmqbHrdMe0" />
<input type="hidden" name="form_id" value="commerce_cart_add_to_cart_form_1909" />
<div id="edit-line-item-fields--2" class="form-wrapper"></div> <input type="submit" id="edit-submit--2" name="op" value="Add to cart" class="form-submit" />
</div>
</form>
</div>
Huge thanks for any help on this!
Here is you go,
$('.album-only-tag').each(function () {
var table = $(this).next('table');
var submitBtn = table.next('div').find('input[type="submit"]');
// disable the add to cart button
submitBtn.prop('disabled', true);
// change the text to "Album only"
submitBtn.val("album only");
// remove the table
table.remove();
});
I have a separate JavaScript file and I want to return the results of a function in a <p> tag. For example, in my js file I have:
var i=0;
function add(num) {
return i+=num;
}
How would I use that in a <p> tag in my HTML file? So if the function returned 5, the web page would show 5 where I placed the <p> tag.
Separate your HTML from your JavaScript. Don't think of the JavaScript as "in a <p> tag" because that's not really how JavaScript works. Instead, have some way to identify that <p> element and use JavaScript to target that element and set its content. For example, you might have this in your HTML:
<p id="target"></p>
Then in your JavaScript (likely at the end of the page), you'd have something like this:
document.getElementById('target').textContent = 'some value';
So if your value is i then:
document.getElementById('target').textContent = i;
1) Dynamic: If the value changes after the page has loaded, then use something like this:
function doCalc(nr) {
// get current value of <p> and parse it to an integer
var current_nr = parseInt(document.getElementById("result").innerHTML);
// add nr to current_nr and place back in the <p>
document.getElementById("result").innerHTML = (current_nr+nr);
}
<p id="result">0</p>
<input type="button" value="+ 1" onclick="doCalc(1);" />
<input type="button" value="- 1" onclick="doCalc(-1);" />
<input type="button" value="+ 10" onclick="doCalc(10);" />
<input type="button" value="- 10" onclick="doCalc(-10);" />
2) Static: Otherwise, if you just want to print out the value in the page once when loading, use this:
The first code has to go in the <head> section of the page:
<script type="text/javascript">
var the_variable = 0;
function something(nr) {
the_variable += nr;
}
something(2);
</script>
The second code goes into the <body> section of the page (where it is printed once, on load):
<p><script type="text/javascript">document.write(the_variable);</script></p>
All right. So I'm coding after A LOOONG TIME, and I just went on to codecademy to get a bit refreshed with javascript. So I learnt something I didn't know before : OOP.
Help. I tried something. Will include the JSfiddle. But I don't know why, it doesn't work.
Nevermind my Idiocy, I will complete the code as soon as I know what the problem in the prev code was. I have alot to do in that. I also want to learn PHP to make a kind of phone directory!
I have also NOT included the CSS, but that hardly matters.
What the code should do, is that everytime a user fills up the form and clicks submit, it should append the values in a '#results' div. Not doing anything. Help?
Also, nevermind the two password fields. I will write the code for validating the form once I am clear with this problem.
THANK YOU IN ADVANCE.
JSFIDDLE : http://jsfiddle.net/Ns66V/1/
HTML -- >
<html>
<head>
<link rel="stylesheet" href='style.css'>
<script type="type/javascript" src='jquery.js'></script>
<script type="type/javascript" src='js.js'></script>
<title>Form JS</title>
</head>
<body>
<div class='container'>
<h1>Create an ID! It's absolutely <strong>FREE!</strong></H1>
<div id='form'><form action='get'>
<input name='fname' type='text' placeholder='First Name'><br>
<input name='lname' type='text' placeholder='Last Name'><br>
<input name='email' type='email' placeholder='Email Address'><br>
<input name='passw' type='password' placeholder='Password'>
<input name='Again' id='last' type='password' placeholder='Again!'><br>
<select name='gender'>
<option value='male'>Male</option>
<option value='female'>Female</option>
<option value='other'>Other</option>
</select>
<div id='submit'><strong>SUBMIT IT!</strong></div>
</form>
</div>
<div class='results'>
<div class='vals' id='intro'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
<div class='vals'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
</div>
</div>
</body>
</html>
JS (JQuery) -->
$(document).ready(function(){
function Person(fname,lname,email,passw,gend){
this.fname = fname;
this.lname = lname;
this.email = email;
this.passw = passw;
this.gend = gend;
};
var numPeople = 0; //Setting the number of people var.
$('#submit').click(function(){
var fname = $('input[name=fname]').val(), //SETS VALUES OF ALL THE INPUTS
lname = $('input[name=lname]').val(), //SETS VALUES OF ALL THE INPUTS
email = $('input[name=email]').val(), //SETS VALUES OF ALL THE INPUTS
passw = $('input[name=passw]').val(), //SETS VALUES OF ALL THE INPUTS
gend = $('select[name=gender]').val(); //SETS VALUES OF ALL THE INPUTS
var People = new Array(); //Definin
numPeople++;
People[numPeople] = new Person(fname,lname,email,passw,gend);
$('.results').append(People[numPeople].fname + People[numPeople].lname + People[numPeople].email + People[numPeople].passw + People[numPeople].gend);
}); //#SUBMIT.CLICK() END
});
OOP isn't entirely needed in this case. The problems is that you need to use #results, and you need to close your button along with other tags.
HTML
<button id='submit' type='button'><strong>SUBMIT IT!</strong></button>
JS
$('#results').append(...);
Here is a Fiddle example, added a <br /> at the end.
Also get and post are for a forms method attribute. action is where the form sends the data. So you probably want:
<form method="get"></form>
Check http://jsfiddle.net/Ns66V/4/
The button tag was not closed and the content was appended to the button and
$('#submit').click(function()
should be replaced with
$('#submit').on('click', function()
Now seems to work.
Of course you should improve how you append the content though - use html tags to separate each information.