I have a text box in a webpage and i want when the user type something in it, display it with no refresh.
My php file that get data from user and display it:
<?php
$text = $_GET['text'];
echo $text;
?>
and the html file:
<form method="Get">
<input type="text" name="text">
</form>
How can make it type $text when the user type in input.
What is the point use PHP and AJAX in this case? If you don't store any data from user type in database, I can not see the shuffle.
You can use simple JavaScript function to read a value of input and set it as innerHTML of any element.
Look on this JavaScript:
document.querySelector('input[name="text"]').addEventListener('keyup', function(e){
const input = e.target;
document.querySelector('#result').innerHTML = input.value;
})
and this HTML structure:
<form method="Get">
<input type="text" name="text">
</form>
<div id="result"></div>
In you types in input, it's automatically supplements [id="result"] with value.
This is working demo: https://jsbin.com/hadevocoqo/edit?html,js,output
Greetings, plum!
Kindly use javascript(AJAX) for this process.
All you need to do is keep the php file in a separate file and use AJAX to connect it.
<form method="Get">
<input type="text" name="text" onKeyUp="makeAjaxCall()" id="input">
</form>
<script>
function makeAjaxCall() {
let input = document.getElementById('input').value;
if(input){
// make the ajax function call here
// Ajax response is injected into the document using innerHTML.
connectViaAJAX();
} else {
// no input is provided.
}
}
function connectViaAJAX() {
// write ajax here
}
</script>
There are other javascript libraries out there that you can check out
Angular: http://angular.io/
VueJs: https://vuejs.org/
ReactJs: https://reactjs.org/
and many more.
You can visit : https://w3schools.com for more programming tutorials
Related
I am trying to send data from to the using PHP script. I use jqCron My problem is that I have dynamic SPAN value, but value of this span is not being sent using post function. I can not get the value
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$TiData = !empty($_POST['BCTiData']) ? $_POST["BCTiData"] : '';
echo $TiData;
}
?>
This is form
<form id="fo1" action="#" method="post">
<div class="timer"> </div>
<input type="text" class="form-control" id="BCTiData" name="BCTiData" value="<span class="timer-span"></span>">
</form>
also I trying this method:
$degerSpan = '<span class="timer-span"></span>'; // Not working
How can I get the data in Span and how can I send with POST?
Thanks
also I put it here Pastebin
You need to use javascript to extract the value from the SPAN element, then put it in a hidden form field, and then submit the data.
This could be done in several ways. Here is some mockup code that should get you started:
<!-- the Span that will contain the data we're interested in -->
<span class="cronMDMtimer-span"></span>
<!-- The HTML Form that will submit the timer value, this is populated using javascript -->
<form onsubmit="myFunction()" id="my-form">
<input type="hidden" name="timerValue" id="timerValue" value="not yet defined">
<input type="submit">
</form>
<script>
// This function gets called once the user submits the form
function myFunction(){
// First get the value from the cronMDMtimer-span
timerValue = $('.cronMDMtimer-span').html();
// Then store the extracted timerValue in a hidden form field
$("#timerValue").val(timerValue);
// submit the form using it's ID "my-form"
$("#my-form").submit();
}
</script>
I am limited by pre-existing constraints and need to keep the structure the same for this project. I am generating forms using PHP and populating the page as needed from them.
I have a customer information form
<form action="index.php" method="POST" id="cust-form">
<input type="text" name="cust-name"></input>
<input type="submit" value="submit" name="submit">
</input>
Below that I have a search form
<form action="index.php" method="POST" id="form">
<input type="text" name="search-tags"></input>
<input type="submit" value="submit" name="Search">
</input>
And a variable amount of forms can appear on the rest of the page, normally just a variable process button to pass to a php backend.
I keep running into issues passing the customer data into a post format so it can be processed by the php back-end. I have tried with javascript
var form = document.getElementById('form');
var data = $('#cust-form').serialize();
data.split('&');
var cust_name = document.createElement("input");
cust_name.setAttribute("type", "hidden");
cust_name.setAttribute("name", "cust-name");
cust_name.setAttribute("value", data[0]);
form.appendChild(cust_name);
But that wont appear in the POST request that I receive. What would be the best way to get that request through without having to do a major overhaul to the code structure?
Are you able to add the hidden "cust-name" input to the html, or is this something that you are unable to modify?
According to MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) using setAttribute to set the value works inconsitently. You should try this instead:
cust_name.value = data[0];
I have a basic HTML form with one input text field, along with a submit button. Now, I want to use JavaScript to display the content entered by the user in the text field after form submission.
Here's the code of my form:
<form method = "POST">
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" onclick = "postResul()" />
</form>
On clicking the submit button, the postResul() function is called:
<script>
function postResul()
{
var htmlString="<?php echo $_POST['tweet1']; ?>";
alert(htmlString);
}
</script>
Now, both these code snippets are stored inside a PHP file. However, on submitting the form, the data entered in the input form field doesn't get displayed. I'm displaying the $_POST['tweet1'] variable in order to display the entry submitted by the user.
What seems to be wrong here? Am I using the $_POST variable in PHP the wrong way?
If you want to display the input's value BEFORE sending it to your server:
document.querySelector("form").addEventListener("submit", function()
{
var value = this.querySelector("input[name='tweet1']").value;
alert(value);
return false; //disable sending the data to the server
}, false);
<form id="myForm" method="post" action="index.php">
<input type="text" name="tweet1" />
<br>
<input type="submit" />
</form>
If you want to display the input's value AFTER sending it to your server:
<form method="post" action="index.php">
<input type="text" name="tweet1" />
<br>
<input type="submit" />
</form>
<?php echo htmlspecialchars($_POST["tweet1"]); ?>
These are different things. You can use $_POST only after you've sent some datas to the server. When you open yoursite.com/index.php in your browser, you make a HTTP GET request. In this case, $_POST will be an empty array, since it's a GET request, no data is sent to the server. When you submit the form, you make a HTTP POST request. Your PHP can access only that data you sent to the server. With Javascript, you work on the visitor's computer, not on the server. The only one way to send the data to the server without refresing the page, if you use AJAX, and make a new HTTP POST request, that'll run in the "background". But you do not need this if you just want to display the input's value, and you don't want to save it on your server. That can be done with Javascript, and without PHP.
The code you posted above would work like this:
You make a HTTP GET request to yoursite.com/index.php.
No data is sent to the server, $_POST will be empty.
var htmlString="<?php echo $_POST['tweet1']; ?>"; In this line, you try to echo an non-existing member of $_POST, you might see an error if display_errors is not disabled.
You click on the submit button.
It has an onclick attribute, postResul (a Javascript function) is called. If you open the page's shource, you'll see this:
function postResul()
{
var htmlString="";
alert(htmlString);
}
After an empty popup is shown, and you press OK, the browser send the data to your server, and you'll able to acess the input's value via $_POST.
If you press the submit button again, you'll see submited value (and not the input's actual value), because if you open the source code, you'll see this:
function postResul()
{
var htmlString="entered data";
alert(htmlString);
}
But that isn't want you want, so see the examples above depending on what you want (save the data, or just display it in the browser).
This should work:
function postResul()
{
var htmlString=document.getElementsByName("tweet1")[0].value;
alert(htmlString);
}
But you should really read more on how client-side and server-side languages work.
You cannot use $_POST['tweet1'] to get the value when you are invoking a Javascript function. Basically client side and server side are totally different.
You can obtain the result using Javascript as:
function postResul()
{
var htmlString= document.getElementsByName("tweet1")[0].value;
alert(htmlString);
}
In HTML:
<form method = "POST">
<input type = "text" name = "tweet1"/>
<br>
<input type = "submit" onclick = "postResul()" />
</form>
Note: The above function runs in client side and not in server side.
$_POST can be used to get values of the submitted form in a php page.
Cheers.
You have to make another file. Change your code to:
<form method="POST" action="another.php" >
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" />
</form>
In file another.php you can show the variable then:
<?php echo htmlspecialchars($_POST['tweet1'], ENT_QUOTES, 'UTF-8'); ?>
You should use the form in a different way
<form method="POST">
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" />
</form>
test.php file
<?php
return json_encode([1, 2, 3]);
js
$('form').on('submit', function() {
$.post('test.php', {}).done(function(response) {
alert(response);
})
})
Something like this.
Hope it's useful.
if you are using jquery library you can do this
<form method="POST">
<input type = "text" name = "tweet1" class="tweet" />
<br>
<input type = "submit" class="submit" />
</form>
$('.submit').click(function(e){
alert($('.tweet').val());
e.preventDefault();
});
jsfiddel working example http://jsfiddle.net/mdamia/j3w4af2w/2/
I was testing and trying to make an little form that when the user entered their name, it would take that name and display it on to the screen.
<html>
<head>
<center><h1>Test-Page</h1></center>
</head>
<body>
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID"/>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
Here is the js file
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name)
}
I know that I could probably do this in one HTML file, however I want to try and make the js and HTML separate. ANY help is appreciated.
You don't send data to a JavaScript function, but a JavaScript function can retrieve form data.
For example, and input of type text can be retrieved using its value property:
var input = document.getElementById("userID");
var value = input.value;
I know that I could probably do this in one HTML file, however I want
to try and make the js and HTML separate.
Nice step. In fact, there's no practical difference in terms of retrieving form data or manipulating the document from an inline script or a script that's included using a <script src=... element. The main difference is a script embedded in the HTML document won't be cached, while a one included as a separate file will be cached (obviously, there're other reasons if we talk about good separation of concerns!).
use onkeypress event on textbox and pass this to display that value and use that parameter in function to display it
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID" onkeypress="displaySystem(this)"/>
<input type="submit" value="Submit"/>
</form>
</div>
//javascript function
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name.value)
}
I have a PHP page with two Buttons named as Save and Submit.One for Saving form Data and other for submiting the final data.
<button id="save" name="save" onclick="saveForm();">Save</button>
<button id="submit" name="submit" onclick="validate();">Submit</button>
here are the two JavaScript functions:
function saveForm() {
document.submission.method = "POST";
document.submission.action = "SubmissionCheck.php";
document.submission.submit();
}
function validate() {
// some validation code here
// after validation the rest will work
document.submission.method = "POST";
document.submission.action = "SubmissionCheck.php";
document.submission.submit();
}
In 'SubmissionCheck.php' page I have defined two separate actions for save and submit button, but I am facing the same process of submit button when I click the save button. How do I solve this? Any one help please. Thank you in advance.
<button id="save" value="save" name="method" onclick="saveForm();">Save</button>
<button id="submit" value="submit" name="method" onclick="validate();">Submit</button>
PHP
if(isset($_POST["method"])){
if($_POST["method"] == "save"){
echo "Saving File";
}elseif($_POST["method"] == "submit"){
echo "Submitting File";
}
}
When you are doing what you are trying to do I tend to keep my name's the same. So that I can test against them. I generally use names such as action, method, mode,and data which I can then test the values. Another good practice I do, is just var_dump then entire $_POST
example
var_dump($_POST);
var_dump($_GET);
var_dump($_REQUEST);
By performing these test conditions you can have more control over your code without getting overwhelmed by names. Another thing I like to do is use these for page actions, these action,mode,method help me generate the exact page the user is looking for.
example
<input type="text" value="" name="method" placeholder="Insert a method">
<input type="text" value="" name="action" placeholder="Insert a action">
<input type="text" value="" name="mode" placeholder="Insert a mode">
Then when submitted I can use these like so
$path = "";
if(isset($_POST["method"])){
path.="method=".$_POST["method"];
if(isset($_POST["action"])){
path.="&action=".$_POST["action"];
if(isset($_POST["mode"])){
path.="&mode=".$_POST["mode"];
}
}
header("Location: /path/".$path);
}
This will output three ways... if only method, if method and action, and if method,action,and mode. So generally speaking, testing against universal names sometimes is better. Hope this little walk down PHP $_POST usage helps you a little bit.
note I never sanitized any of the $_POST values, but if you are using them as a path you really should, or if you are access mySQL database use mysqli_real_escape_string and other sanitation methods.
Also is your forms default action being prevented, because since you have no values, $_POST will be empty every time. Unless it's prevented then submitted correctly.
<form onsubmit="return false">
//buttons
</form>
you can differentiate in actions like this
function saveForm() {
document.submission.method = "POST";
document.submission.action = "SubmissionCheck.php";
document.submission.submit();
}
function validate() {
--some validation code here---
--after validation the rest will work--
document.submission.method = "POST";
document.submission.action = "SubmissionCheck.php?validate";
document.submission.submit();
}
then in SubmissionCheck.php file check
if(isset($_GET['validate']))
{
// perform actions for validation
}
check isset:
if (isset($_POST["save"]))
{
echo "save action";
}
if (isset($_POST["submit"]))
{
echo "submit action";
}