I have a variable var somewhere along my js program. lets call it 'tempVar'.
I want to pass this variable when the button is being pushed. here is part of my code:
var TempVar=9;
<form id="boardButton" action="/test" >
<button id="joinBoardButton" >JOIN</button>
</form>
how can I pass to the page test the content of Tempvar?
You can use the onclick attribute. Then once in JavaScript you can then seek out the values you need. If they are on the page already you can use document.getElementById(someID) to get the element, then grab your value that way.
You can also use the this keyword to access the DOM element just clicked. See : what's “this” in javascript onclick?
EDIT :
As for getting a variable you alreday had, if it has a large scope you can just access it directly.
Another way of doing this, is to save the value you want to re-use in a hidden input of your site and re-use when needed.
Hope this helps!
Assuming var is defined globally (on the window object):
<form id="boardButton" action="/test">
<input type="hidden" name="var"/>
<button id="joinBoardButton" onclick="this.form.elements['var'].value=window.var">JOIN</button>
</form>
You can add an input hidden value to your form
<input id="var" type='hidden' name='country' value=''>
Then you can set the value with onclick when you submit the form :
<button id="joinBoardButton" onclick="this.document.getElementById('var').value=var" >JOIN</button>
This should submit the form with the TempVar in the query string: .../test?TempVar=ABC
<script>
var TempVar = "ABC";
function setVar() {
document.getElementById('TempVar').value=TempVar;
}
</script>
<form id="boardButton" action="/test" >
<input type="hidden" id="TempVar" name="TempVar" value=""/>
<input type="submit" id="joinBoardButton" value="JOIN" onclick="setVar();"/>
</form>
Related
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).
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.
i need help on html form.
I got a javascript variable, and I am trying to pass the variable to a html form texbox. I want to display the variable on the textbox dynamically. but i do not know how to pass the variable to the html form and call the variable?
var test;
<INPUT TYPE="TEXT" NAME="lg" VALUE="" SIZE="25" MAXLENGTH="50" disabled="disabled"><BR><BR>
How do i pass test to html form and change its value?
Thanks
Pass the variable to the form element like this
your form element
<input type="text" id="mytext">
javascript
var test = "Hello";
document.getElementById("mytext").value = test;//Now you get the js variable inside your form element
<form name="input" action="some.php" method="post">
<input type="text" name="user" id="mytext">
<input type="submit" value="Submit">
</form>
<script>
var w = someValue;
document.getElementById("mytext").value = w;
</script>
//php on some.php page
echo $_POST['user'];
instead of
document.getElementById("txtBillingGroupName").value = groupName;
You can use
$("#txtBillingGroupName").val(groupName);
instead of groupName you can pass string value like "Group1"
This was a problem for me, too. One reason for doing this (in my case) was that I needed to convert a client-side event (a javascript variable being modified) to a server-side variable (for that variable to be used in php). Hence populating a form with a javascript variable (eg a sessionStorage key/value) and converting it to a $_POST variable.
<form name='formName'>
<input name='inputName'>
</form>
<script>
document.formName.inputName.value=var
</script>
You could also use to localStorage feature of HTML5 to store your test value and then access it at any other point in your website by using the localStorage.getItem() method. To see how this works you should look at the w3schools explanation or the explanation from the Opera Developer website. Hope this helps.
document.getElementById("txtBillingGroupName").value = groupName;
I need to get the value from the parent form into the child; not the other way around. Found many a howto from child to parent but that doesn't work for me. I have an onclick event in the input button but I'm unsure how to get the value from this calendar into the child window from here.
<form method="post" action="">
<p style="padding:10px;">
<input type="text" id="date" name="date" value="" maxlength="10"> <img src="calendar.gif" class="cp_img" alt="Open Calendar" style="padding-bottom:3px;"><br /><br />
<input type="submit" name="search" value="Submit" onclick="popWindow('search.php')">
</p>
</form>
You can use QueryStrings like this -
<input type="submit" name="search" value="Submit" onclick="popWindow('search.php')">
You can read the QueryString values using utilities like this one.
EDIT
function popWindow(windowUrl) {
var dateVal = document.getElementById("date").value;
window.open(windowUrl + "?dateValue=" + dateVal); //This will open the window with the URL like search.php?dateValue=1/1/09.
}
If you are opening a window using window.open you can pass value to it using
Querystring
like
search.php?ValueToPass=value
and read from the popup using
Request.QueryString["ValueToPass"]
or read value from pop up using
window.opener object.
This returns a reference to the window that opened this current window.
Eg:
window.opener.document.getElementById('<%=text.ClientID%>').value
Edit:
From PHP you can get the querystring variable. Take a look at
PHP $_GET Function
I have a form in HTML with multiple inputs of type submit:
<form id = "myForm1" action="doSomethingImportant/10" class="postLink" method="post">
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
<input type="submit" value="clickThisLink"></input>
<input type="submit" value="Don'tclickThisLink"></input>
</form>
What I want to do is select only the first input with type submit while ignoring the others, the snippet of code I currently have is as follows, note it is within a for-each loop that goes through all forms on my page, hence (this) to avoid confusion:
var name = $(this).find("input[type='submit']").val();
I'm thinking this already grabs the first input of type submit by default, I'm not sure if that assumption is correct or if there's a more formal way of going about it, thanks.
Try:
$(this).children("input[type='submit']:first").val();
how about the first selector
var name = $("input[type='submit']:first").val();