Simple PHP AJAX script

Question

I have 2 scripts, submit.php and display.php.

I want to be able to load submit.php, click the submit button & the result div to display 123.

Right now, it just reloads my page. I'm not getting anything from my Console so stuck how to debug.

Can someone take a look and provide assistance?

submit.php:

<form>

  <input type="submit" value="Submit" name="display" id="display">

</form>

<div id="result">&nbsp;</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#display").click(function() {                

    $.ajax({
      url: 'display.php',
      type: 'GET',          
      dataType: "html",
      data: {
         "id": "123",
      }, 
      success: function(data) {
      //called when successful
      $('#result').html(data);
      },
      error: function(e) {
      //called when there is an error
      //console.log(e.message);
      }
    });

});
</script>

display.php:

<?php
$id = $_GET['id'];
echo $id;
?>

Change `type="submit"` to `type="button"`. You're just submitting your form and reloading the page. You need to prevent the form from being submitted. — j08691, Jun 14 '17 at 13:26
@PraveenKumar Why would it reload if the input wasn't a submit button? — j08691, Jun 14 '17 at 13:27
Possible duplicate of [AJAX: Submitting a form without refreshing the page](https://stackoverflow.com/questions/14235596/ajax-submitting-a-form-without-refreshing-the-page) — j08691, Jun 14 '17 at 13:30
@j08691 It shouldn't but hitting enter in a textbox would probably still submit it, so preventing the form to submit via Javascript is probably the best solution. (Or removing the form tags could also help, but that might mess up custom css or something like that.) — Ivar, Jun 14 '17 at 13:30
@Ivar Yes, a form with a single text box would submit, however that's not the case here. — j08691, Jun 14 '17 at 13:31
@j08691 This might just be a mcve and not the complete form. You never know. :) — Ivar, Jun 14 '17 at 13:34

score 3 · Accepted Answer · answered Jun 14 '17 at 13:26

3

It submits or reloads the page. You need to prevent the default action. Change the first two lines:

$("#display").click(function(e) { // Add e (event) parameter.
  e.preventDefault();             // Prevent the default action for this event.

You may change to type="button", but not sure if it will be effective.

answered Jun 14 '17 at 13:26

Praveen Kumar Purushothaman

164,888
24
203
252

3

*"You may change to type="button", but not sure if it will be effective."* - I'm sure it will ;-) – Funk Forty Niner Jun 14 '17 at 13:30
1

It sure is - just tested it :) – michaelmcgurk Jun 14 '17 at 13:30
1

@michaelmcgurk LoL. Thanks for confirming it. `:)` I had issues in implementing it myself. I should be messing with something or missing something. – Praveen Kumar Purushothaman Jun 14 '17 at 13:30
1

inputs tend to refresh/load, as opposed to a button with a submit type in JS. I am not a JS guru, but do know that much LOL! @PraveenKumar – Funk Forty Niner Jun 14 '17 at 13:32
2

@PraveenKumar when in doubt, try them both ;-) – Funk Forty Niner Jun 14 '17 at 13:38

score 0 · Answer 2 · answered Jun 14 '17 at 13:29

0

solved your issue please

  replace
 <input type="submit" value="Submit" name="display" id="display">
    by 

    <button type="button" name="display" id="display">Submit</button>

answered Jun 14 '17 at 13:29

Niraj patel

525
4
12

Simple PHP AJAX script

2 Answers2