Passing javascript variable to html textbox - javascript

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;

Related

Pass a global javascript variable into argument of an action form

I would like to include a global javascript variable that it is dynamically updated into the argument of an action form.
Previously, I was simply using django template syntax to include the django variable string returned by the view into the action form but now that it is updated I need to come up with a way to pass this updated javascript variable into the GET method.
I save the variable as a window property "window.subgraph_query = 'foo'" this variable is supposed to change over time so it needs to be updated also in the form argument as well. How can I reach this? I think it should be easy
Thank you!
<script type="text/javascript">
// BEFORE
var subgraph_query = "{{ subgraph_query }}";
//NOW
window.subgraph_query = "{{ subgraph_query }}";
</script>
// BEFORE
<form action="/graph/network_to_gml/{{ subgraph_query }}" method="get">
<input name="export-node-list" id="export-node-list"type="text"/>
</form>
// NOW
<form action="/graph/network_to_gml/JAVASCRIPT_VARIABLE" method="get">
<input name="export-node-list" id="export-node-list"type="text"/>
</form>
You need to add a hidden input field to your form and assign a value of a js variable. this way it won't be visible for a user but your script will receive it.
Example of a hidden field type:
<input type="hidden" name="country" id='hidden1' value="">
and in JS:
document.getElementById('hidden1').value = 'Poland';

Access HTML form submitted value from a different javascript file?

EDIT: Rephrased the question so that it is less ambiguous.
I have two HTML files, x.html and y.html, and I have two javascript files, x.js and y.js. I have a form in x.html like so:
<form action="y.html">
<input type="text" value="Blank." />
<br />
<input type="submit" />
</form>
Note that x.html and x.js work together, and y.html and y.js work together.
I want to access the value that a user submits into this form from y.js. How do I do this?
Thank you!
You can use window.sessionStorage or window.localStorage to keep String data across page loads on the same origin.
In x', where formElement is a reference to the <form> and textElement is the <input> or <textarea> reference, set up an event handler using node.addEventListener(event_type, handler) for when the <form> is submitted
formElement.addEventListener('submit', function (e) {
window.sessionStorage.setItem('foobar', textElement.value);
});
In y' you can then access
var foobar = window.sessionStorage.getItem('foobar');
if (foobar === null) console.warn('nothing got set on x :(');
So, below is the source of a.html, use get method to send the data to b.html, and after redirect, the data of the form will be available in the query string like /b.html?ta=sfsdfsdfsdfs
<form action="b.html" method="get">
<textarea name="ta" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit" id="subBtn">
</form>
You could use any the query string, or GET parameters to do so.
In the form on page x you can use define method as GET and when this form is submitted it will be directed to an address which includes your variable and parameter passed by the user. Now in page y you can just use window.location.search value and use the variable.
Also, you can make use of cookies and do the same.
If possible describe your problem in more detail so that one could post a relevant solution.

Get Input Value on the same page with PHP?

Well, first i'm new in PHP. Is there a way to get the input value from a existing input on the page on page load with php and pass it to a variable?
For example i have this input: <input type="text" name="g_id_p" id="example1" value"foo">
I want to do something like this: $got_it = $_GET['g_id_p'];
Sorry again if i wrote my code wrong, im noobie on this. Hope to someone help me.
First, would be great to know what method is the form. (GET or POST)
Then after know what type of method you could call it in PHP:
METHOD POST:
<input type="text" name="g_id_p" id="example1" value"foo">
$variable = $_POST['g_id_p'];
METHOD GET:
<input type="text" name="g_id_p" id="example1" value"foo">
$variable = $_GET['g_id_p'];
If you haven't defined a method, in html the tag for a form is:
<form>
<!-- Here goes your input and some stuff -->
</form>
Then it would be something like:
<form name="form_name" class="form_class" id="form_id" method="TheFormMethod" action="ThePageThatExecutesThisForm">
<!-- Here goes your input and some stuff -->
</form>
TheFormMethod can be post, get, delete, put.
You can't really get an associated value of an input tag within the same PHP page but what you can do is set the value of a variable beforehand.
What I mean is, create an array that will store all the values of all the input tags.
$inputValues = array();
$inputValues['g_id_p'] = 'foo';
Then when you have the tag later on just echo it from the PHP var.
<input type="text" name="g_id_p" id="example1" value="<?php echo $inputValues['g_id_p']; ?>">
As you can see, we aren't really 'getting' the value that you set but the end result is the same.
You have to check if the values is set isset(), where you want to use the variable do:
if(isset($_GET['g_id_p'])){
//your code
}

Get variable by user input and use the variable in form URL

I have a problem with using variables in URL's. The reason I need to do this in JavaScript is because I can't use PHP (Phonegap).
<form action="https://website.com/login.dll?Logon" method="post" id="logonForm">
<input type="hidden" id="curl" name="curl" value="Z2FZ2Fexample.phpZ3FZ26idZ3D<?php echo $_SESSION['user_email'];?>Z26typeZ3D0" />
This works, but now I am using Phonegap so I can't use PHP, So I need to get a variable set by the user and then use that variable in the URL (instead of the php echo) I guess. I'll still be using the same form.
So I need the user to enter the info I need and pass that to a variable,
<input id="data" type="text" name="data" placeholder="Placeholder" required />
What is the best way of doing this in Javascript?
Add another attribute to the form
onSubmit = 'setCurlValue();'
Add code for setCurlValue
function setCurlValue() {
$('#curl').val('Z2FZ2Fexample.phpZ3FZ26idZ3D'
+ $('#data').val()
+ ';?>Z26typeZ3D0');
}

How can I pass variables to another page using a button?

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>

Categories