Post http python

Question

When run, the below python script produces an HTML file. When the user clicks on submit your request, the big textarea below it is filled with parameters that I want to send to another python script. Currently the only way I can get it to work is to paste the textarea to the textbox at the bottom, and press Enter.

I would like to eliminate the bottom textbox, and get the submit your request to send the content of the data collected by Submit_for_Processing().

#!/Python27/python

import cgi, os
import cgitb; cgitb.enable()  # for troubleshooting
print "Content-type: text/html"
print
print """

<!DOCTYPE html>
<html>
  <head>
<title>Order Form</title>
<font size="11"><b>Order Form</b></font><img border="0" src="cross.bmp" width="70" height="70" align="right">
<br>
</br>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<style>
#map_canvas{
    height:400px;
    width:800px;
}   
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/JavaScript">

</script>
<script>        
  var marker, myCircle, map;
  var geocoder;
    function initialize() {
    var myLatlng = new google.maps.LatLng(43.651975,-79.378967);
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), 
        mapOptions);


    google.maps.event.addListener(map, 'click', function(event){
        var x=document.getElementById("mySelect").selectedIndex;
        var y=document.getElementById("mySelect").options;
        addMarker(event.latLng,Number(y[x].text));
        document.getElementById("lat").value =event.latLng.lat();
        document.getElementById("lon").value =event.latLng.lng();

        });
  }
//////////////////////////////////
  function codeAddress() {
    var address = document.getElementById('autocomplete').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        //var myLatlng1 = new google.maps.LatLng(43.651975,-79.378967);
        addMarker(results[0].geometry.location,250)
    } else {
        alert('Geocode was not successful for the following reason: ' + status);
}
  });
}
///////////////

  function addMarker(latLng,givenRadval){   
    document.getElementById("lat").value =latLng.lat();
    document.getElementById("lon").value =latLng.lng();
    //clear the previous marker and circle.
    if(marker != null){
        marker.setMap(null);
        myCircle.setMap(null);
    }

    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable:true,
        icon:"logo.bmp"
    });

    //circle options.
    var circleOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0,
        map: map,
        center: latLng,
        radius: givenRadval
      };
     //create circle
    myCircle = new google.maps.Circle(circleOptions);

    //when marker has completed the drag event 
    //recenter the circle on the marker.
    google.maps.event.addListener(marker, 'dragend', function(){
    myCircle.setCenter(this.position);
    document.getElementById("lat").value =this.position.lat();
    document.getElementById("lon").value =this.position.lng();

    });     
}

google.maps.event.addDomListener(window, 'load', initialize)
function Submit_For_Proccessing(){
    document.getElementById("Request_Details").value=
                                                    "'"+document.getElementById("lat").value +"' '"+ 
                                                    document.getElementById("lon").value +"' '"+
                                                    document.getElementById("mySelect").value+"' '"+
                                                    document.getElementById("street_number").value+"' '"+
                                                    document.getElementById("street_name").value+"' '"+
                                                    document.getElementById("city").value+"' '"+
                                                    document.getElementById("Postal_Code").value+"' '"+
                                                    document.getElementById("province").value+"' '"+
                                                    document.getElementById("country").value+"' '"+
                                                    document.getElementById("Site_Name").value+"' '"+
                                                    document.getElementById("reference_number").value+"' '"+
                                                    document.getElementById("Your_name").value+"' '"+
                                                    document.getElementById("email_address").value+"'";





}
</script>
  </head>
  <body onload="initialize()">

<div id="map_canvas" style="width:auto;height:400px;"></div>
<form method="post" action="index.cgi">
    <fieldset style="float:left;width :300px;padding : 10px;margin: 1em 0.7em 0.3em;display : inline-block;height: 210px;">
    <legend><b>1. Define your Area of Interest:</b></legend>
        <table>
            <tr><input id="autocomplete" name="auto" size="24" type="textbox" value="" color="green" ><input type="button" value="Zoom" onclick="codeAddress()">
            <tr><td align="left">Study Radius:</td><td><select width="120" style="width: 120px" id="mySelect"><option>200</option><option selected="true">250</option><option>300</option></select> Meters</td></tr>
            <tr><td align="left"><a href="http://en.wikipedia.org/wiki/Latitude">Latitude</a>:</td><td><input size="18" type="text" id="lat" value="" disabled></td></tr>
            <tr><td align="left"><a href="http://en.wikipedia.org/wiki/Longitude">Longitude</a>:</td><td><input size="18" type="text" id="lon" value="" disabled></td></tr>
        </table>
    </fieldset>



    <fieldset style="float:left;width :300px;padding : 10px;margin: 1em 0.7em 0.3em;display : inline-block;height: 210px;">
    <legend><b>2. Define Address Details:</b></legend>
        <table>
            <tr><td align="left">Street Number</a>:</td><td><input size="18" type="text" id="street_number" value="3504" ></td></tr>
            <tr><td align="left">Street Name</a>:</td><td><input size="18" type="text" id="street_name" value="Hurontario" ></td></tr>
            <tr><td align="left">City</a>:</td><td><input size="18" type="text" id="city" value="Mississuaga" ></td></tr>
            <tr><td align="left">Postal Code</a>:</td><td><input size="18" type="text" id="Postal_Code" value="L5B0B9" ></td></tr>
            <tr><td align="left">Province</a>:</td><td><input size="18" type="text" id="province" value="Ontario" disabled ></td></tr>
            <tr><td align="left">Country</a>:</td><td><input size="18" type="text" id="country" value="Canada" disabled ></td></tr>
        </table>
    </fieldset>

    <fieldset style="float:left;width :300px;padding : 10px;margin: 1em 0.7em 0.3em;display : inline-block;height: 210px;">
    <legend><b>3. Define Report details</b></legend>
    <table>
            <tr><td align="left">Site Name</a>:</td><td><input size="22" type="text" id="Site_Name" value="Contaminated site 01" ></td></tr>
            <tr><td align="left">Reference Number</a>:</td><td><input size="22" type="text" id="reference_number" value="Order001" ></td></tr>
            <tr><td align="left">Your Name</a>:</td><td><input size="22" type="text" id="Your_name" value="Adel Hallak" ></td></tr>
            <tr><td align="left">Email Address</a>:</td><td><input size="22" type="text" id="email_address" value="[email protected]" ></td></tr>
    </table>
    </fieldset>

    <fieldset style="float:left;width :150px;padding : 10px;margin: 1em 0.7em 0.3em;display : inline-block;height: 210px;">
    <legend><b>4. Submit Request</b></legend>
            <input align="center" type="button" value="  Submit your request  " id="Send_coordinates" width="148" height="148" onclick="Submit_For_Proccessing()">
            <textarea rows="4" cols="50" style="width:145px; height:150px;font-size:8pt;" id="Request_Details" name="Request_Details" value="Initial"></textarea>
    </fieldset>

</form>
"""
form = cgi.FieldStorage()
Request_Details = form.getvalue("Request_Details", "(no Request_Details)")
print """       
    <p>%s</p>
<form method="post" action="Thankyou.py">
<p><input type="text" name="Request_Details"/></p>
</form>
</body>
</html>
""" % cgi.escape(Request_Details)

Do yourself a favor, learn about flask or bottle or web.py. This will help make your code readable and maintainable. — 9000
– 9000, Commented Sep 13, 2013 at 2:13
Or django. It's always better using a framework when handling HTTP requests — lborgav
– lborgav, Commented Sep 13, 2013 at 2:28
Hi sorry for the messy code, I am relatively new, and no I still did not post the code it anywhere yet. I only have one HTTP post request, The request goes out of a text box, I want it to go out of the submit my request instead!!! — user2774744
– user2774744, Commented Sep 13, 2013 at 3:38

Community · Accepted Answer · 2017-05-23 10:25:35Z

1

This is really a javascript or browser question. There are better ways to do these things, maybe see JavaScript post request like a form submit, but to answer your question:

The input type you're looking for (a button that causes a the form action to happen) is a type="submit". If you don't want the textarea visible, you can just hide it. Here's a minimal version:

<html>
    <form method="post" action="index.cgi">
        <input align="center" type="submit" value="  Submit your request  " id="Send_coordinates" width="148" height="148" onclick="on_click()"></input>
        <textarea rows="4" cols="50" hidden=true style="width:145px; height:150px;font-size:8pt;" id="Request_Details" name="Request_Details" value="Initial"></textarea>
    </form>
<script>
function on_click(){
    document.getElementById("Request_Details").value = 'data from somewhere'
}
</script>
</html>

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Sep 13, 2013 at 6:06

Thomas

6,8401 gold badge35 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Post http python

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related