0

I have installed XAMPP to run PHP files on my computer, here is my PHP file I am attempting to execute

<?php 
if(isset($_GET['input']))
{
    $string = $_GET['input'];
    echo strrev($string);
}
?>

Here is my basic HTML file

<html land="en">
<head>
    <meta carset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css";
</head>

<body>
<!-- Document Ready Event -->
<input id="text" type="text" /><input id="submit" type="button" value="Submit" />

<div id="feedback"></div>
    <script src="../jquery-1.10.2.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

And here is my JS file

//Pass a value to a PHP file and taking the contents and showing the contents

$('#submit').click( function()
{
var text = $('#text').val();
$.get( 'C:/xampp/htdocs/amit/reverse.php', { 'input': text }, function( data )
    {
        $('#feedback').text( data );
    });
});

When the button is clicked Chrome tells me the this.

Header is

Request URL:file:///C:/xampp/htdocs/amit/reverse.php?input=Hello
Query String Parametersview sourceview URL encoded
input:Hello

and the Response is

<?php 
if(isset($_GET['input']))
{
    $string = $_GET['input'];
    echo strrev($string);
}
?>

Now I have put a different file on my XAMPP PHP side and it works fine, but this one just doesn't response, can anyone see what I am doing wrong at all?

3 Answers 3

3

You need to pass the files to your webserver -- make the GET request to a URI on your web server instead of making the request to a file on your computer.

So, change the line:

C:/xampp/htdocs/amit/reverse.php

to

http://localhost/amit/reverse.php

Alternatively, if all your files are in the same directory with a structure as follows:

-- htdocs
    - amit
        - <somefile>.html
        - script.js
        - style.css
        - reverse.php

Then, you could simply use reverse.php instead of specifying the full path.

Full code as an example:

$('#submit').click( function()
{
var text = $('#text').val();
$.get( 'http://localhost/amit/reverse.php', { 'input': text }, function( data )
    {
        $('#feedback').text( data );
    });
});
Sign up to request clarification or add additional context in comments.

Comments

0

You need to get the file through a request to your XAMPP server. Try something like

$.get( 'http://localhost/amit/reverse.php', { 'input': text }, function( data )
{
    $('#feedback').text( data );
});

1 Comment

Now i'm getting XMLHttpRequest cannot load localhost/amit/reverse.php?input=. Origin null is not allowed by Access-Control-Allow-Origin.
0

Use relative path instead of local path on your-drive. Just type the filename (if filename is in root-directory). Try not to use absolute paths (like http://localhost/reverse.php) because then you would have to change it when uploading/changing it to another server and that is not a sustainable solution.

$.get( '/reverse.php', { 'input': text }, function( data )
{
    $('#feedback').text( data );
});

Secondly, I would recommend using other variable names. I think you're getting problems using text a variable because text() is function in jQuery.

Try:

var textOfElement = $('#text').val();
$.get( '/reverse.php', { 'input': textOfElement }, function( data )
{
    $('#feedback').text( data );
});

An in some cases it's fine to be generic about naming, but input and text is far to genereic. Those names doesn't say a bit about the actual context.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.