Problems with the functionality of Javascript and ajax

I've created this JavaScript/AJAX code, but unfortunately, it's not functioning as expected and I am unable to determine the reason behind it.

  $(document).ready( function(){
    $('#btn4').click( function(){ 
        var plano = $('#plano').val();
        var plano = $('#name').val();
        var plano = $('#age').val();
        var plano = $('#identify').val();
        var plano = $('#phone').val();
        var plano = $('#email').val();
        var plano = $('#password').val();
        var plano = $('#endereco').val();
        var plano = $('#cidade').val();
        var plano = $('#cep').val();
        var plano = $('#estado').val();
        var plano = $('#code').val();
        var urlData = "plano=" + plano + "&name=" + name + "&age=" + age + "&identify=" + identify + "&phone=" + phone + "&email=" + email + "&password=" + password + "&endereco=" + endereco + "&cidade=" + cidade + "&cep=" + cep + "&estado=" + estado + "&code=" + code;
        $.ajax({
            type: "POST",
            url: "checkout2.php", 
            async: true,
            data: urlData, 
            context: jQuery('#step3'),
            success: function(data) { 
                $('#step2').hide('fast');
                this.append(data);
                $('html,body').scrollTop(0);
            }
        });
    }); 
});

Could someone please provide assistance? Are there any syntax errors in my code that need to be addressed?

Answer №1

You need to be cautious about using the same variable name "plano" multiple times in your code. It's important to change them based on their specific use.

$(document).ready( function(){
    $('#btn4').click( function(){ 
        var insurancePlan = $('#plano').val();
        var name = $('#name').val();
        var age = $('#age').val();
        var identification = $('#identify').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var password = $('#password').val();
        var address = $('#endereco').val();
        var city = $('#cidade').val();
        var postalCode = $('#cep').val();
        var state = $('#estado').val();
        var referralCode = $('#code').val();
        var urlData = "insurancePlan=" + insurancePlan + "&name=" + name + "&age=" + age + "&identification=" + identification + "&phone=" + phone + "&email=" + email + "&password=" + password + "&address=" + address + "&city=" + city + "&postalCode=" + postalCode + "&state=" + state + "&referralCode=" + referralCode;
        $.ajax({
            type: "POST",
            url: "checkout2.php", 
            async: true,
            data: urlData, 
            context: jQuery('#step3'),
            success: function(data) { 
                $('#step2').hide('fast');
                this.append(data);
                $('html,body').scrollTop(0);
            }
        });
    }); 
});

Give this a try and see if it resolves the issue. Remember to be careful when copying and pasting code snippets ;)

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

What is the best way to incorporate a countdown timer on an ASP.NET webpage?

Looking to display a countdown timer in the top right corner of my ASP page that starts from 00:00:30 and counts down to 00:00:00 before resetting back to 00:00:30. Does anyone have any suggestions on how to achieve this? ...

execute action after a specific point in time in the video is reached

How can I hide a div after a video has been playing for a certain amount of time? The code provided below seems like it should work in theory, but is currently not doing so. Any suggestions on how to fix this issue would be greatly appreciated! <body ...

Showing information from a database while incorporating line breaks with the help of nl2br

Having trouble with the previous question, so I'll provide more detail here. Below is my index.php file where I explain the method used to save data to a database. <html> <head> <script> function updategroup() { var update_c ...

Interactive Image Component in React

I'm encountering an issue with my React code. import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import RecipeService from "./RecipeService"; import RecipeProfileImg from "./Re ...

Problem with validation in jQuery not being compatible with Kendo Button (sample code provided in jsfiddle)

It took me some time to figure out that the reason jquery-validate wasn't functioning in my Kendo Mobile application was because my submit button was a Kendo Button. Check out this jsfiddle for illustration: DEMO <div id="phoneApp" style="displa ...

Unable to locate JavaScript files within the Django project

I utilized Python 3.7 on Windows 10 to develop a Django project. settings.py: STATIC_URL = '/static/' LOGIN_URL = '/login' LOGIN_REDIRECT_URL = '/' https://i.sstatic.net/LSAdq.png I employed superuser to create some regu ...

Using mui-datatables to display an array of objects

Seeking help from users of mui-datatables. While it successfully handles data in the form of an array of strings, there is an issue when trying to load an array of objects resulting in the following error: bundle.js:126379 Uncaught (in promise) TypeEr ...

Newer Android versions running on KitKat (4.4) and beyond may experience incomplete page loading when using Chromium web

While most website pages perform well on Android 4.4 and newer versions with Chromium-based webview, I have encountered an issue wherein a particular page behaves differently between the newer versions and the earlier Android systems. The webview function ...

Unexpected Behavior of JavaScript Execution in WebDriver

Currently, I am using the JBehave-Web distribution (3.3.4) with Webdriver to conduct testing on an application. I have encountered a peculiar issue: My challenge lies in interacting with a modalPanel from Richfaces, as it consistently throws an ElementNot ...

How can I protect my jQuery script from being accessed by "FIREBUG"?

I was tasked with creating a jQuery script as follows: function DeleteFile(_FileID) { //ajax method to delete the file } The FileID is stored in the 'rel' attribute of the list. However, when I call "DeleteFile" from Firebug using the fileId ...

Using jQuery to obtain the object context while inside a callback function

Suppose I have the following object defined: var myObj = function(){ this.hello = "Hello,"; } myObj.prototype.sayHello = function(){ var persons = {"Jim", "Joe", "Doe","John"}; $.each(persons, function(i, person){ console.log(this.h ...

My preference is for the most straightforward ajax form application available

I'm looking to create an ajax application that can handle a basic form with just text input and a submit button. I don't need any validation included, just a simple PHP script to process the form data. I'm reaching out for help because I hav ...

Retrieving data from the database

One interesting aspect of my project involves a database table named quotes. My goal is to dynamically display a random quote from the table, then smoothly transition to a new quote after 5 seconds, retrieved from the same database. Here is the layout of ...

Is the Vue-portal enabled conditionally?

I am looking to include some additional information in the navbar (parent component) using Vue Portal. So, within a component, I can use the following code: <portal to="navbar"> <b-button>Some option</b-button> </portal&g ...

Utilizing jQuery to send an Ajax GET request for a JSON file

Recently I have begun delving into the world of jQuery and Ajax, attempting to utilize both technologies to retrieve a JSON FILE. Below is the structure of the file: [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": f ...

How can I expand and collapse elements using Angular?

I'm looking to implement a collapsible feature. When the user clicks on the "Section Title", I want the corresponding information to collapse or expand. @Component({ selector: 'knowledge-base', template: ` <div *ngFor="let sect ...

The selected attribute does not function properly with the <option> tag in Angular

Currently, I am faced with a challenge involving dropdowns and select2. My task is to edit a product, which includes selecting a category that corresponds to the product. However, when I open the modal, the selected group/category is not displayed in the d ...

The Ajax search box displays results from the most recent query

Hey there, I need some assistance with a request: var searchResults = new Array(); var ajaxRequest = function (value, type) { if (typeof(type) === "undefined") type = "default"; var ajaxData = { "title" : value, "limit" : ...

Dealing with the issue of undefined return value in JavaScript (Express.js) when

Hello There! Greetings! I wanted to express my gratitude in advance for any assistance provided. Today, while working on a method named findOne for my class, I utilized an arrow function with the .find method. However, I encountered an issue where it woul ...

fetch and modify data simultaneously in firebase

Is there a way to retrieve a value from a Firebase document and immediately update it? I am familiar with methods for updating documents and retrieving their values separately, but how can I accomplish both in one go? update firebase.firestore().collecti ...