2017-05-04 15 views
0

カスタムスタイルでdjangoフォームをレンダリングしようとしています。私はフォームを提出するときにそれは動作していません。しかし、私はカスタムスタイルなしでフォームをレンダリングするときに動作しています。以下のコードは私のhtmlファイルの内容です。誰も私の問題を解決するために私を助けることができます。Djangoフォームの送信が機能していません

{% load staticfiles %} 

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href='{% static "signup/css/style.css" %}' /> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <title>SignUp</title> 
</head> 
<body> 
    <form id="msform" action="" method="post"> 
     <!-- progressbar --> 
    {% csrf_token %} 
     <center> 
     <ul id="progressbar"> 
     <li class="active">Location on Map</li> 
     <li>Personal Details</li> 
     <li>Account Setup</li> 
     </ul> 
     </center> 
     <!-- fieldsets --> 
     <fieldset> 
     <h2 class="fs-title">Location on Map</h2> 
     <h3 class="fs-subtitle">Your address on planet Earth</h3> 
     <div id="googleMap" style="padding: 119.4px;border: 1px solid #ccc;border-radius: 4px;margin-bottom: 10px;width: 100%;box-sizing: border-box;"></div> 
     <script> 
     function initialize() { 
      var myLatLng = {lat: -25.363, lng: 131.044}; 
      var mapProp = { 
      center:new google.maps.LatLng(17.508742,79.120850), 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 
      google.maps.event.addDomListener(window, 'load', initialize); 
      google.maps.event.trigger(initialize, "resize"); 
     } 
    </script> 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpwz7s9u7ZOnrhafotZ_Pas-LLsMaapiQ&callback=initialize"></script> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
     <h2 class="fs-title">Personal Details</h2> 
     <h3 class="fs-subtitle">We will never sell it</h3> 
     {{ form.fname }} 
     {{ form.lname }} 
     {{ form.phone }} 
     {{ form.address }} 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
     <h2 class="fs-title">Create your account</h2> 
     <h3 class="fs-subtitle">Your Account Deatils</h3> 

     {{ form.username }} 
     {{ form.email }} 
     {{ form.password }} 
     {{ form.cpassword }} 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
     </fieldset> 

    </form> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src='{% static "signup/js/jquery.easing.min.js" %}' type="text/javascript"></script> 
    <script type="text/javascript" src='{% static "signup/js/jqueryS.js" %}'></script> 
</body> 

+0

あなたのフォームには何のアクションもありませんので、データを送信する場所はありません – yorodm

+0

私はフォームとプロセスのリクエストをレンダリングする際に同じアクションを使用する際には、だから私は何の行動もしない。 – Lucky

+0

Yeap、html5のいくつかのドラフトでは、この動作でRFC 3986に明示的に違反しているようですが、これは良い方法ではなく、回避する必要があります – yorodm

答えて

1

formタグのaction要素にフォームを処理するビューの名前追加:

<form id="msform" action="{% url 'my_form_view' %}" method="post"> 

それは技術的に必要とされていないにもかかわらず、それはへのベストプラクティスですとにかくそれを加えなさい。

これで解決しない場合は、ブラウザのコンソールでエラーがないか確認してください。

関連する問題