Modal模态框使用ajax向后台传数据和文件之modal复用

Modal模态框使用ajax向后台传数据和文件之modal复用，昨天把添加计划概要写完了，那么今天要开始添加计划了，经理开始催了，好急好急！！?！ 那么添加计划从哪里开始呢，我们的前段已经编辑好了，像这样的：
OK，重点是天数，我们要先取到天数才行，那么天数之前已经给出了，在第一页上，我们直接用Jquery来取天数的值，因为之前有设置天数的标识位，所以直接赋值到这个标识位上：

$(document).ready(function(){
      $("#days").change(function(){
        var x = $("#days").val();
        $("#index_day").val(x);
      });
    });

当#days的值发生改变时，把#days的值赋给index_day。
我们看一下是不是真的能把值赋过去，
看到这里都是空的,接下来我们在天数里输入值：

可以看到value变成了5，OK一个五天计划就设置好了，
进入天计划后会有每步计划，这个每步计划同样用刚才的方法来获取：
每天计划的源代码：

 <table>
                  <tr>
                    <td valign="top"  class="addmain">
                      <b>今日计划：</b>
                    </td>
                    <td colspan="3" valign="top">
                      <input type="text" name="step" id="step">
                    </td>
                  </tr>
                  <tr class="addmain">
                    <td>
                      <b>时长：</b>
                    </td>
                    <td align="left">
                      <input  type="text" name="step_day" id="step_day">
                    </td>
                    <td>
                      <b>步骤：</b>
                    </td>
                    <td align="right">
                      <input  type="text" name="step_num" id="step_num">
                    </td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top">
                      <b>所需物品：</b>
                    </td>
                    <td colspan="3">
                      <textarea id="need">

                      </textarea>
                    </td>
                  </tr>
                </table>

JS代码：

 $(document).ready(function(){
      $("#step_day").change(function(){
        var x = $("#step_day").val();
        $("#index_step").val(x);
      });
    });

测试看看：

这样我们就把第一天的计划数取到了，然后就要保证modal能循环显示你输入步骤数的次数。
简单的看，第一次输入完天数后，下边有第一步的内容，html源代码：

<table>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>小标题：</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>配合产品：</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"><b>要点：</b></td>
                    <td colspan="3"><input type="text" name=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>美容工具：</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>部位：</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>注意事项：</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>护肤小贴士：</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>休息时间：</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>休息方式：</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr>
                    <td valign="top" class="addmain"><b>添加图片：</b></td>
                    <td colspan="3">
                    <p class="upstep">
                      <p>步骤图<br/>300*200px</p>
                      <input type="text" size="20" name="upfile3" id="upfile3">  
                      <input type="button" value="选择图片" onclick="path3.click()">  
                      <input type="file" id="path3" onchange="upfile3.value=this.value">
                    </p>

                    <p class="upstep">
                      <p>配合产品图<br/>160*160px</p>
                      <input type="text" size="20" name="upfile4" id="upfile4">  
                      <input type="button" value="选择图片" onclick="path4.click()">  
                      <input type="file" id="path4" onchange="upfile4.value=this.value">
                    </p>

                    <p class="upstep">
                      <p>每步视频<br/>50M以内</p>
                      <input type="text" size="20" name="upfile5" id="upfile5">  
                      <input type="button" value="选择图片" onclick="path5.click()">  
                      <input type="file" id="path5" onchange="upfile5.value=this.value">
                    </p>
                    </td>

                  </tr>
                </table>

如此，这些都填好之后，就是隐藏上边那个天数的table，给#next_step按钮绑定事件， onclick=”modaltoggle()” ，然后写入方法：

  function modaltoggle(){
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();


  }

到了下一天我们需要把这个隐藏的东西再打开，怎么计算是否到了下一天呢？我们先在js中做一个标识位，把他定义为ind_step，赋值为1，代表现在是第一步，每一次重新打开就要+1，写作：ind_step++,当ind_step的值等于步骤数时，表示今天的步骤完成，重新给他赋值为1：

while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }

注意要写在隐藏的下边，然后我们还要继续打开modal框：

$('#myModalday').modal('show');

目前完整代码为：

function modaltoggle(){
    var step = $("#index_step").val();
    var ind_step = 1;

    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();
      ind_step++;
    while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }
    $('#myModalday').modal('show');
  }

先测试一下，不行，因为每次点击都会访问函数，然后给ind_step重新赋值为1，这个我们可以通过alert(ind_step)查看。
那么，我们需要把ind_step变为静态变量才可以，而js中并没有提供静态变量，我们可以把var ind_step=1; 移到函数体外部，作为全局变量来使用。
把ind_step++;移到while循环下边。
把modal提交按钮中的data-dismiss=”modal”属性删掉，然后我们就可以把函数中显示modal的代码段去除。
此时代码是：

 var ind_step = 1;

  function modaltoggle(){
    var step = $("#index_step").val();
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();

      alert(ind_step);
    while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }
    ind_step++;
  }

测试一下，输入3，在第三次之后成功显示了上方的table。再测试第二天的，所有数据不变，当第二次显示时候输入4。

从第二天起，alert出来的不是1而是2？为什么呢？
答案在方法中，我们把while循环放在了ind_step++上方，所以设为1之后，ind_step又+1了，那么问题来了，下方不能放，放在上方行吗？看效果；
放在上方，第二天提交时就会显示，比我们预定的少一次，之前我们应该遇到了这个问题，我没有说，放while中更不可能。
把while改成if条件语句试试看：

if(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }else{
      ind_step++;
    }

这下可以了！
步骤搞定了，下边就是天数，计算到没到我们预定的天数，到了天数的时候我们先做自动关闭modal，即

$('#myModalday').modal('hide');

当到天数时，我们就运行这段代码。

同ind_step一样，我们先设定一个ind_day为全局变量，赋值1。
在方法中取index_day的值：

var day = $("#index_day").val();

当ind_step重设为1时，ind_day+1,表示进入下一天，然后是判断ind_day是否到预期值，在ind_day++;后加入判断：

 if(ind_day>day){
        $('#myModalday').modal('hide');
        return;
      }

当当前天数大于预设时，隐藏modal，退出方法，测试。
测试结果是成功的，但是之前输入的数据还在，影响到下一次输入，所以当if判断成功时，我们直接reload网页把。
测试可用，目前代码：

var ind_step = 1;
  var ind_day = 1;
  function modaltoggle(){
    var step = $("#index_step").val();
    var day = $("#index_day").val();
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();

      alert(ind_step);

    if(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
      ind_day++;
      if(ind_day>day){
        $('#myModalday').modal('hide');
        location.reload();
      }
    }else{
      ind_step++;
    }

  }

目前来看，我们的基本框架就搭建完成了，是吗？你的表单里的数据清了吗？
接下来我们做一个方法，专门用作清空表单里的数据。

第一步：清步骤计划

 function clean_step(){
    $("#add_step input").val("");
  }

偷了个懒，这个是每一次执行循环都要调用，加入方法中。
再加入

$("#add_step input[type=button]").val("选择图片");

因为他把我button上的字也清了，我再加上！
完整如下，亲测可用：

  function clean_step(){
    $("#add_step input").val("");
    $("#add_step input[type=button]").val("选择图片");
  }

第二步：清理当天计划

如上方法一样，只是多了一个需要额外清除：

  function clean_day(){
    $("#inputday input").val("");
    $("#inputday textarea").html("");
  }

测试可用。

没有第三部啦，那么这下应该是把框架搭好了吧。
下边就是数据传递了！