Submitting form/getting HTML with JavaScript without iframe?

Question

Context: I work a student job transcribing paper reports in a webapp. It's old and we unfortunately can't change the source nor directly run a DB query.

It only checks if the unique ID exists once you submit the entire form, and you can't submit it unless it's entirely filled. Needless to say, it's a huge waste of time as you often transcribe the whole thing only to realise it's a duplicate.

Objective: I made the userscript below that launches a search the search on the onblur of the unique ID's input(noReferenceDeclarant), checks if there are any matches (rows) and returns accordingly. Runs with Greasemonkey. The search form is in another page on the same domain. The search form does not take any URL arguments.

Can this be done without using an iframe (AJAX perhaps?) This is a tool for my own productivity & to learn JS at the same time. As I'm still very much a beginner, any tips to make that code cleaner are welcome.

//Adding function to input's blur event
$(document).on ("blur", "#noReferenceDeclarant", isRefNumberExists);

//Vars
var noReferenceDeclarant = '';
var loadCode = 0;
var $searchForm;

//Fonctions
function isRefNumberExists () 
{
    noReferenceDeclarant = $('#noReferenceDeclarant').val();
    loadCode = 0;

    //Make sure there's data in the input before proceeding
    if (noReferenceDeclarant)
    {
            //Build search iframe
            $searchForm = $('<iframe />', {
                name: 'searchWindow',
                src: 'rechercherGriIntranet.do?methode=presenterRechercher',
                id:   'searchWindow',
                width: 0,
                height: 0           
            }).appendTo('body');

            $searchForm.load(searchRefNumber);
    }   
}

function searchRefNumber()
{
    var isExists = false;

    //Check which "load" it is to avoid submit loops
    if (loadCode === 0)
    {
        loadCode = 1;

        //Filling search form with search term
        $(this.contentDocument).find('#noReference').val(noReferenceDeclarant);

        //Set search form preferences
        $(this.contentDocument).find('#typeRapportAss').prop('checked', false);
        $(this.contentDocument).find('#typeRapportAS').prop('checked', false);
        $(this.contentDocument).find('#typeRapportSI').prop('checked', true);
        //Submit the form
        $(this.contentDocument).find('form:first').submit();
    }
    else if (loadCode === 1)
    {
        loadCode = 2;

        //See if there are any tr in the result table. If there are no results, there a thead but no tr.
        var foundReports = $(this.contentDocument).find('.resultatRecherche tr').length;

        if (foundReports > 0)
        {
            if (confirm('A report matching this ID already exists. Do you want to display it?'))
            {
                //Modal window loading the report in an iframe. Not done yet but that's fairly straightforward.
            }
            else
            {
                //Close and return to the form.
            }
        }

    }

    //Reset variables/clean ressources
    delete $searchForm;
    $('#dateRedactionRapport').focus();

}

Answer 1

On the whole I've seen far, far worse code.

Ajax could do it, but then you'd just have to put the AJAX response into the DOM (as an iframe, most likely).

In this instance, I'd keep the approach you have. I think it is the sanest.j

Without the full context, there may be a way to clean up the loadCode -- but what you have is pretty same and works. A lot of folks would call it a semaphore, but that is just an issue of terminology.

The only thing I"d really clean up is recommend not calling the jQuery object so often..

// Many folks recommend that jQuery  variables be named $<something>
var $doc = $(this.contentDocument);


doc.find('#typeRapportAss').prop('checked', false);
$doc.find('#typeRapportAS').prop('checked', false);
$doc.find('#typeRapportSI').prop('checked', true);

If you wanted to play with jQuery data structures, you could make a 'config' object that looks like this:

var formValues = {
    typeRapportAs: false,
    typeRapportAS: false,
    typeRapportSI: true
};

then iterate over that to (using for ... in with .hasOwnProperty).

Not NEEDED for this project, what you are doing is fine, but it might make a learning exercise.