SharePoint passing value of text box on click to update list column

Question

I have a text box on one SP page. Upon click of the submit button, I need the numerical value/input to be sent to a column in a list. I have some coding put together from bits and pieces I've found online, but it doesn't work.

(updated to reflect current code)

<table>
<tr>
<td>Shipping</td>
</tr>

<tr>
<td>Domestic:</td>
</tr>

<tr>
<td><input id="domesticshippinginput" name="domesticshippinginput" 
type="textbox" /></td>
<td><input name="ADD" id="btnADD" type="button" value="Submit" onclick=
"GetDesc()" /></td>
</tr>

</table>


<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(updateListItem,'sp.js'); 



function GetDesc()
  {
    var clientContext = new SP.ClientContext.get_current();
    var list = 
    clientContext.get_web().get_lists().getByTitle('CurrentTimeFrame');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><OrderBy><FieldRef Name="ID" /></OrderBy> 
   <Query><Where><Geq><FieldRef Name="ID" /><Value 
 Type="Number">1</Value</Geq></Where></Query><RowLimit>1</RowLimit></View>');
    var items = list.getItems(camlQuery);
    clientContext.load(items);
    clientContext.executeQueryAsync(
      function() {
        if(items.get_count() > 0) { 
            var domesticshippingItem = items.getItemAtIndex(0); 
            domesticshippingItem.set_item('days', 
document.getElementById("domesticshippinginput").value);
            domesticshippingItem.update();

            clientContext.executeQueryAsync(Function.createDelegate(this, 
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed);
        }
        else
        {
            alert('List is empty!');
        }
      },
        function (sender, args) {
            alert('Could not retrieve items from list: ' + 
args.get_message());
        }
    );
}
</script>

Where CurrentTimeFrame is the name of the list, domesticshipping is the name of the title of the row, and days is the column in the list that I need to update a preset value. Domesticshipping is the very first item in the list. This is all coded in the same Snippet (not sure if that matters), and using SharePoint 2013.

Answer 1

• First, as mentioned in the comments above, you should not assume that ID of the first item is 1, you need a more predictable way to get your item.
• Second, the set_item method should be called from the variable that holds the reference to the item you retrieved. You code calls listItem.set_Item, but listItem is not a defined object.
• Finally, the attempt to get the value from the textbox will likely not succeed with just a reference to the element's name, you need to use document.getElementById to get a reference to the textbox and get that element's value.

Try the following code:

<table>
    <tr>
        <td>Shipping</td>
    </tr>

    <tr>
        <td>Domestic:</td>
    </tr>

    <tr>
        <td>
            <input id="domesticshippinginput" name="domesticshippinginput" type="textbox" />
        </td>
        <td>
            <input name="ADD" id="btnADD" type="button" value="Submit" onclick="saveDomesticShipping()" />
        </td>
    </tr>

</table>


<script language="javascript" type="text/javascript">
    function saveDomesticShipping() {
        var clientContext = SP.ClientContext.get_current();
        var list = clientContext.get_web().get_lists().getByTitle('CurrentTimeFrame');

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><OrderBy><FieldRef Name="ID" /></OrderBy><Query><Where><Geq><FieldRef Name="ID" /><Value Type="Number">1</Value></Geq></Where></Query><RowLimit>1</RowLimit></View>');
        var items = list.getItems(camlQuery);
        clientContext.load(items);
        clientContext.executeQueryAsync(
            function () {
                if (items.get_count() > 0) {
                    var domesticshippingItem = items.getItemAtIndex(0);
                    domesticshippingItem.set_item('days', document.getElementById("domesticshippinginput").value);
                    domesticshippingItem.update();

                    clientContext.executeQueryAsync(function () {
                        alert('successfully saved new value!');
                        // TODO: better save confirmation
                    },
                        function (sender, args) {
                            alert('Could not update item: ' + args.get_message());
                            // TODO:  better error handling
                        });
                }
                else {
                    alert('List is empty!');
                    // TODO:  better error handling
                }
            },
            function (sender, args) {
                alert('Could not retrieve items from list: ' + args.get_message());
                // TODO:  better error handling
            }
        );
    }
</script>