Discover the world of web development through the power of Ajax

Could someone kindly assist me in identifying the issue with the code snippet provided 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 am encountering a situation where there is no output being displayed, nor any errors being thrown.

Answer №1

It seems like the issue lies within the javascript code, particularly with how you've implemented the function call. Perhaps consider using the following approach:

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

// html
<input type="button" value="start" id="trigger-fun" /> 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Trying to retrieve the 'substr' property from an undefined value

Apologies for any confusion, I have a lengthy script that is causing an issue when live. The error message in Chrome's Console reads: Uncaught TypeError: Cannot read property 'substr' of undefined This snippet of code seems to be where t ...

What could be the reason for the view/Vue.js dev tools not updating with the new data after pushing an item into a data array?

Despite pushing data into an array, the view and Vue dev tools do not update. Why is this happening? Even after clearing the browser cache, the issue persists. myData = [ [ { test: true } ] ] methods: { addDataItem() { ...

What is the most effective way to transfer a variable between two javascript files?

I am currently working on customizing the code from a github repository found at Github repo for integration with Google App Engine. However, I have encountered an issue when trying to pass a variable from /app.js to /books/crud.js. Although I have success ...

When utilizing react-router-dom's <Link/> component in a server-side rendering (SSR) application, it unexpectedly clears the {history, match,

I encountered an issue while trying to implement the Link component in server-side rendering. <Link to={`/edit/${id}`}> <h3>{description}</h3> </Link> When I navigate to the /edit page, I have this line of code to test the props ...

What is the best way to retrieve the 'items' data stored in this list?

I am working with a list of data that includes 6 categories - bags, shoes, girls, boys. Each category contains the same type of data like id, items (with properties: desc, id, imageUrl, name, price), routeName, and title. My goal is to loop through all ca ...

What is the best way to iterate over each character in a string and trigger a function in JavaScript?

I am currently working on a project to create a random password generator. The code responsible for generating the password is functioning correctly. However, I am facing an issue with converting the characters of the password into phonetic equivalents. I ...

Error message: Missing dependency in React useCallback linting documentary

Within my component, I have integrated a custom hook called useInstantSearch. However, when I try to wrap it in useCallback, an error occurs: I receive the message - React Hook useCallback received a function whose dependencies are unknown. Pass an inline ...

Update a div with ajax

I am looking to refresh a select element (identified by its id) once the ajax call has been successfully completed. However, I am unsure of how to go about this. Ajax Function : $('#insertForm').on('click', function(){ var form_inti ...

The height of the iframe with the id 'iframe' is not functioning as expected

I am trying to set the iFrame's height to 80% and have an advertisement take up the remaining 20%. Code <!DOCTYPE html> <html lang="en"> <head> </head> <body> <iframe id="iframe" src="xxxxxx" style="border: ...

Exploring the bug in Vue.js and Webpack 5 Federation with TypeScript

Encountering an issue with a new webpack 5 module Federation and TypeScript. I have two separate VueJS applications, both written in VueJS 3. The problem seems to be related to the webpack configuration and the ts-loader, which requires the appendTsSuffixT ...

How to continuously submit a single form field with Jquery using setInterval?

After reviewing this jquery timer on jsfiddle, I must say it works quite effectively. However, my specific requirement is to submit a single form field at regular intervals. Consider the following HTML form structure: <form id="form"> <input ...

Using the oidc-client library in Angular to create a customized isLoggedIn() function within *ngIf implementation

Objective: I'm trying to toggle the visibility of a Login and Logout button in an Angular application using IdentityServer4 and OIDC client. Issue: The isLoggedIn function in my code returns undefined before it returns true, causing the *ngIf directi ...

Working with ReactJs: Passing Parameters to Second Function

Currently, I am utilizing React-Bootstrap and looking to implement tooltips without creating multiple functions. Instead, I am using the second parameter to change the text of tooltips. However, I am encountering an issue where the function is interpreting ...

Instructions for creating a function in TypeScript that accepts an array as user input and determining its length

Looking to develop a TypeScript function that can take an array of any type as input, calculate the number of elements present in it, and return the count. An example output would be: If user inputs: ["soccer", "basketball"] Then output: 2 Any suggestion ...

Cease the ngTable getData function for ngTableDynamic in order to retrieve data while sorting

The ngTable documentation lacks adequate information and sample codes, making it difficult to follow. Despite this, I was able to create the following code to dynamically fetch and display a table from the server. However, when I try to sort by clicking on ...

Attempting to incorporate my Resolve into the controller so that it can then be injected into the HTML

Here is the content of my index.js file: 'use strict'; angular.module('wildenglish', ['ngAnimate', 'ngTouch', 'restangular', 'ngRoute', 'ui.bootstrap']) .config(function ($routeP ...

Get rid of any unnecessary class on the element

I'm currently working on an image slider that displays before and after images when the user drags left to right. The issue I'm facing is that the 'draggable' class is being added not only to these images but also to my hero images. It ...

What is the best way to select a specific image from a collection of images within my Ajax form?

Currently, I am new to AJAX coding and still trying to familiarize myself with it. I have managed to create an AJAX multi-page form where each "new" page is contained within divs in HTML. The CSS is responsible for the styling, and there is some JavaScript ...

What is the best way to use v-bind to toggle a class on a specific element in VueJs?

My app features a bottom navigation bar with 4 icons that, when clicked, change the displayed view. I want the selected icon to switch from white to red. To achieve this, I thought of toggling the class of .active when an icon is selected. However, my curr ...

Utilizing AJAX to Send a POST Request to the Google Chart API

Hello everyone, I have been attempting to utilize the Google Chart API to create some charts on a website using AJAX to avoid page reloading. However, I am encountering an issue. I need to make POST requests but I am unsure if AJAX supports this. Here is ...