如何在ajaxForm中传递动态变量

时间:2016-07-20 08:25:22

标签: javascript php jquery ajax

我使用查询ajaxFrom提交表单,我的代码是这样的:

 (function() {
         $('#modal2From').ajaxForm({

             beforeSubmit: function(arr, $form, options) 
             {
               arr.push( {dataKind:'major', grade: selectedGrade });
             },

             /*dataType: "text",
             data: {
                 dataKind: "major",
                 grade: selectedGrade
             },*/

             beforeSend: function() {

             },

             success: function(msg) {
                 console.log(msg);
             },
             error: function(err) {

             },
             complete: function(xhr) {

             }

         });

     })();

问题是selectedGrade是一个动态变量,因为当我加载页面时ajax被调用,selectedGrade未定义,因为用户还没有选择等级,所以我不能在php文件中通过$_POST['grade']访问它。
请注意,如果我从selectedGrade移除data {},我的代码就可以正常工作。

这是HTML代码:

 <div id="modal1" class="modal modal-fixed-footer" style="text-align:right;">
         <form enctype="multipart/form-data" name='modal1From' role="form" id="modal1From" method="post" action="../php/upload.php">
           <div class="modal-content">

                 <div class="row">
                    <div class="file-field input-field col s12 m6 offset-m6 tool tipped">
                        <div class="file-path-wrapper col s9 m9">
                           <input id="modal1FilePath" class="file-path validate" type="text">
                        </div>
                      <div class="btn col s3 m3">
                         <span>Choose</span>
                         <input type="file" name="files" id="modal1FileUpload">
                      </div>
                    </div>
                    <div class="progress tooltipped" id="modal1Progress" data-position="bottom" data-delay="50" data-tooltip="0%" style="top:10px;display:none;">
                       <div class="determinate" style="width:0%;"></div>
                    </div>
                 </div> 
            </div>

            <div class="modal-footer">

                  <a href="#!" class="modal-action waves-effect waves-green btn-flat left modalConfirm" type="">Confirm</a>
                  <a class="waves-effect waves-light btn stop_upload_btn" style="float:left;display:none;">Stop</a>
                  <a class="modal-action modal-close waves-effect waves-green btn-flat left">close</a>

            </div>

       </form>

  </div>

表单在$("#modal1From").submit();点击

上提交:. modalConfirm

2 个答案:

答案 0 :(得分:0)

E,

将ajax()调用绑定到某些事件,例如

$('button').click(function(){
var val = $('#selectedGrade').val();
if(val != '')
{
   // call ajax
}
else
{
  // show error message
}
});

肯定会有所帮助。

答案 1 :(得分:0)

您可以在beforeSubmit函数中设置gradle属性。

来自ajaxForm docs:

  

beforeSubmit:在表单之前调用的回调函数   提交。 'beforeSubmit'回调可以作为钩子提供   运行预提交逻辑或验证表单数据。如果   'beforeSubmit'回调返回false然后表单不会   提交。使用三个调用'beforeSubmit'回调   参数:数组格式的表单数据,jQuery对象   表单,以及传递给ajaxForm / ajaxSubmit的选项对象。

所以你可以改变你的beforeSubmit函数,如下所示:

beforeSubmit : function(arr, $form, options){
    arr.push( {name:'gradle', value: your-selectedGradle-value })
},