Sending data using jQuery to a web API

One thing on my mind: 1. Is it necessary for the names to match when transmitting data from client to my webapi controller?

In case my model is structured like this:

public class Donation
{
    public string DonorType { get; set; }
    //etc
}

But the form on my webpage looks like this:

<div class="button-group grid-x align-center" id='sz-gift-source-group'>
    <a class="hollow button cell small-6" id="sz-donate-individual" sz-data-toggle-button required>A family or individual</a>
    <a class="hollow button cell small-6" id="sz-donate-corporate" sz-data-toggle-button>A business or company</a>
</div>

Along with an event handler like this:

$('form button[type=submit]').on('click', () => {
const donation = getDonation();

$.post(
    '//localhost:61012/api/Donation',
    $("#sz-donate-form").serialize(),
    (data) => {
        console.log(`post succeeded:[${JSON.stringify(data)}]`); 
    })
    .fail((data) => {
        console.log(`post failed:[${JSON.stringify(data)}]`);
    })
    .always((data) => {
        console.log(`post complete:[${JSON.stringify(data)}]`);
    });

return false;
});

Additionally, how can I extract the data from the form and place it into the Donation object?

I've noticed that many tutorials overlook my initial question, leaving me wondering if my form is incomplete...

Answer №1

Remember to wrap your inputs inside a form tag to serialize data:

<form action="/" method="post" id="sz-donate-form">
    <input name="DonorType" type="text">
</form>

Keep in mind that when using serialize(), form data is serialized based on input names!

Make sure the name attribute matches the Donation class property.

I see you are working with typescript.

Your javascript code looks good.

Please provide your action code for webapi guidance.

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

The update function in model.findByIdAndUpdate() is failing to make changes

I am struggling to update a user model with new data using findByIdAndUpdate(). Despite my efforts, the model does not reflect the changes made. Below is the code snippet where I am attempting to use findByIdAndUpdate() to add an object: const User = ...

Using jQuery to display checkbox text even when it is not directly adjacent to the checkbox

I'm struggling to display the checked value text as shown in the image without any refresh or click. Can anyone offer assistance? This is my PHP dynamic form: <div class="products-row"> <?php $tq=$conn->query("select * from os_tiffen ...

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

Concealing elements using react navigation

Just diving into React.js and I've got a question regarding react router. I'm a bit confused about nested routes in react router. Let's say we have the following code snippet (taken from react-router's github page) <Router> < ...

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

Utilize jQuery to access the text content of the desired element

Looking to extract the text from a targeted element within an unordered list <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> using this code snippet $('ul').click(function() { th ...

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

What causes the discrepancy in the output values of the sha1 algorithm when using the packages object-hash and crypto/hashlib

On my frontend, I have implemented a JavaScript function that compares two sha1 hashes generated by the object-hash library. This is used to determine if there are any changes in the input data, triggering a rerun of a processing pipeline. To interact wit ...

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

Issue retrieving Select2 tag values from view to controller in ASP.NET MVC 5

I need assistance in transferring tag values from the view to the controller. Here is my approach: I have a model attribute for fetching Select2 values: In the model: public string[] TagList { get; set; } In the view, I have a select element like this: ...

incorrect choice of ngClass

Having sifted through numerous queries, I have come to this realization... The angular [ngClass] is behaving oddly when it comes to values like 10, 24, and 100. I can't seem to figure out the reason behind this behavior. Perhaps someone here might be ...

What could be causing the issue with my hour parameter in node-cron?

Having difficulty setting up a cron job to run with node-cron every Monday at 8:30. I've tried using "30 8 * * Mon" and even "30 08 * * Mon", but it doesn't seem to work. Interestingly, "30 * * * Mon" does work and runs every hour on the 30th min ...

Looking to convert a jQuery function to plain JavaScript code?

Struggling with my homework, I must apologize for any mistakes in my English. My task involves creating a chat using node.js and I found some code snippets on a website "" which I used successfully. The issue now is that the chat relies on old jQuery libr ...

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

Retrieve the user_id without triggering any route

Is there a way to access the logged in user data without needing to make a request to any route or endpoint? //for example, how can I retrieve the id of the logged in user here? router.get('/',function(req,res,next){ //typically we would acce ...

How to show a placeholder in a select input using ReactJS

I'm currently trying to incorporate placeholder text into a select input field using ReactJS, but it doesn't seem to be working as intended. Here is the code snippet I am working with: <Input type="select" placeholder="placeholder"> ...

What methods can I use to evaluate the efficiency of my website?

Is there a way to assess and improve website performance in terms of load time, render time, and overall efficiency? I've heard of YSLOW for firebug, but am curious if there are any other tools or websites available for this purpose. ...

Conflicting jQuery in Magento

Within my head.phtml file, I have the following code to implement a menu: <script src="<?php echo $this->getJsUrl(); ?>lib/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="<?php echo $this->getJsUrl(); ?> ...