"Uh-oh, looks like there's an

When I click the button, a warning pops up and the form gets duplicated. Is there an error in the code?

           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
            <script src="jquery-ui-1.10.0.custom/jquery-1.9.1.min.js" type="text/javascript"></script>
            <title>jquery AJAX</title>
            <script language="javascript">
                $(document).ready(function(){
                            var name    = $("#name").val();
                            var sname   = $("#sname").val();
                            var email   = $("#email").val();

                        $("#b1").click(function(){          
                            $.ajax({
                                type    :"POST",
                                URL     :"save.php",
                                data    :"name="+name+"&sname="+sname+"&email="+email,
                                dataType:"text",
                                success :function (data, textStatus, jqXHR) {                           
                                            if (data == 'success'){
                                                $("#res").html("sonuc :"+data); 
                                            }else{
                                                $("#res").html(data +":"+textStatus+":"+jqXHR);
                                                }
                                }
                            });             
                        }); 
                    });

            </script>
            </head>
            <body>
            <input type="text" id="name"/><br />
            <input type="text" id="sname"/><br />
            <input type="text" id="email"/><br />
            <button id="b1">send</button>
            <div id="res"></div>
            </body>
            </html>

Answer №1

It is functioning as intended. The issue lies within the following section:

success :function (data, textStatus, jqXHR) {                           
    if (data == 'success'){
        $("#res").html("sonuc :"+data); 
    }else{
        $("#res").html(data +":"+textStatus+":"+jqXHR);
    }
}

This function is called when the AJAX request is successful. However, the condition checks if the data key is equal to success, which is not the case leading to the execution of the else block (as shown in your screenshot). It seems like you might actually want to check if the textStatus is a success instead. So, replace:

if (data == 'success'){

With:

if (textStatus == 'success') {

By making this change, you should see sonuc : followed by the data displayed.

Please note that the entire if/else statement may not be necessary since this is already the success callback triggered upon a successful AJAX request. You may consider moving:

$("#res").html(data +":"+textStatus+":"+jqXHR);

To the error callback instead, resulting in:

success: function (data, textStatus, jqXHR) {                           
    $("#res").html("sonuc :"+data); 
},
error: function (jqXHR, textStatus, errorThrown) {
    $("#res").html(data +":"+textStatus+":"+jqXHR);
}

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

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

I manage a complex and expansive website that contains a significant amount of repetitive HTML elements such as the navigation menu and top ribbon. Loading a single page on my site can be resource-intensive, with up to 300KB of data required, half of whic ...

Personalized validation messages with jQuery

I am currently working on a contact form using jQuery, but I am facing challenges in displaying my custom validation messages. Instead of showing the message I specified, it only displays a small popup with the generic message: "Please fill in the form". I ...

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

I'm working on creating a countdown timer with 3 buttons for controlling the timer: start, cancel, and pause. The timer itself is a text input field where you can enter a positive integer. I need to use core JavaScript, not jQuery Start Button: Init ...

Exploring an Array Based on User's Input with JavaScript

Looking to implement a search functionality for an array using AJAX. The array is pre-populated with values, and the user will input a value in a HTML text box. If the entered value is found in the array, it should display "Value found", otherwise "not f ...

Is it possible to conceal and completely empty the TextBox once the checkbox is deselected?

When the checkbox is checked, the textbox is displayed; otherwise, it remains hidden. However, the value is not being cleared. Can someone please help me with this issue? Thank you in advance. HTML <div class="munna"> <in ...

"By selecting the image, you can initiate the submission of the form

I am trying to figure out why clicking on the image in my form is triggering the form submission by default. Can someone please provide guidance on this issue? <form name="test1" action="er" method="post" onsubmit="return validateForm()" <input ty ...

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

creating a live updating dropdown menu using Node.js and MySQL

Upon a user clicking and selecting a client, I would like to dynamically update the region dropdown menu with options that are related to that specific client from the databaseenter code here This is my client table: Here is the Region table, where clien ...

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Good day! I am fairly new to the programming world and have recently embarked on my first JavaScript project. I've chosen to create a simple budgeting app. However, I'm struggling with displaying user input on the page. Something seems off with ...

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...

Add a sound file to the server and configure the images based on the server's response

I am a newcomer to JavaScript and AJAX, and I am facing an issue while trying to upload an audio file to the server and display the image from the server response. When attempting to pass the audio file from the input tag to an AJAX call, I encounter an il ...

How can I populate a <select> tag with options dynamically using C# when the page loads?

I am using jQuery ajax to populate cascaded dropdown elements from a database. The issue I'm facing is that I can't seem to add the default "Select Program" option at the top of my first dropdown dynamically. Even though I tried using the prepend ...

Sending jQuery events from an aspx page to an ascx control

Yesterday, I began utilizing ascx and started breaking down my "dynamic" default.aspx page into smaller segments. In default.aspx, there is a significant amount of JavaScript/jquery code responsible for managing various events. After moving some html code ...

Using Ajax to fetch project data from an API

Currently immersed in a personal coding project, I'm struggling to troubleshoot my code. Essentially, I need to retrieve data from an API and display it on my HTML page. The data type is "jsonp" due to CORS errors that required this workaround for de ...

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

Using Ajax and jQuery to Retrieve the Value of a Single Tag Instead of an Entire Page

Let's say I have a webpage named page.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page</title> </head> <body> <h1>Hello World!!</h1> </body> </html> Now ...

Validation of forms using Javascript

I currently have an HTML form with JavaScript validation. Instead of displaying error messages in a popup using the alert command, how can I show them next to the text boxes? Here is my current code: if (document.gfiDownloadForm.txtFirstName.value == &ap ...