How do I get custom input values to save when I click the save button in a form

Question

I currently have a list form that I am included custom fields on. I'm using jquery to store the values.

To store the values I've create a function that will be called when the Save button is clicked. The issue I'm having is when I debug the code in the browser it gets the SubmitForm function and the values are stored to hidden single line of text fields (out of the box sharepoint fields).

When I open the item in display or Edit the single line of text fields never retain the value.

What can I do to make sure the field hold the value and the form is saved?

SubmitForm function

SubmitForm = function() {
var resVal = $('input:radio[name="EventSet"]:checked').val();
var resCat = $('.Category option:selected').val()
        if (resVal != undefined)
        {
            $('input[title="ResField"]').val(resVal)
        }

       $('input[title="ReservationCategory2"]').val(resCat)
}

Onclick Event

$('body').on('click', 'input[value="Save"]', function() {
   SubmitForm();
}

Answer 1

You should change your approach. Instead of setting value on Save Click, try setting on change events

$('input:radio[name="EventSet"]').click(function(){
    var resVal = $('input:radio[name="EventSet"]:checked').val();
    if (resVal != undefined)
    {
        $('input[title="ResField"]').val(resVal)
    }

    alert(resVal);
    alert($('input[title="ResField"]').val());
});

$('.Category').on('change', function (e) {
    var resCat = $('.Category option:selected').val()
    $('input[title="ReservationCategory2"]').val(resCat)

    alert(resCat);
    alert($('input[title="ReservationCategory2"]').val());
});

Answer 2

You should be using fields, either HTML or ASP to post them if you're going to use the submit method, which then submits the contents of the form. If you want them to look or behave when used a certain way, you can still use jQuery, but use it in conjunction (ie write to a form that is hidden behind the scenes)

If you're going to handle the data in jQuery/JavaScript alone, you're going to have to submit the data through a service call yourself (ex: REST) and then update the form accordingly to indicate the outcome.