How to pass js variable into hidden form field? - javascript

I want to pass js variable into hidden form field value. I set value using php echo code but it is not working.
js variable :-
<script type="text/javascript"> var demo = 1; </script>
html :-
<input type="hidden" name="demo_val" value="<?php echo <script>demo</script>" id="demo_val"/>
and in js file call hidden field value :-
$('#demo_val').val();
but it is not working...
How to do it..?

Remove this <?php echo <script>demo</script> from hidden field and leave it blank.
Write followed code
var demo =1;
$('#demo_val').val(demo);
in your script.
You can get value by
var field_vemo = $('#demo_val').val();

Put
document.getElementById("demo_val").value = demo;
in your javascript section

you should pass the variable since javascript yo input hidden, not it´s good idea pass the variable with , you can use jQuery :
var demo = "hola";
$('#demo_val').val(demo);
Now input with name demo_val should have the value "hola"
If you like get the value you can
var valueDemo = $('#demo_val').val();

try this
<input type="hidden" name="demo_val" value="" id="demo_val"/>
<script type="text/javascript">
var demo = 1;
$(document).ready(function() {
$('#demo_val').val(demo);
});
</script>

Related

Assign dynamic value to an Input Field in HTML

I have an input field and I want to assign it a value dynamically fetched from DB. I will use that value later in a script. Here is my code below
<div data-ng-model="DashboardCounterItems">
<div data-ng-repeat="cItem in DashboardCounterItems">
<input type ="hidden" id ="myInput" value = {{cItem.dbMeetings.length}} />
</div>
</div>
Here {{cItem.dbMeetings.length}} is fetched from DB and assigned to myInput. Further when I check the value of this input in alert in script below, I get {{cItem.dbMeetings.length}} message instead of the value within it.
<script>
var iLenthv = document.getElementById("myInput").value;
alert(iLenthv);
</script>
Any help how can I do it. Or any other better way. I will really appreciate it.
I think your JS code will execute before DB data retrieval, can you check JS code within the setTimeout() Method?
<script>
setTimeout(function() {
var iLenthv = document.getElementById("myInput").getAttribute("value");
alert(iLenthv);
}, 3000);
</script>
Use .getAttribute() to get the value from a html attribute
function myFunction() {
var iLenthv = document.getElementById("myInput").getAttribute("value");
alert(iLenthv);
}
Hope it's helpfull
So we have to track the client side actual value, after the document is loaded. Would you adapt this piece of code and take a look at the console ?
<div data-ng-model="DashboardCounterItems">
<div data-ng-repeat="cItem in DashboardCounterItems">
<input type="hidden" id="myInput" value={{cItem.dbMeetings.length}} />
</div>
</div>
<script>
const test = () => {
var iLenthv = document.getElementById("myInput").value;
console.log("value:",iLenthv);
};
window.onload = test;
</script>

Passing input value via button click to php function in script

I need to use the value from an input field - without a POST - to do a lookup from an external source.
The input field has a button associated with it, which calls the script on button press. So I need to put the input field (id = 'lookup') into the function's parameter (the function is called within the script).
This is the code line in the script that needs the value from the input field (input field called 'lookup')
<?php $product_name = api_request(lookup);?>
My code is below.
(NB: I know about 'PHP is server side, JS is client site'. But the button click does call the PHP function, and the code does display the return value of the function if you do this instead:
<?php $product_name = api_request('1234');?>
which will return "My Product Name" via my api_request() function.)
What is needed to put a script variable in the api_request()'s parameter?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>Part Number = <input type="text" id="lookup" value= "12345"></p>
<button>Get product name for this part number</button>
<div id='product_name'>Product Name Goes Here </div>
<script>
$(document).ready(function(){
$("button").click(function(){
// returns value of input field
var lookup = document.getElementById('lookup');
// need to put the input field 'lookup' into the function's parameter
<?php $product_name = api_request(lookup);?>
var product_name = "<?php echo $product_name; ?>";
$('#product_name').text(product_name); // display it on the screen in that div ID
});
});
</script>
</body>
</html>
<?php
function api_request($partnumber) {
// code that returns the product name for that part number, hard coded here
$product_name = "My Product Name";
return $product_name;
}
As you already understand PHP is server and JS is client, you cannot directly use JS variables in PHP.
There are two ways by which you can.
$_POST which you already said you don't want to use. I assume the reason for not using $_POST is that browser prompts to continue refreshing page.
Use $_GET which will add a param in your url.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
<p>Part Number = <input type="text" id="lookup" name="lookup" value= "12345"></p>
<button>Get product name for this part number</button>
</form>
Additionally add this small line in the beginning of your file to access is as a PHP variable.
$lookup = $_GET["lookup"];
ajax is possible.
try this
create file : api_request.php
<?php
function api_request($partnumber) {
// code that returns the product name for that part number, hard coded here
$product_name = "My Product Name";
return $product_name;
}
$number = $_GET["part"];
$product_name = api_request($number);
echo json_encode(array( "product_name" => $product_name ));
And Modify the javascript with this
$(document).ready(function(){
$("button").click(function(){
// returns value of input field
var lookup = document.getElementById('lookup');
// need to put the input field 'lookup' into the function's parameter
$.get(`api_request.php?part=${ lookup.value }`,(resp)=>{
$('#product_name').text(resp.product_name); // display it on the screen in that
},"json");
});
});

pass JavaScript variable to HTML input box and (to use in PHP file)

I'm trying to pass a JavaScript variable to the value of an hidden input button to use in my PHP file output.
My HTML is:
<input type = "hidden" id = "location2" name = "location2" value = ""/>
I'm using this onclick="myFunction();" in my "Submit Form" input to run the function as it is not able to be done in the window.load()
My JavaScript below is calling indexes from another function and assigning the text to the variable 'location' (I know this sounds strange but it was the only way I have got it to work so far):
function myFunction() {
var x = document.getElementById("box2").selectedIndex;
var y = document.getElementById("box2").options;
var location=(y[x].text);
document.getElementById("location2").value=(location);
}
Any help would be hugely appreciated as I am really struggling and have been working on this for some time (as you can probably tell, I dont really know what I'm doing) - I just need to call the value of this variable into my PHP file output and the majority of my web form is completed.
Thanks very much
Marcus
I've just changed my HTML as follows
I've removed myFunction from my submit
I've added the following HTML button:
<button onclick="myFunction();" id = "location2" name = "location2" value="">Click me</button>
The variable is now passing!!!! The only problem is when I press the onclick button, it is now submitting my form!!
Is it okay for me to replace my previous submit button with this code??
THANKS TO EVERYONE FOR THEIR HELP ON THIS!!
I Was not sure what you doing but below example may help you. It will post the value as well as the option text.
Here we are using print_r to print the $_POST array from the AJAX Request. using this method, you should be able to debug the issue.
<!DOCTYPE html>
<html>
<body>
<?php if($_POST) {
print_r($_POST); die;
} ?>
<form name="" id="" method="post" >
Select a fruit and click the button:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<input type = "hidden" id = "location2" name = "location2" value = ""/>
<input type = "hidden" id = "locationname" name = "locationname" value = ""/>
<button type="submit" id="submit">Display index</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
//alert("Index: " + y[x].index + " is " + y[x].text);
document.getElementById("location2").value=(y[x].index);
document.getElementById("locationname").value=(y[x].text);
//alert($("#location2").val());
}
var submit = document.getElementById('submit');
submit.onsubmit = function(e){
myFunction();
};
</script>
</body>
</html>
i'm assuming your form method is 'POST' and action value is the same php page where you are expecting to see the 'location2' hidden input value, if that is the case, you can use $_POST['location2'] to get the value in that php page.
Yes it is fine to use button tag by default it acts like the submit button inside the form tag. You can also make it act like button(won't submit the form) by using the attribute type='button'.
Edited
button or input type='submit' can submit the form only when it is placed within the form tag(without javascript).
<form action='http://www.stackoverflow.com/'>
<button>stackoverflow</button> <!-- this works -->
</form>
<form action='http://www.stackoverflow.com/'></form>
<button>stackoverflow</button><!-- this won't work -->
var go = function() {
document.forms[0].submit();
};
<form action='http://www.stackoverflow.com/'></form>
<button onclick='go()'>stackoverflow</button><!-- still works -->

How to use global variable in a jquery function whose value was initially assigned on ready function

Here is my HTML code :
<input type="hidden" id="rowcountforuser" value="0"/>
<button id="buttonid" onClick="increaseRowCount()">submit</button>
Here is my jquery code :
<script type="text/javascript">
var countrows;
$(document).ready(function(){
countrows = parseInt(document.getElementById('rowcountforuser').value);
});
function increaseRowCount(){
countrows++;
alert(countrows);
}
</script>
I want that each time i clicked on 'Submit' button, value of 'countrows' variable should get increase, but application is each time displaying the value of 'countrows' as '1' in alert box.
Please suggest me where i am doing wrong?
Thanks
You can try this.
var countrows;
$(document).ready(function(){
countrows = parseInt(document.getElementById('rowcountforuser').value);
$("#buttonid").click(function(){
countrows+=1;
alert(countrows);
});
});
Here is working Jsfiddle link of code
Remove below line from your code
countrows = parseInt(document.getElementById('rowcountforuser').value);
And Replace it with
countrows = $("#rowcountforuser").val();
$("#buttonid").click(increaseRowCount);
Check this JSfiddle

How to select value in input field with jquery?

I'm trying to get the value in my input field to be put into my post statement to be sent to my php file to update the record without reloading the page. It works fine with static information that I put in but when I want to select what I have typed in the input box, i can't get it to work. Nothing happens.
<script src="../jquery.js"></script>
<script type="text/javascript">
function editItem() {
catno = $("#catno").attr('value');
id = $("#id").attr('value');
$.post('writeToDB.php', {
id: id,
catno: catno
});
}
</script>
</head>
<body>
<form id="foo">
<input type="hidden" value="<?php echo $row_Recordset1['ID']; ?>" name="id"
id="id" />
<input type="text" value="<?php echo $row_Recordset1['CAT_NO']; ?>" name="catno"
id="catno" onchange="editItem();" />
</form>
I'm new to this javasrcipt world and jquery but I'm at the piont of pulling my hair out. I'm probably doing something really stupid
Thanks
Change
catno = $("#catno").attr('value');
id = $("#id").attr('value');
to
var catno = $("#catno").val();
var id = $("#id").val();
Use .val() to retrieve the value of an input.
You should also prefix your locally declared variables with var - this question/answer has a good explanation why
call val() method
id = $("#id").val();
val() method get the current value of the first element in the set of
matched elements
so your code will be
function editItem() {
var catno = $("#catno").val();
var id = $("#id").val()
$.post('writeToDB.php', {
id: id,
catno: catno
});
}
Use .val() :
http://api.jquery.com/val/

Categories