2013-09-27 111 views
-1

我有一個表格textarea,一些input[type=text]和其他input[type=file]。我通過Jquery Form插件提交表單,但我無法通過任何方式清除/休息表單。我試過clearFrom和resetForm形式的插件選項和一些其他的,沒有似乎工作如何有效清除/放置表單?

HTML

<form action="validade_main_cenas.php" method="POST" enctype="multipart/form-data" class="post-cenas-form" id="post-cenas-form" name="post_cenas_form"> 
    <div> 
     <fieldset> 
      <label>cenas</label> 
      <textarea name="cenas" rows="" class="ask_cenas_form_input_question" placeholder="cenas your cenas..."></textarea> 
     </fieldset> 
     <fieldset> 
      <div class="image-post-container" id="image-post-container"> 
       <div id="image-post-preview" class="image-post-preview"> 
        <img id="image-preview" name="image-preview" class="image-preview" src="#"> 
       </div> 
      </div> 
     </fieldset> 
     <fieldset> 
      <label>Tags</label> 
      <input id="tags" name="tags" class="input-block-level" type="text" placeholder="e.g cenas"> 
     </fieldset> 
     <div id="" class="footer"> 
      <div id="" class="footer-post-image"> 
       <button type="button" id="yourBtn" class="btn" onclick="getFile()"><i class="icon-camera"></i> 
       </button> 
       <div style='height: 0px;width: 0px; overflow:hidden;'> 
        <input id="upfile" type="file" name="myfile" value="upload" /> 
       </div> 
      </div> 
      <div id="" class="footer-submit-button"> 
       <input type="submit" id="cenas_it" class="btn btn-hunch" value="Hunch" /> 
      </div> 
     </div> 
     <!-- close footer !--> 
    </div> 
    <!-- wrapper para quando existe imagem !--> 
</form> 
<script type="text/javascript"> 
    function getFile() { 
     document.getElementById("upfile").click(); 
    } 

    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       $('#image-preview').attr('src', e.target.result); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#upfile").change(function() { 
     readURL(this); 
     $('#image-post-container').slideDown('fast'); 
    }); 
</script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript" src="js/load_questions.js"></script> 

JS

$(document).ready(function() { 
    var options = { 
     clearForm: true, 
     resetForm: true, 
     success: function (html) { 
      $("ol#list-feed").prepend(html); 
      $("ol#list-feed li:first").slideDown(600); 
      $("ol#list-feed li div.footer-post").hide(); 
      resetForm($('#post-cenas-form')); 
      document.getElementById('set-width1').reset(); 
      document.getElementById('upfile').reset(); 
      document.getElementById('tags').reset(); 
      //document.getElementById('set-width1').val(''); 
      //document.getElementById('tags').val(''); 
      if ($("ol#list-feed > li").size() <= 3) { 
       $('#loadmorebutton').hide(); 
      } else { 
       $("ol#list-feed > li:last").remove(); 
       $('#loadmorebutton').show(); 
      } 
      $('form#post-cenas-form')[0].reset(); 
      //$("#post-cenas-form").resetForm(); 
      //$(this).children(':input').val(''); 
     }, 
     error: function() { 
      alert('ERROR: unable to upload files'); 
     }, 
     complete: function() { 
      resetForm($('#post-cenas-form')); 
      document.getElementById('set-width1').reset(); 
      document.getElementById('upfile').reset(); 
      document.getElementById('tags').reset(); 
      //$('form#post-cenas-form')[0].reset(); 
      //$(this).children(':input').val(''); 
     }, 
    }; 
    $("#post-cenas-form").ajaxForm(options); 
    function resetForm($form) { 
     $form.find('input:text, input:password, input:file, select, textarea').val(''); 
     $form.find('input:radio, input:checkbox') 
     .removeAttr('checked').removeAttr('selected'); 
    } 
}); 
+5

'$( '#後cenas形式')[0] .reset段();'應該是綽綽有餘。擺脫其餘的。 –

+0

我曾嘗試過。不過,我按照你的建議添加$('form#post-question-form')[0] .reset();對「成功」和「完整」都沒有影響。你能想象會發生什麼? – crowdfun

+1

謝謝凱文B!這對我也很有幫助!我通常用一組「設置值」來設置按鈕和點擊功能 - 「:」 - :-) – TimSPQR

回答

-1

您可以使用:

$('#FORM-ID').reset();

UPDATE: 忘了提,你應該使用此功能擴展jQuery的:

jQuery.fn.reset = function() { 
     $(this).each (function() { this.reset(); }); 
    } 
+0

添加按鈕點擊或者其他什麼 – HasanAboShally

+1

不,你不能。 jQuery對象不支持'reset()'方法。 'DOM元素可以做到'

'。 –

+0

@FrédéricHamidi謝謝你,我已經更新了評論,這應該現在工作:) – HasanAboShally