0

Can someone please guide me through where am I going wrong in this piece of code below

index.php :-

<script type="text/javascript">
function fun(){
    alert("H");
    $.ajax({
    type: "POST",
    url: 'test.php',
    data: {name: 'Wayne', age: 27},
    success: function(data){
        alert(data);
    },
    error: function(error){
        alert(error);
    }
});
    alert("HE");
    }
    </script>
    <input type="button" value="submit" onclick="fun()" />

test.php :-

<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    echo $name.$age;
?>

I'm not getting any output nor any error.

Yash Parekh
  • 129
  • 1
  • 10
  • In your PHP file, you can follow [this to show errors](http://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display) – aug Feb 21 '17 at 01:52
  • When you say you don't get output, do you mean that not even the first `alert("H")` shows up? If so then the problem isn't with the the Ajax. I see no syntax errors in the JS shown. – nnnnnn Feb 21 '17 at 02:01
  • @nnnnnn Um, the button is labeled as type="button" – epascarello Feb 21 '17 at 02:03
  • @epascarello Um...I don't know what I was thinking. (Guess I saw the `value="submit"` and confused it.) I've edited my comment. – nnnnnn Feb 21 '17 at 02:03
  • So do you have jQuery included since you are using it? If you open up the developer console is there any errors listed? – epascarello Feb 21 '17 at 02:06
  • you have an input type = submit ... does that mean you have a form? – Jaromanda X Feb 21 '17 at 02:23
  • `I'm not getting any output nor any error` - really? nothing in the browsers developer tools console at all? – Jaromanda X Feb 21 '17 at 02:23
  • By no output nor any error, I meant for the ajax part. I'm getting the alert("H") as output. I kept these alert("H") and alert("HE") just to test whether my page gives a response or not. But alert("HE") is not displayed. – Yash Parekh Feb 21 '17 at 07:47
  • Cool people. I got the output. Actually, I didn't include jquery of which I was not aware of. Thanks for the help guys and keep helping ;) – Yash Parekh Feb 21 '17 at 07:56
  • I don't understand how you didn't get an error if you tried calling `$.ajax` but you hadn't included the jquery file. Had you looked in your browser console? – JakeParis Feb 21 '17 at 15:28
  • Even I am thinking of that. I checked my browser console but had no error there. – Yash Parekh Feb 23 '17 at 11:52

1 Answers1

0

The problem is in the javascript code, specifically in how you're calling the function. Try this instead:

// javascript
document.getElementById('do-fun').addEventListener('click',function(){
    fun();
});

// html
<input type="button" value="submit" id="do-fun" />
JakeParis
  • 11,056
  • 3
  • 42
  • 65
  • I'm not so sure. I think there's something going on with the scope of the function causing it to not fire... – JakeParis Feb 21 '17 at 01:59
  • Adding the event listener like that wouldn't work with the provided document structure that has the script element *before* the input in question. – nnnnnn Feb 21 '17 at 02:02