How do I pass a html form variable to a perl script via AJAX?

Question

I am trying to pass the html variable from the list menu to the perl script via POST but what happens is that the jQuery ajax() was able to execute the perl without including the value got from the document.getElementById. Here is my HTML code:

<form id="form">
    <p id="survey">
        <label for="list"><b>Ran survey</b></label>
    </p>
    <p>
        <label for="division">Please select division:</label>
            <select type="list" id="list" name="division">
                <option>--Select One--</option>
                <option value="DENVER">Denver</option>
                <option value="PHOENIX_SOUTHWEST">Phoenix-Southwest</option>
                <option value="PORTLAND">Portland</option>
                <option value="SOUTHERN_HOUSTON">Southern-Houston</option>
                <option value="NORCAL">Norcal</option>
                <option value="SEATTLE">Seattle</option>
                <option value="VONS_SoCal">Vons-Socal</option>
                <option value="EASTERN">Eastern</option>
            </select>
        </p>
        <p id="survey">
            <input type="submit" value="Ran Survey" onclick="surveyFunction();" />
        </p>
    </form>

function surveyFunction() {
    var div = document.getElementById("list").value;
    $.ajax({
        type: "POST",
        url: "possurv.pl",
        data: div,
        success: function(result){
            $('#survfeedback').html(result);
        }
    });
}

We need to see the relevant part of the Perl program or its documentation to answer this without guessing. — simbabque
– simbabque, Commented Oct 13, 2015 at 9:54
I'm surprised that this managed to execute the Perl, since the XHR request should be cancelled by the form submission. — Quentin
– Quentin, Commented Oct 13, 2015 at 9:59

Rory McCrossan · Accepted Answer · 2015-10-13 10:15:36Z

2

You need to include the parameter name in the querystring to assign the value to. I assume this should follow the standard practice of being the name of the control. In this case you can either build the querystring yourself:

data: 'division=' + encodeURIComponent(div),

Or you can send an object and let jQuery serialise it to a querystring for you:

data: { division: div },

edited Oct 13, 2015 at 10:15

answered Oct 13, 2015 at 9:46

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Quentin Over a year ago

You forgot to apply encodeURIComponent to the user input for your manual attempt.

simbabque Over a year ago

Who says the Perl program requires the input to be of the type application/x-www-form-urlencoded? Could be it just checks the request body and doesn't expect a named parameter.

Quentin Over a year ago

@simbabque — That would be an extremely odd edge case. Expecting the Perl to take application/x-www-form-urlencoded data is a reasonable assumption.

simbabque Over a year ago

@Quentin I agree, but still, it's an assumption. Rory kind of says that in his second sentence, which is good. Still I wanted to mention it since we cannot know without seeing the Perl code. :)

Rory McCrossan Over a year ago

@Quentin good point about encodeURIComponent, thanks - answer updated.

|

Collectives™ on Stack Overflow

How do I pass a html form variable to a perl script via AJAX?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related