webpart form submit to custom list in sharepoint

Question

Is it possible to create a form visual webpart with fields like name, email, address and submit button. After user submit data should be submitted to sharepoint custom list here custom list will have same fields like name, email, address. I created one custom list.

I search on internet but i didn't find any solutions for that. Also am new to sharepoint. If any one can provide some links it will be helpful.

Thanks

Answer 1

Yes, this is very possible using jQuery and AJAX.

So, lets say that, just to be brief, this is your input:

<input type='text' id='name' />
<input type='submit' id='submitdata' value='submit />

Using jquery, you would do this:

$(function(){

    $('#submitdata').click(function(){
        //this gets the value from your name input
        var name = $('#name').val();
        var list = "PutYourListNameHere";

        addListItem(name, list);
    });

});

function addListItem(name, listname) {

var listType = "PutTheTypeOfListHere";

// Prepping our update & building the data object.
// Template: "nameOfField" : "dataToPutInField"
var item = {
    "__metadata": { "type": listType},
    "name": name
}

// Executing our add
$.ajax({
    url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
    type: "POST",
    contentType: "application/json;odata=verbose",
    data: JSON.stringify(item),
    headers: {
        "Accept": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function (data) {
        console.log("Success!");
        console.log(data); // Returns the newly created list item information
    },
    error: function (data) {
        console.log("Error!");
        console.log(data);
    }
});

}

This SHOULD work. I am not at work where my SharePoint station is, so if you are still having issues with this, let me know.

Answer 2

You may use SPServices also, It will work

<script type="text/javascript" src="~/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="~/jquery.SPServices-0.7.2.min.js"></script>

HTML

<input type='text' id='name' />
<input type='text' id='email' />
<input type='text' id='mobile' />
<input type='submit' id='submit' value='Submit' />

SPServices

<script type="text/javascript">
$("#submit").click(function(){

    var Fname=$("#name").val();
    var Email =$("#email").val();
    var Mobile =$("#mobile").val();

    $().SPServices({ 
        operation: "UpdateListItems", 
        async: false, 
        batchCmd: "New", 
        listName: "YourCustomListName", 
        valuepairs: [["Fname", Fname], ["Email", Email], ["Mobile", Mobile]], //"Fname","EMail" and "Mobile" are Fields Name of your custom list
        completefunc: function(xData, status) { 

            if (status == "success") {
                alert ("Thank you for your inquiry!" );
            }
            else {
                alert ("Unable to submit your request at this time.");
            }

        }
    });
});
</script>