JQuery ajaxSubmit function is not working for a form in an AngularJS HTML page

Question

I am trying to patch up a legacy image upload code with AngularJS. I have an HTML page which contains a form. Following is the HTML part of the code.

<form name="testForm" ng-init="testfunc()" novalidate>
    <div id="adduser_header">
        <div>
            <p><b>Add new user</b></p>
        </div>
    </div>
    <div id="userInfo">
        <div>
            <label>First Name</label>
            <input type="text" name="fname" required>
        </div>
        <div>
            <label>Last Name</label>
            <input type="text" name="lname" required>
        </div>
        <div>
            <form id="imageuploadForm"
                  action="/Projectname/jersey/ImageUploader/uploadimage"
                  method="POST" enctype="multipart/form-data"
                  accept-charset="utf-8" name="submitForm">
                <div>
                    <input id="imagename" type="text" readonly="readonly"
                           placeholder="Click browse to upload image">
                    <div id="uploadImgBtn" onclick="getImgFile()">
                        <span>Browse</span>
                    </div>
                </div>
                <input id="userID" name="userID" type="hidden">
                <input id="userImage" name="userImage" type="hidden">
                <input id="usertType" name="usertType" type="hidden">
                <p style="display: none;">this is your file input tag, so i hide it!
                i used the onchange event to fire the form submission</p>
                <div><input id="uploadimgfile" type="file" value="upload"
                            required="required" autofocus="autofocus" 
                            name="imgfile"
                            onchange="upImgFile(this, event)">
                </div>
                <input style="display: none;" type="submit" value="Send">
            </form>
        </div>
    </div>
    <div id="action_buttons">
        <input id="save_user" value="Add User" type="button"
               title="Add User"
               ng-click="submitRegistrationForm()"
               ng-disabled="testForm.$invalid">
        <a ui-sref="home-admin" ng-click="return()">
            <input id="canceltoreturn" value="Cancel" type="button" title="Cancel">
        </a>
    </div>
</form>

I am able to Browse and select an image without any problem. My problem begins when i try to submit this AngularJS form. When i click Add User, i am first submitting AngularJS form named testForm which returns a success with an ID of the user. This ID is passed to the following patch of code (legacy):

uploadImage: function(id)
{
    if($('#imageuploadForm').find('#userImage').val() != "")
    {
        $("#imageuploadForm").find("#userID").val(id);

        var uploadstatus = null;
        $("#imageuploadForm").ajaxSubmit({

                success: function(data)
                {
                    uploadstatus = data;

                    if(uploadstatus == "uploaded")
                    {
                        console.log("Uploaded Successfully!");
                    }
                    if(uploadstatus == "updated")
                    {
                        console.log("Updated Successfully!");
                    }
                    else
                    if(uploadstatus == "problem" || uploadstatus == "notuploaded")
                    {
                        console.log("Some problem occurred!");
                    }
                    $("#imagename").val("");
                    $('#imageuploadForm').find('#userImage').val("");
                },
                error: function(xhr, ajaxOptions, thrownError)
                {
                    console.log(xhr.status);
                }
        });
    }
    else
    {
        alert("Please select some image to upload!")
    }
}

When i am debugging the code, it comes till the line.

$("#imageuploadForm").ajaxSubmit

But nothing happens further. The service mentioned in the action attribute (/Projectname/jersey/ImageUploader/uploadimage) is not called at all.

This ajaxSubmit has worked well when the form was purely in HTML. (Also, i am using jquery.form.js for the ajaxSubmit function.) But since i have tailored the code in AngularJS way, image uploading has stopped working. What am i doing wrong here? I am not able to understand it. How can i resolve this issue?

You have to check docs.angularjs.org/api/ng/service/$http

Mayank Vadiya
– Mayank Vadiya

2020-01-30 07:55:35 +00:00
Commented Jan 30, 2020 at 7:55 — Mayank Vadiya
– Mayank Vadiya, Commented Jan 30, 2020 at 7:55

georgeawg · Accepted Answer · 2020-01-30 15:10:47Z

0

It is illegal to nest <form> elements.

From the Docs:

The HTML <form> element represents a document section containing interactive controls for submitting information.

Content categories: Flow content, palpable content

Permitted content: Flow content, but not containing <form> elements

Tag omission: None, both the starting and ending tag are mandatory.

Permitted parents: Any element that accepts flow content

For more information, see

answered Jan 30, 2020 at 15:10

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swanand Phadke Over a year ago

Yes, you were right. When i checked the DOM, i did not see the inner 'form' tag and could find the HTML elements present inside it directly in the DOM. Seems it was omitted automatically (didn't understand the reason though). I have mended my code accordingly and many thanks for your help.

Collectives™ on Stack Overflow

JQuery ajaxSubmit function is not working for a form in an AngularJS HTML page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related