Develop Reference

Using a Form to Dynamically Change the URL in the Address Bar Part 2

Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...

any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>

It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

Translating Google Chrome Extension HTML Form

I have a Google Chrome extension with a HTML form in it that goes as follows
<form action="http://www.geocaching.com/track/details.aspx?tracker=" method="get" class="f" target="_blank">
<input type="search" name="tracker" placeholder="Tracking Number" maxlength="10"/>
<input type="submit" class="btn search-submit" value="Search">
</form>
I need to translate the placeholder and value tags within the form but I can't figure out how to translate items that are in a HTML tag. I have successfully translated plain text elsewhere in the HTML file using JavaScript chrome.i18n.getMessage("name"), but I don't know how to apply that to the HTML form.
Any help would be greatly appreciated

setattribute function can be used for changing attribute value.
var element = document.getElementByName("tracker");
element.setAttribute("placeholder", "attributeValue");
var element = document.getElementsByClassName("btn search-submit");
element.value("attributeValue");

How to generate a custom URL from a html input?

I want to create a search bar which takes in a query and adds the rest of the URL then goes to the site. For example
Input: walmart
Output: http://www.example.com/?t=w&p=0&q=walmart
then the program navigates to the link that is generated. This is like how Google Chrome's omnibox works.

just simple html form
<form method="GET" action="http://www.example.com/">
<input type="text" name="q">
<input type="hidden" name="t" value="w">
<input type="hidden" name="p" value="0">
</form>

Here's something I made for my site:
trapper.site90.net/luckysearch
You may use my code if you want. I tested it. Just use inspect element on my page. :D

Google search box only works 50% of the time

I'm writing a new tab extension for Firefox, and I'd like to have a box that you can type in and have it search Google. I really don't want to use a custom Google search, just because I feel like it's inconsistent and seems cheap.
All that it's supposed to do is add your query to the end of the google URL (in the correct formatting, of course) and redirect you to that page. I have it working sometimes, but not all of the time.
Here's the code I have:
JS:
var textstring;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com/search?q="+textstring;
}
//main function to run everything
function main() {
getQ();
googleSearch();
}
HTML:
<form name="Search" >
<div id="test1">
<input type="text" name="q" size="31" maxlength="255" value="" />
</div>
<div id="test2">
<input type="button" value="Google Search" onclick="main();" />
</div>
</form>
Not sure why that last /form isn't showing up, but that's in there just so you guys know.
It works like 25% of the time. I can't figure out what's wrong with it. Could it just be that I'm testing it locally? I've been testing it in Firefox, but it seems to have the same issue in IE or Chrome, as well.

Why don't you just submit to google (and avoid all the javascript) ?
<form name="Search" method="get" action="http://www.google.com/search" >
and use a normal submit button like
<input type="submit" value="Google Search" />
Since you have named the input element q and the method of the form is get it will create the correct url.
example: http://jsfiddle.net/gaby/gxun9/