CODEWITHSUNDEEP
javascriptpythonhtml
Mac Man
Mac Man

Reputation: 171

How to send multiple variables from a HTML web page to a python script without form submissions

This is going to be a strange one if I'm honest so please bare with me.

Im currently working on a project that requires me to call python scripts that are part of a webserver that is running a HTML webpage from the page itself i.e You move a slider on the webpage and it calls the python script and passes the value of the slider and an ID value that the script requires to pass the value to its relevant end point. In this case its a monitor ID and the slider value is the brightness value that the brightness must be set to.

Currently I have achieved this with a form submission action but I don't want the webpage to reset once a new value is sent and so JavaScript is my next best option using Ajax requests and while I have made some progress I am basically a noob with web development and have hit a brick wall.

Here is the script I have attempted and the python script that it calls.

<script>

    slider.oninput = function (event, ui)
    {

        var slider_val=event.target.id;
        console.log(slider_val);
        $( "#"+slider_val ).val( ui.value );
        $( "#amount_"+slider_val ).val( $( "#"+slider_val ).slider( "value" ) );

        changeBrilliance();

    }

function changeBrilliance(value, monid)
{
    $.ajax({
        type: "POST",
        url: "/brilliancechange",
        data: { mydata: value, mon: monid }
    });
}
</script>

Python:

@app.route('/brilliancechange', methods=['POST'])
    def brillchange():
        userinput = request.form['mydata']
        selectedMon = request.form['mon']
        s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        s.connect((HOST, PORT))
        DATA = "A6" + selectedMon + "0000000401C0"
        DATA += hex(int(userinput)).lstrip("0x")
        check = checksum(bytes.fromhex(DATA))
        DATA += hex(int(check)).lstrip("0x")
        dataarray = hextobyte(DATA)
        s.sendall(dataarray)
        s.close()

What should the javascript look like if i want to call this method with a different ID and value each time without it reloading the webpage everytime?

Upvotes: 1

Views: 208

Answers (1)

msl5093
msl5093

Reputation: 11

It looks like changeBrilliance() accepts two parameters but when called nothing is getting passed. I'm not too familiar with the Python framework being used, but as long as it accepts content-type: application/json in POST body you could do:

// not totally sure which value/id combo you need but just pass the necessary ones here
changeBrilliance(slider_val, ui);

function changeBrilliance(value, monid)
{
    var myObj = { 'myData': value, 'mon': monid };

    $.ajax({
        type: "POST",
        url: "/brilliancechange",
        contentType: "application/json",
        data: JSON.stringify(myObj)
    });
}

Then if you want something in the browser to change, you'll have to callback on done if successful or fail if something goes wrong, and always callback for some behavior that should always happen:

$.ajax({
   type: "POST",
   url: "/brilliancechange",
   contentType: "application/json",
   data: JSON.stringify(myObj)
}).done(function(data) {
   // do something 
}).fail(function(jqXHR, textStatus, err) {
   // handle error
}).always(function(data) {
   // always callback
});

Upvotes: 1

Related Questions