javascript - http python を投稿する

Question

以下の python スクリプトを実行すると、HTML ファイルが生成されます。ユーザーがをクリックするとsubmit your request、その下の大きなテキストエリアに、別の Python スクリプトに送信するパラメーターが入力されます。現在、それを機能させる唯一の方法は、テキストエリアを下部のテキストボックスに貼り付けて、を押すことEnterです。

submit your request一番下のテキストボックスをなくして、が収集したデータの内容をに送信してもらいたい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="adel.elhallak@gmail.com" ></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)

score 1 · Accepted Answer

これは実際には JavaScript またはブラウザに関する質問です。これらのことを行うためのより良い方法があります。フォーム送信のような JavaScript ポストリクエストが表示されるかもしれませんが、質問に答えるには:

探している入力タイプ (フォームアクションを発生させるボタン) はtype="submit". テキストエリアを表示したくない場合は、非表示にすることができます。最小バージョンは次のとおりです。

<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>

javascript - http python を投稿する

1 に答える 1

Related

Reference