Error: An identifier was unexpectedly encountered while using the Submit Handler

I am currently working on creating a validation script and an AJAX call. I have encountered a problem where the alert message is not working within the if condition.

I can't seem to figure out what's causing this issue. When I execute the script, Chrome displays the following error:

Uncaught SyntaxError: Unexpected identifier

Here is the code snippet in question :

$("#myCA-Form").validate({

    rules:{
    field1:"required",
    city:"required",
    email:{
    required:true,
    email:true
    },
    phone:{
    required:true,
    number: true,
    minlength:9,
    maxlength:10
    }
    },

    messages:{
    name:"Please enter your username..!",
    email:"Please enter your email..!",
    phone:"Enter your mobile no"
    },


    submitHandler: function(form) {


    var formData =  $(form).serialize();
    var id = $('#product_id2').val();

    var name = $('#field1').val();
    $.ajax({
    url: "https://example.co.in/test.aspx?"+formData,
    type: "POST",
    cache: false,
    dataType: "jsonp",
    crossDomain: true,  
    data: {formd : formData },
    success: function(data) {
     }


    });
     if(id=='100105')
    {
    alert("sdfsd");
    document.getElementById("msg").innerHTML='submit Successfully!!!';
     }

    }

  });

Answer №1

It seems like there is no issue with your code as it is functioning perfectly. The problem might be arising from a different source.

Here is an exact replica of your code, along with additional HTML code:

$("#myCA-Form").validate({

    rules:{
    field1:"required",
    city:"required",
    email:{
    required:true,
    email:true
    },
    phone:{
    required:true,
    number: true,
    minlength:9,
    maxlength:10
    }
    },

    messages:{
    name:"Please enter your username..!",
    email:"Please enter your email..!",
    phone:"Enter your mobile no"
    },


    submitHandler: function(form) {


    var formData =  $(form).serialize();
    var id = $('#product_id2').val();

    var name = $('#field1').val();
    $.ajax({
    url: "https://eaxmple.co.in/test.aspx?"+formData,
    type: "POST",
    cache: false,
    dataType: "jsonp",
    crossDomain: true,  
    data: {formd : formData },
    success: function(data) {
     }


    });
     if(id=='11')
    {
    alert("sdfsd");
    document.getElementById("msg").innerHTML='submit Successfully!!!';
     }

    }

  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myCA-Form">
<input name="field1" type="text"/>
<input name="city" type="text"/>
<input name="email" type="text"/>
<input name="phone" type="text"/>
<input value="11" id="product_id2" type="hidden"/>
<button class="save-post">Save Post</button>
</form>

Answer №2

If you're thinking about adding formdata to the URL, it's best to focus on using the GET method instead of POST. It would be helpful to delve into the differences between POST and GET requests for a better understanding.

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

Having trouble connecting to the webserver? Make sure the web server is up and running, and that incoming HTTP requests are not being blocked by a firewall

While working on my Visual Studio 2013 Asp.Net web code using the Local IIS Web server Version 7 (Windows 7 x64) and Framework 4.0, I encountered an error message stating: "Unable to start debugging on the web server. Unable to connect to the webserver. V ...

Comparison between JSON Serializers and .NET Serialized Classes for Retrieving jQuery AJAX Result Data

What is the best method for transferring data from a .NET (C#, VB.NET) Web Service to the client-side using JQuery AJAX? A) Utilizing Newtonsoft JSON serialization, for example: <WebInvoke(Method:="*", ResponseFormat:=WebMessageFormat.Json, UriTemplat ...

Struggling to comprehend the node.js walker concept

I am struggling to grasp the concept of how the signature/header of the node.js walker functions. I understand that a walker can go through a directory and apply filters, but I'm unsure about how the signature of the .on function works. For example: ...

What is the process for exporting a chart into Excel?

My current challenge involves displaying data extracted from a database in the form of a bar chart and then exporting both the data and the chart as an image into an Excel file. While I have successfully displayed the bar chart, I am facing difficulties in ...

Encountering problem while exhibiting server's response message within a modal popup in Angular 6

I have implemented two custom dialog modals in an Angular component. The objective is to open the appropriate modal and display the response message. The component receives two values as Observables from my services: The name of the modal that needs to ...

Updating a Div with XML data through JQuery

Hey everyone, I have a simple question that I need help with... Currently, I am using jQuery to retrieve an XML document in the following format: $.ajax({ type: verb, url: url, dataType: datatype, success: callback }) } After receiving t ...

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

The hexagons configuration for tsParticles is experiencing technical difficulties

I'm struggling to implement the tsParticles library (specifically using react-tsparticles) in combination with the latest version of Next.js. However, when I try to use the particle.json file and bind it to the <Particles/> component, the partic ...

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

Transmit messages from server (via Expressjs routing) to the client

I am looking for guidance on how to effectively send messages from the server to the client and incorporate this functionality into routes/index.js within my mean stack project. Can anyone provide insights on using socket.io in this context?: router.post( ...

Matching a regular expression pattern at the beginning of a line for grouping strings

One of my tasks involves working with a markdown string that looks like this: var str = " # Title here Some body of text ## A subtitle ##There may be no space after the title hashtags Another body of text with a Twitter #hashtag in it"; My goal ...

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

What is the most efficient method for transferring rows from an SQL Database to JavaScript?

Recently, I've been exploring the dynamic features of HTML5 IndexedDB controlled by Javascript and how to sync it with an SQL Server database for offline access. The challenge I'm facing is determining the most efficient method to transfer data ...

How to Retrieve a Variable from the Parent Component in a Child Component using Angular (1.5) JS

I am currently working on abstracting the concept of a ticket list building into an angular application using 2 components. 1st component --> ("Smart Component") utilizes $http to fetch data and populate an array called populatedList within the parent ("g ...

Baffled by the data visualization produced by Google Chart using information from

Perhaps I'm being a bit ambitious, but I managed to create a basic Chart using GoogleCharts. The problem is that I have to input the values manually, but I want to retrieve them from the Database. I know JSON can accomplish this, but I've spent f ...

`The Art of Binding() with Objects Created on the Fly`

Currently facing challenges with rebinding something using a dynamically created object from prepend. Despite trying several methods, I am only able to unbind. Seeking assistance. $(document).ready(function(){ $(".newdir").click(function(){ $(".d-exp ...

Switch between divs based on the current selection

var header = $("#accordion"); $.each(data, function () { header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" + this.LongName + "</a>" + "<br />", "&l ...

Access to an Express route in Node JS can only be granted upon clicking a button

Is it feasible to create an express route that can only be accessed once a button is clicked? I want to prevent users from entering the route directly in the URL bar, and instead require them to click a specific button first. I'm curious if this can b ...

Utilize AngularJS to create a custom tag with a directive included

I've been working on creating a custom tag for a reusable component in a web page, but I seem to have hit a roadblock. It's not functioning as expected, and I feel like I might be overlooking something. If anyone could provide some guidance or p ...