We Keep Coding

Form won't call javascript function when I press enter

<form id="search" onSubmit="go()">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="button" value="Go" class="go" id="go" onclick="go()">
</form>
I have the function in an external javascript document that I have sourced at the bottom of my webpage, the function works when I click the submit button, just not when I hit enter.
My go function:
function go() {
var input = document.getElementById('searchbar').value;
var words = input.split(" ");
var wordsLength = words.length;
var searchWords = '';
if(words[0] == 'search' || words[0] == 'Search') {
for(var x = 1; x < wordsLength; x++) {
searchWords += words[x];
if(x == wordsLength-1) {
} else {
searchWords += '+';
}
}
window.location.replace("http://www.google.com/#q=" + searchWords);
} else if(words[0] == 'navigate' || words[0] == 'Navigate') {
for(var x = 1; x < wordsLength; x++) {
searchWords += words[x];
if(x == wordsLength-1) {
} else {
searchWords += '+';
}
}
window.location.replace("http://www.google.com/maps/place/" + searchWords);
}
}

You need to change
<input type="button" value="Go" class="go" id="go" onclick="go()">
to
<input type="submit">

<form id="search" onsubmit="go()">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="submit">
</form>

Your id of the button and the function name is same change one of those.
<form id="search" onSubmit="go()">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="button" value="Go" class="go" id="_go" onclick="go()">
</form>

Try this, it is working.
HTML
<form id="search" onSubmit="return false">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="button" value="Go" class="go" id="go">
</form>
JavaScript
$('form').keypress(function (e) {
if (e.which == 13) {
go($('#searchbar').val());
$('form#search_form').submit();
return false;
}
});
function go(keyword){
alert('Your search keyword is [' + keyword + ']');
}
Live Example

Try using jQuery solution.
<form id="search">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="submit" value="Submit">
</form>
On Form Submit call go().
$(document).ready(function() {
$('#search').submit(function() {
//Add code from go() or just call go()
});
});
UPDATE :
<form id="search" onSubmit="go()">
<input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
<input type="submit" value="Submit">
</form>
Jquery Part.
$(document).ready(function() {
$('#searchbar').live("keypress", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
e.preventDefault();
e.stopPropagation();
$(this).closest('form').submit();
}
});
});

Reference Textarea W/ Input

I am looking to build a simple webpage that can check to see if a string contains certain information. I'm taking a summer course in Java and wanted to give Javascript a try. Maybe a bad idea?
I want the user to enter information - name, phone number, and a couple other options in a form. Then I want the user to enter more information in the text area. The text area will reference the input data and if there is a match it will alert the user.
I have limited javascript experience, but I've been able to manipulate user input with javascript in the past.
Not sure what my problem here is. Any tips (especially regarding style and logic) are greatly appreciated! PS - I'm using Bootstrap if that matters...
Thanks in advance :)
HTML
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="GetInput();Check();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
JS
GetInput()
{
var tNameValue = document.getElementById("Name").value;
var tValue = document.getElementById("Number").value;
var tArray = document.getElementById('LongText').value.split('\n');
}
Check( tArray, tNameValue, tValue )
{
for(var i = 0; i < tArray.length; i++ )
{
if( i === tNameVaue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match" <br />;
}
if( i === tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match" <br />;
}
}
}
*

Your javascript has many things wrong. Here is the HTML and the Javascript. The logic must be improved but the code is working.
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="ExecuteAll();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
And here is the Javascript:
var tNameValue;
var tValue;
var tArray;
function ExecuteAll()
{
GetInput();
Check();
}
function GetInput()
{
tNameValue = document.getElementById("Name").value;
tValue = document.getElementById("Number").value;
tArray = document.getElementById('LongText').value.split('\n');
}
function Check()
{
if (tArray != null) {
for(var i = 0; i < tArray.length; i++ )
{
if( i == tNameValue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match <br />";
}
if( i == tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match <br />";
}
}
}
}
I will tell you what I did to fix the bugs:
Added function keyword to the javascript functions.
Put the variables as global so they can be used for the whole code.
Verified whether tArray is not null.
Fixed variable names.
Here is the Fiddle code: http://jsfiddle.net/3U6mE/6/
I hope it helps you get started.

Javascript/Php Chat - Enter isn't work in one textbox

So I made a chat with textboxs. If I press ENTER the chat send the message. It's fine, but in "Warning" thing this isn't work. When I'm pressing Enter, it isn't work. Can someone help me?
//This is for normal users:
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
<br>
//This is for moderators:
<form name="moderating" method="post" action="">
<hr align="center">
<br>
<p><b>Write in color:</b></p>
<script type="text/javascript" src="color_picker/jscolor.js"></script>Select color: <input class="color" name="color_value" type="text" id="color_value" value="FF0F0F">
<input name="colormsg" type="text" id="colormsg" size="25" />
<input name="submitcolormsg" type="submit" id="submitcolormsg" value="Send" />
<br><br>
<p><b>Warning</b></p>
//Is this wrong?! :
<input name="warningmsg" type="text" id="warningmsg" size="63" />
<input name="submitwarningmsg" type="submit" id="submitwarningmsg" value="Warning" />
<br><br>
<p><b>Clear chat log</b></p>
<input name="clear_button" type="submit" id="clear_button" value="Clear" />
<br><br>
<p><b>Turn on/off chat</b></p>
<input type="radio" name="chat_status_group" id="on" value="on" checked><b>On</b> -<input type="radio" name="chat_status_group" id="off" value="off"><b>Off</b> <input name="chat_status_button" type="submit" id="chat_status_button" value="Ok" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("***.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
$("#submitcolormsg").click(function(){
var clientcolormsg = $("#colormsg").val();
var color = $("#color_value").val();
$.post("***.php", {
text: clientcolormsg,
color: color
});
$("#colormsg").attr("value", "");
return false;
});
//And here is the wrong?! :
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
$("#clear_button").click(function(){
$.post("clear.php");
return false;
});
$("#chat_status_button").click(function(){
var statusmsg = "on";
if(document.getElementById('on').checked) {
statusmsg = "on";
} else {
statusmsg = "off";
}
$.post("chat_status.php", {
text: statusmsg
});
return false;
});
.
.
.
});
</script>
</body>
</html>
I think the problem is here:
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
why
$("#warningmsg").attr("value", "");
isn't work?

It doesn't work because you are only checking for a click, not submit. Try changing the last code to:
$("#submitwarningmsg").submit(function(e){
e.preventDefault();
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").val("");
return false;
});
Besides, you are forgetting to open your form in the last 'form':
<form>

multiple forms with javascript

I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}

A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>

Combining javascript functions

hi i am using javascript function to balnk ma textboxes when its clicked, initially the text boxes contain their respective label names, eg: Client Name, Company etc. When the text box is clicked it makes the text box empty so data can be types. for this i am using a javascript function and for each textbox i have to have a seperate function, can anyone tell me how i can combine all these function, the only different thing in each function is the value used in the textbox and the textbox name.
The Javascript function
function clientnameclear() {
if(document.bunkerfrm.clientname.value=="Client Name") {
var bunkerfrm = document.bunkerfrm.clientname.value="";
var bunkerfrm = document.bunkerfrm.clientname.focus();
}
else {
var bunkerfrm = document.bunkerfrm.clientname.focus();
}
}
function clientnamereset() {
if(document.bunkerfrm.clientname.value=="") {
var bunkerfrm = document.bunkerfrm.clientname.value="Client Name";
}
}
function vesselnameclear() {
if(document.bunkerfrm.vesselname.value=="Vessel Name") {
var bunkerfrm = document.bunkerfrm.vesselname.value="";
var bunkerfrm = document.bunkerfrm.vesselname.focus();
}
else {
var bunkerfrm = document.bunkerfrm.vesselname.focus();
}
}
function vesselnamereset() {
if(document.bunkerfrm.vesselname.value=="") {
var bunkerfrm = document.bunkerfrm.vesselname.value="Vessel Name";
}
}
function compclear() {
if(document.bunkerfrm.company.value=="Company") {
var bunkerfrm = document.bunkerfrm.company.value="";
var bunkerfrm = document.bunkerfrm.company.focus();
}
else {
var bunkerfrm = document.bunkerfrm.company.focus();
}
}
function compreset() {
if(document.bunkerfrm.company.value=="") {
var bunkerfrm = document.bunkerfrm.company.value="Company";
}
}
The Html Code is
<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" class="txtbox" value="Client Name" onmousedown="clientnameclear()" onclick="clientnameclear()" onblur="clientnamereset()" />
<br /><br>
<input type="text" name="company" class="txtbox" value="Company" onmousedown="compclear()" onclick="compclear()" onblur="compreset()" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
</form>

First, store the default values somewhere, such as the alt of the given input.
<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" alt="Client Name" class="txtbox" value="Client Name" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="text" name="company" class="txtbox" alt="Company" value="Company" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
</form>
Then pass the input element this as the parameter to these onfocus/onblur functions:
function clear_text(elem)
{
if (elem.value == elem.alt)
elem.value = "";
}
function reset_text(elem)
{
if (elem.value == "")
elem.value = elem.alt;
}
Which will clear the input when it gets focus if its value is the same as the placeholder stored in the alt attribute. The event onblur will trigger the reset_text function which will check if the value is empty and restore it to the default placeholder stored in the alt attribute.

Use placeholder:
<input type="text" name="clientname" placeholder="Client Name" class="txtbox" />
<br /><br>
<input type="text" name="company" class="txtbox" placeholder="Company" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" placeholder="Send Your Inquiry" /><br>
</form>

I suggest you use and/or study existing libraries, such as:
In-Field http://fuelyourcoding.com/scripts/infield/
ClearField http://labs.thesedays.com/projects/jquery/clearfield/