I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

Question

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

I am just starting to learn the basics of jQuery and AJAX. I have already attempted to solve this problem by checking previous answers on Stackoverflow, but the code provided did not work for me. I have created two pages, index.php and testing.php, with a button on the index page. However, when I click on the button, nothing happens and it does not pass to testing.php. I am using jQuery and AJAX functions for this.

HTML file (index.php)

<input type='submit' name='Result' value='Show Graph' id='Result' onclick='return go_graph();'/>

I have also tried calling the function in JavaScript, but it is not working.

jQuery File

<script type="text/javascript">
    $(document).ready(function(){
        alert(projectID);

        $('#Result').click(function(){
            var clickBtnValue = $(this).val();
            $.ajax({
                url: "testing.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
                success: function(results){
                    res=results;
                    alert('haii');
                },
            });
        });

        function go_graph(){
            alert(projectID);
            $.ajax({
                url: "testing.php?projectID="+projectID,
                success: function(results){
                    res=results;
                    alert(res);
                },
            });
        }
    });
</script>

javascript jquery ajax

Answer 1

Answer №1

You seem to have a syntax error in your $.ajax. Take a look at this:

$.ajax({
    url:"test3.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
   success:function(results){
     res=results;
     //alert(res);
     alert ('haii');
    } //was missing
    });

  });
 });

Also, update this line:

<input type='submit' name='Result' value='Show Graph' id='Result' onclick='return go_graph();'/>

to

<input type='button' name='Result' value='Show Graph' id='Result' onclick='return go_graph();'/>

Complete code snippet below:

 <input type='submit' name='Result' value='Show Graph' id='Result' onclick='return go_graph();' />
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<script>
  $(document).ready(function(){
    var projectID = 1;
  alert(projectID);
  $('#Result').click(function(){
  var clickBtnValue = $(this).val();
  $.ajax({
    url:"testing.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
   success:function(results){
     res=results;
     //alert(res);
     alert ('haii');
    }
    });

  });
 });
 function go_graph(){

    alert('go');
     $.ajax({url:"testing.php?projectID="+projectID,
    success:function(results){
     res=results;
     alert(res);
     }

  });

    }
</script>

Answer 2

You seem to have a syntax error in your $.ajax. Take a look at this:

$.ajax({
    url:"test3.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
   success:function(results){
     res=results;
     //alert(res);
     alert ('haii');
    } //was missing
    });

  });
 });

Also, update this line:

<input type='submit' name='Result' value='Show Graph' id='Result' onclick='return go_graph();'/>

to

<input type='button' name='Result' value='Show Graph' id='Result' onclick='return go_graph();'/>

Complete code snippet below:

 <input type='submit' name='Result' value='Show Graph' id='Result' onclick='return go_graph();' />
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<script>
  $(document).ready(function(){
    var projectID = 1;
  alert(projectID);
  $('#Result').click(function(){
  var clickBtnValue = $(this).val();
  $.ajax({
    url:"testing.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
   success:function(results){
     res=results;
     //alert(res);
     alert ('haii');
    }
    });

  });
 });
 function go_graph(){

    alert('go');
     $.ajax({url:"testing.php?projectID="+projectID,
    success:function(results){
     res=results;
     alert(res);
     }

  });

    }
</script>

Answer 3

Answer №2

To solve this issue, implement the return statement:

handleResponse:function(data){
     response=data;
    return response;

Answer 4

To solve this issue, implement the return statement:

handleResponse:function(data){
     response=data;
    return response;

Answer 5

Answer №3

<script type="text/javascript">
function display_graph()
{
    alert(pID);
     $.ajax({
      url:"display.php",
      data:projectID="+pID,
    success:function(response){
     graphData=response;
     alert(graphData);
     }

  });

    }
</script>

Answer 6

<script type="text/javascript">
function display_graph()
{
    alert(pID);
     $.ajax({
      url:"display.php",
      data:projectID="+pID,
    success:function(response){
     graphData=response;
     alert(graphData);
     }

  });

    }
</script>

Answer 7

Answer №4

Have you attempted to execute PHP files asynchronously using AJAX and retrieve the response? If this is the case, consider invoking the preventDefault() function within your jQuery click event listener.

$('#Results').click(function(event){
event.preventDefault();
//paste the remainder of your code here
});

By doing so, you can stop the form submission and allow the AJAX request to fetch the output created by the PHP scripts in an asynchronous manner.

Answer 8

Have you attempted to execute PHP files asynchronously using AJAX and retrieve the response? If this is the case, consider invoking the preventDefault() function within your jQuery click event listener.

$('#Results').click(function(event){
event.preventDefault();
//paste the remainder of your code here
});

By doing so, you can stop the form submission and allow the AJAX request to fetch the output created by the PHP scripts in an asynchronous manner.

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to upload a file without finalizing the form submission?

What is the reason behind AngularJS throwing an error related to bad augmentation?

Creating a fading effect on an image in relation to another dynamic image

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

Find a specific value within a complex array of objects in Angular 2

How to dynamically change the color of a button in a list in Vue.js when it is clicked

The authentication for npm failed with a 401 error code when attempting to log in

What causes req.body to display as an empty object in the console during a POST request?

What is the best way to effectively test jQuery's .ajax() promises using Jasmine and/or Sinon?

Clicking the Less/More button using jQuery

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

Using Javascript to validate passwords and Bootstrap for design enhancements

The passport JWT authorization failed, not a single message is being printed to the console

Using a variable as an argument for a DOM function in JavaScript

Execute iMacros Loop and terminate the process before proceeding to the next command

Using JavaScript, conceal a specific Div by examining the content within another Div

Create a scrollable div within a template

Learn the process of integrating JSON data into a jQuery Datatable!

Prevent typing in text box when drawer is activated by pressing a button

Struggling to make an AJAX form function properly