0

View

<input type="text" id="textToDisplay" />
<br />
<input type="button" value="Add message" onClick="showMessage()" />
<br />
<span id="messageSpan"><span>

JS

function showMessage() {
  var message = jQuery("#textToDisplay").val();
  jQuery("#messageSpan").text(message);
}

By the way, i'm using laravel. Basically, what I want to do is, if user input 22 then it will shows success message. All these do it in php without changing/adding in js. jsfiddle example

Basically my idea is like this,

<?php 
if(<span id="messageSpan"><span>  == 22)
    success
else
    <span id="messageSpan"><span>
?>
LearnProgramming
  • 814
  • 1
  • 12
  • 37
  • Why would you want to do this with server-side PHP rather than in-browser with JavaScript? – Andy G Dec 21 '17 at 14:02
  • this is just a snippet of my js codes, in my real codes it is very very complicated, so i though if i just code in php is more easier? no? – LearnProgramming Dec 21 '17 at 14:23
  • No. You would still need to write JavaScript to gather information and post it to PHP, and process the returned content. But what would be returned that isn't already available within the browser? As presented, you want client-side (in-browser) interaction, so use JavaScript. – Andy G Dec 21 '17 at 14:37

1 Answers1

0

You cannot do this like the way to describe it above. You either have to do in using only javascript / jquery or you use both languages (php and javascript) and sent an ajax request to your server do something there and return some data to your client (javascript) and show that in your view.

I added some comments so that the process is better to understand, if you have any questions just ask.

I would do this using ajax so you are going to use javascript and php which should be better for you right now.

So this is your html markup:

<input type="text" id="textToDisplay" />
<br />
<input type="button" value="Add message" onClick="showMessage()" />
<br />
<span id="messageSpan"><span>

And now you are going to sent the input value using ajax to your controller, like this:

$(document).ready(function(){

    // on each key up we are going to sent the value later you should probably change this and sent the value after you click on a button
    $('#sentMessage').keyup(function(){

        // this holds the current value of the input field
        var inputValue = $(this).val();

        // you are going to sent the input data to this route '/showMessage'
        // you are going to use the post method
        $.ajax({
            type: "POST",
            url: '/showMessage',
            data: {
                inputValue: inputValue
            },
            // if you post is successful then do following ....
            success: function(data) {
                // here we are just going to show the message inside you span, the returned data comes from your controller
                $("#messageSpan").text(data.inputValue);
            },
            // if there was an error do following ....
            error: function(data) {
                // if there was an error you could just show a message with some error message
                $("#messageSpan").text('ERROR!');
            }
        });

    });

});

In your Laravel Controller class you need have have a function like this:

public function showMessage(Request $request)
{
        // $inputValue contains the inputValue data from your ajax call
        $inputValue = $request->inputValue;

        // You could / should  also do some validation here later on ...
        // Thus you should probably save the data, I do not know what excatly you are going to do with it later ...

        // now we are sending back the data
        return response()->json($inputValue);
});

What you also have to do it to create a proper route so that your ajax request finds it. So in your routes.php you need to createa a route like this:

Route::get('/showMessage', ['as' => 'showMessage', 'uses' => 'YourController@showMessage']);
utdev
  • 3,942
  • 8
  • 40
  • 70