Send the result of python cgi script to HTML
Question: I have a toggle button on a page 'index.html'. When I click on it, it executes
a python cgi script that changes the state of something on my raspberry.

To do so, I do this :

**HTML :**

    
    
    <form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
    <input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="">
    
    <script>
    $(function() {
      $('#toggle-eq').change(function() {
        tgl_state = $('#toggle-eq').prop("checked")
        var toggle = document.getElementById("toggle-eq");
        toggle.value = tgl_state;
        document.getElementById("tgleq").submit();
      })
    })
    </script>
    

**CGI :**

    
    
    #!/usr/bin/env python
    
    import cgi
    import cgitb
    
    cgitb.enable()
    
    print "Content-type: text/html\n\n"
    print
    
    form=cgi.FieldStorage()
    arg1 = form.getvalue('toggle-eq')
    

And then I do what I want to do with my arg1.

Now, what I want is, when you open the web interface page, to get the state of
the raspberry component to initialize the toggle on the right position.

To do so I send a form on page load that launch a script looking at the state
of the component. But how can I get it back in the html ?

I tried [urllib](http://stackoverflow.com/questions/17509607/submitting-to-a-
web-form-using-python) and httplib2 but nothing worked for me... Any
suggestions ?

Thanks


Answer: If I understand your question correctly you want to show the current-state of
your switchable component on the webpage. Currently it looks like you have a
pure HTML page and an CGI page, so I think you have multiple options, one of
them is to combine the HTML and CGI into one page.

The code below is an example of this idea and probably doesn't work correctly,
so not a copy/paste solution.

    
    
    #!/usr/bin/env python
    import cgi
    import cgitb
    
    cgitb.enable()
    print "Content-type: text/html\n\n"
    print
    active="""
    <form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
    <input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="">
    """
    inactive="""
    <form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
    <input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="checked">
    """
    generic = """
    <script>
    $(function() {
      $('#toggle-eq').change(function() {
        tgl_state = $('#toggle-eq').prop("checked")
        var toggle = document.getElementById("toggle-eq");
        toggle.value = tgl_state;
        document.getElementById("tgleq").submit();
      })
    })
    </script>
    """
    
    def set_state(option):
        if (option==True):
            actual_state_Setting_here = 1 # <-magic happens here
        else:
            actual_state_Setting_here = 0 # <-magic happens here
    
    def get_state():
        return actual_state_Setting_here # <- read actual value here
    
    form = cgi.FieldStorage()
    if ( form.getvalue('toggle-eq')=="checked" ):
        set_state(True)
    else:
        set_state(False)
    
    if ( get_state()==True ):
        print(active) #show as currently active
    else:
        print(inactive) #show as currently inactive
    print(generic) #show rest of the page
    

