How to submit my form with window.onload using ajax with data pulled from localstorage

Question

In my app I have an input form that uses a post route to find all information on an item based on a project ID. When you search for the project ID you can update and delete each field that is returned, but after you do either one of those actions the page, reloads, and you lose the project you were working on. I want to set the project ID into local storage when you first submit the page to find the information so that way when you edit or delete and the page refreshes it will make an AJAX call with the stored project ID in localstorage and then pull up the same project.

 $("#formData").on('submit', () => {

        localStorage.setItem('search', $('#search').val());

    });

Right now I'm getting a 500 internal server error. If anyone has an idea on how this can be done, I would greatly appreciate it!

window.onload = () => {
        const searchedId = localStorage.getItem('search')

        if (window.location.href.match('/find')) {
            $.ajax({
                url: '/find',
                type: 'POST',
                data: searchedId,
            })
        }
    };

*I'm getting a 500 internal server error..* that is coming from server end. Check your terminal/consoles to know actual cause. — Swati, Jun 07 '21 at 13:56
also, data needs to be an object, not a string, like `data: { searchterm: searchedId},` — Kinglish, Jun 07 '21 at 14:01
Thanks that fixed my error, However it still doesnt post on page load. — Matthew, Jun 07 '21 at 14:08
your code is testing for url and if it finds it, sending an ajax request to that same url — Kinglish, Jun 07 '21 at 14:23

Abdelraouf Ferah · Answer 1 · 2021-06-07T15:41:31.433

Hello I tried to make it work with and make data as object in Ajax options try it out

the solution is based on this answer: window.onload vs $(document).ready()

document ready function (jquery) instead of window.load

$(document).ready(function(){
            const searchedId = localStorage.getItem('search')
    
            if (window.location.href.match('/find')) {
                $.ajax({
                    url:'https://jsonplaceholder.typicode.com/todos',// working URL for dummy result
                    dataType: 'json', 
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'GET',
                    data: {searchterm: searchedId},
                    success: function(result,status, xhr){
                        console.log(status);
                    },
                    error: function(jqXhr, textStatus, errorMessage) {
                        console.log('error : '+errorMessage);
                   }
              });
            }
    });

I made this fiddle its work there is no internal error 500 https://jsfiddle.net/Abdelraoufferrah/q5dtxfw3/66/ sorry for the GET method its only because of the dummy data

How to submit my form with window.onload using ajax with data pulled from localstorage

1 Answers1