We help IT Professionals succeed at work.

html form loop with type

ITsolutionWizard
on
I have the following codes to just loop inside of the html form and get the field name and value
it works as long as it is <input type=text>
I have textarea now inside of the form and do not know how to make it works.

Can you help? I tried to 'type' but it shows undefined.



function SubmitAPI(apiurl_value, stagecompleted_value, successmsg_value, emailsubject_value, emailaddress_value, emaildestination_value) {
    var x = $('#formdiv *').serializeArray();
    var data = {};
    var apiurl = apiurl_value;
    var stagecompleted = stagecompleted_value;
    var successmsg = successmsg_value;
    var emailsubject = emailsubject_value;
    $.each(x, function (i, field) {
        data[field.name] = field.value;
    });
    var jsondata = JSON.stringify(data);
    $.ajax({
        url: apiurl,
        type: "POST",
        data: { 'message': jsondata.replace(/\"/g, "'"), 'email': emailaddress_value, 'emailsubject': emailsubject, 'emaildestination': emaildestination_value },
        dataType: 'json',
        success: function (data) {
            if (data.stage === stagecompleted) {
                alert(successmsg);
                document.location.reload();
            }
        },
        error: function (msg) { alert(msg); }
    });
    return false;
}

Open in new window

Comment
Watch Question

Most Valuable Expert 2018
Distinguished Expert 2019

Commented:

Hi,


If you're trying to send the form contents through your AJAX request, you can just use the serialize() method on the form:


function SubmitAPI(apiurl, stagecompleted, successmsg, emailsubject, email, emaildestination) {  
    $.ajax({
        url: apiurl,
        type: 'post',
        dataType: 'json',

        data: {
            message: $('#formId').serialize(),
            email,
            emailsubject,
            emaildestination
        },

        success: function(data) {
            ...
        }




Author

Commented:
Thanks but how to capture all of the data on the back using controller c#
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hi,

Nothing changes from the server end of things. You do the same as you did previously. This was a question on how to add all your form fields to the AJAX request and I've shown you how to do that.

Author

Commented:
I did try and it does not work

Author

Commented:
Please show me how to do it on code behind controller. Thanks
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hi,

I'm a little confused. In your original question, you just asked how to send the form data via AJAX, and you said that what you had currently worked, so I'm assuming you already have the code-behind set up and working. The code I've shown has nothing to do with the backend - it just sends the data to your server in the same way as you previoulsy did.

If you have a question about handling the request in your C# code-behind, then you'll need to open a new question as this one was about HTML and jQuery.

You can post up your controller code if you want me to have a look at it

Author

Commented:
Thank you. I appreciate your helps

  [HttpPost]
        [ValidateInput(false)]
        public JsonResult ReceiveJson(string message, string email, string emailsubject, string emaildestination)
        {
            #region str object
            string stageCompletedLabel = System.Configuration.ConfigurationManager.AppSettings["StageCompletedLabel"];
            string emailReceiver = emaildestination;
            Domain.Contact c = new Domain.Contact();
            string guidKey = Guid.NewGuid().ToString();
            string fromEmail = email;
            var responseStr = JsonConvert.DeserializeObject<Dictionary<string, string>>(message);
            string dataList = "";
            string breakInHtml = "<br>";
            foreach (var kv in responseStr)
            {
                #region get data                 
                dataList = dataList + (kv.Key.Replace("_", " ") + ": " + kv.Value + breakInHtml);
                #endregion
            }
            #region email
            DomainHelper.SMTP.SendEmailWithOutAttachment(emailsubject, dataList, fromEmail, emailReceiver);
            #endregion

            #endregion
            c.stage = stageCompletedLabel;
            return Json(c, JsonRequestBehavior.AllowGet);
        }

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Ahh right.

Your code-behind is expecting JSON, so we'll need to edit the AJAX call a little. My code didn't convert the data to JSON. In my code, just convert the data:

data: {
    message: JSON.stringify( $('#formId').serialize() ),
    email,
    emailsubject,
    emaildestination
},

Open in new window

If that doesn't work, just debug your code behind and see what's being received in the message variable

Author

Commented:
How?

Author

Commented:
Or you can show me by some codes sample in the controller
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
Hi,

Not sure what you mean by How?. The code I posted shows how to send the data to the backend as JSON.

If you need help with your controller, you'll need to open a new question in the C# Zone as this is tagged as HTML and jQuery. The original question was about how to send all your data to the server, which we've answered. If you're having problems with your Controller, then that's an entirely different question and better answered in the correct Topic Zone