0

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.

enter image description here

3
  • Can you be more specific about what is not working? Are you getting an error message displayed by your onQueryFailed? Or an error occuring before you get to executeQueryAsync?
    – willman
    Jan 2, 2020 at 19:10
  • Assuming that the ID of the first item will be "1" is not a safe assumption. The first item created may indeed have an ID of "1", but if that item is deleted and a new item is created, that item would be the first item in the list but would have an ID of "2", and so on. If you truly want the first item from that list, it would be better to SP.CamlQuery to retrieve items without any filter criteria, sorted by ID, with a RowLimit= "1" to just get whichever item has the smallest ID. Even better would be to have some unique metadata value you can filter by in your CAMLQuery.
    – willman
    Jan 2, 2020 at 19:17
  • I apologize, I should've been more clear! When a value is added in the text box, and the submit button is clicked, it does NOT update the value in the list.
    – mehumphry
    Jan 2, 2020 at 20:40

1 Answer 1

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>
12
  • Thank you for the help! I did try to replace the code I had used with the code you provided, but it still isn't working. When a value is entered in the text box, and submit is clicked, the page reloads. Then I go to the list to check it, refresh it, but the list has been unaltered. I have training in CPP, so this java is getting the best of me!
    – mehumphry
    Jan 2, 2020 at 21:29
  • Ah, I missed that mistake too -- change the type on your input element to be "button" instead of "submit". "Submit" causes a postback and full page refresh, you just want to trigger your JavaScript, not reload the page.
    – willman
    Jan 2, 2020 at 21:38
  • I changed it from "submit" to "button". Now the page doesn't refresh, but clicking on Submit doesn't seem to do anything either (the number just stays in the box, nothing on the page changes). Still no update to the list.
    – mehumphry
    Jan 2, 2020 at 21:48
  • Lol, sorry, I was so focused on your JavaScript, I apparently really dropped the ball on looking at your html. Add an onclick = "GetDesc()" attribute to that same input element.
    – willman
    Jan 2, 2020 at 23:18
  • Even with updating that, it is doing the same thing: click submit, no change in page, no update to the list. Not sure what I'm doing wrong.
    – mehumphry
    Jan 3, 2020 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.