How to get the value of textfield using jquery and assign it to php variable
Question
I have a simple web page which takes the value from the input box and passes it to the next page or form. Only problem is I don't know how to use jquery to get the value and assign it as a php value. I want to pass this value in into the URL
This is my code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<?php
print
"<input type='text' class='form-control' id='usr'>".
"<a href='calculate.php?id={45}&tt='><button class='btn btn-success'>Calculate</button></a>";
?>
How do I pass the result value to "<a href='calculate.php?id={45}&tt='> , where tt is the value of the box?
Thanks
2 answers
solution1
0 2016-04-06 19:56:55
You should use a function to get the value and change the button to use that function:
So your final php code would be:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
function calculate() {
var tt = $("#usr").val();
location.href = "calculate.php?id={45}&tt=" + tt;
}
</script>
<input type='text' class='form-control' id='usr'>
<button class='btn btn-success' onclick="calculate()">Calculate</button>
I removed the <php? print... <php? print... because it's just plain html.
solution2
0 2016-04-06 20:32:51
Using jquery is very simple for such scenario.
<?php
print
"<input type='text' class='form-control' id='usr'>".
"<a id='button' href='#'><button class='btn btn-success'>Calculate</button></a>";
?>
Here I have added id attribute to your anchor tag or link whatever you call it.
Now the jquery part:
<script type="text/javascript">
$(document).ready(function(){
var usr = $("#usr").val();
$("#button").attr("href","calculate.php?id={45}&tt="+usr);
});
</script>
Or If you want the url to be changed when the value of that particular text field changes then you may try following.
<script type="text/javascript">
$(document).ready(function(){
$("#usr").change(function(){
var usr = $("#usr").val();
$("#button").attr("href","calculate.php?id={45}&tt="+usr);
});
});
</script>
Hope this helps. If you want to learn more about jquery change event then you can have a look at jQuery Change Event
********** Editing from here ************
<!DOCTYPE html>
<html>
<head>
<title>Whatever your title is</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<?php
print
"<input type='text' class='form-control' id='usr'>".
"<a id='button' href='#'><button class='btn btn-success'>Calculate</button></a>";
?>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#usr").change(function(){
var usr = $("#usr").val();
$("#button").attr("href","calculate.php?id={45}&tt="+usr);
});
});
</script>
</body>
</html>
So the whole file will look like bellow
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.