Reputation: 1

Post http python

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)

Upvotes: 0

Answers (1)

Thomas

Reputation: 6782

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>

Upvotes: 1

Post http python

Answers (1)

Related Questions