如何制作一个活跃的网页

Question

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.

Answer 1

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!

Answer 2

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