We Keep Coding

pass variable between two .html pages

I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?

Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).

Merging search terms from 2 separate input fields

So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home

You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.

JQuery - Submit array of data along with a form

I have form on the page, in the background I gather make an array of data that I want to pass to a back end controller. I can $post but I don't want the request to be ajax. I want to submit the array along with form, when the user presses the submit button. Does Javascript allow this anyway?

You can use iframe if you donot want to use ajax.
To POST to an iframe you must use form target.
Sample code :
<form
id="moodleform" target="iframe"
method="post" action="http://www.example.com/login/index.php"
>
<input type="hidden" name="username" value="guest"/>
<input type="hidden" name="password" value="guest"/>
<input type="hidden" name="testcookies" value="1"/>
</form>
<iframe name="iframe"></iframe>
<script type="text/javascript">
document.getElementById('moodleform').submit();
</script>

Why not have a hidden field that you populate with a serialized version of the data?
Alternatively, you could have multiple hidden input form elements with the same name, which (back-end application dependant) should give you the POST variable as an array of values.
Building on that, you could add the hidden input elements dynamically to the form.

How to populate input text field data based on button pressed

In my project i have 10 products for every product i have button called info, if i click on a info button a form popups in that i wanted to fill the first field(product name) automatically ....lets say for product soap i have info button
`info`
In the form
`<form>
<input type="text" id="product_name">
<input type="text" id="number">
</form>`
I want the field Product_name to be filled automatically based on button pressed
so how to get this ..plz help
i tried using
info
and my js
function reply_click(clicked_id)
{
//alert(clicked_id);
if(clicked_id == "1")
{
document.getElementById(product_name).value='Soap';
}
else
{
alert("button not pressed");
}
}
i tried this logic for example, i am able to read button click but iam unable to write to form...
some one please help me out
Thank you in advance

You are using id without quotes product_name but 'product_name'
should be
document.getElementById('product_name').value='Soap';
instead of
document.getElementById(product_name).value='Soap';

As stated by Suman, you need to provide 'product_name' as a string to getElementById(). Here is a working example of your approach: http://jsfiddle.net/CTnFt/
But since you will likely have many of these tags for many products, a simpler solution might be to place the value in a data- attribute of your tag and read it in your javascript function, instead of a larger, harder to maintain collection of if/elses. Here is a working example: http://jsfiddle.net/Rc9MG/
info
<form>
<input type="text" id="product_name" />
</form>
<script type="text/javascript">
function reply_click(element)
{
document.getElementById('product_name').value = element.getAttribute('data-product-name');
}
</script>

Hidden fields in AngularJs

How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/

If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS

If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}

In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.

You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.

Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!

Use ng-binding="{{employee.data}}". It will work properly.

I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.