javascript - 创建具有 2 个选项卡的表单(表单和预览)

标签 javascript php jquery html css

所以这就是我需要创建的 http://i.gyazo.com/cadc9c6726d2ba16f8072f0bae73c966.png 这是我到目前为止所做的 我仍然需要做但我不知道如何做的功能是:

1) 在预览选项卡中，所有在添加广告系列选项卡中填写的信息都必须显示在标签标签中，但我知道如何在单击提交按钮之前保存和显示它们......(这些是最我不知道如何解决的严重问题)

2) 当打开 ADD Campaing 选项卡时，我需要放置“Create New CAMPAIGN”标题，当我单击/切换到 REVIEW 时，它必须是 REVIEW DETAILS

3) 当点击提交/添加事件时，必须使用 javascript 检查输入。不知道该怎么做

感谢所有能提供帮助的人...

 $(document).ready(function(){ 
  $("#linkOne").click(function(e){
      e.preventDefault();
      $("#preview").removeClass("active");
      $("#add").addClass("active");
  });
  $("#linkTwo").click(function(e){
      e.preventDefault();
      $("#add").removeClass("active");
      $("#preview").addClass("active");
  });
});
 
.tab-pane{
  display: none;
}

.active
{
  display: block !important;
}

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Collapse content</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 </head>
<body>
 
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
    <li><a id="linkOne" href="#add">ADD CAMPAIGN</a></li>
    <li><a id="linkTwo" href="#preview">PREVIEW</a></li>

</ul>
<div class="tab-content">
    <div id="add" class="tab-pane active">

      <form method="post"  action="javascript.php">
                  <table>
                <tr>
                <th> 
                  <label for="campaignname">Campaign name</label>
                </th>
                <td>
                  <input type = "text" name="campaignname" id="campaignname" >
                </td>
              
              </tr>
              <tr>
                <th> 
                  <label for="dailybudget">Daily budget</label>
                </th>
                <td>
                  <input type = "text" name="dailybudget" id="dailybudget" placeholder="Min $10/day">
                </td>
              
              </tr>

              <tr>
                <th> 
                   <label for="campaigntype">Campaign type</label>
                </th>
                <td>                
                  <select name="campaigntype" id="campaigntype" >
               
                  <option value="" disabled selected>Dialog click to message</option>
                  <option value="a"> a </option>
                  <option value="b"> b </option>
                  <option value="c"> c </option>
                  <option value="d"> d </option>
                  </select>
                </td>
              
              </tr>

              <tr>
                <th> 
                  <label for="startdate">Start Date</label>
                </th>
                <td>
                  <input type = "text" name="startdate" id="startdate" placeholder="YYYY-MM-DD H:I">
                </td>
              
              </tr>

              <tr>
                <th> 
                  <label for="enddate">End Date</label>
                </th>
                <td>
                  <input type = "text" name="enddate" id="enddate" placeholder="YYYY-MM-DD H:I" >
                </td>
              
              </tr>

                 <tr>
                <th> 
                   <label for="catagory">Catagory</label>
                </th>
                <td>                
                  <select name="catagory" id="catagory">
                  <option value="" disabled selected>Select catagory...</option>
                  <option value="a"> a </option>
                  <option value="b"> b </option>
                  <option value="c"> c </option>
                  <option value="d"> d </option>
                  </select>
                </td>
              
              </tr>

 <tr>
                <th> 
                   <label for="platformtype">Platform type</label>
                </th>
                <td>                
                  <select name="platformtype" id="platformtype">
                  <option value="" disabled selected>Select platform...</option>
                  <option value="a"> a </option>
                  <option value="b"> b </option>
                  <option value="c"> c </option>
                  <option value="d"> d </option>
                  </select>
                </td>
              
              </tr>

            </table>
            <input type="submit" value="Send">
      </form>     
      
      
    </div>
    <div id="preview" class="tab-pane">
        


        <form method="post"  action="javascript.php">
                          <table>
                        <tr>
                        <th> 
                          <label for="campaignname">Campaign name</label>
                        </th>
                       
                      
                      </tr>
                      <tr>
                        <th> 
                          <label for="dailybudget">Daily budget</label>
                        </th>
                       
                      
                      </tr>

                      <tr>
                        <th> 
                           <label for="campaigntype">Campaign type</label>
                        </th>
                        
                      
                      </tr>

                      <tr>
                        <th> 
                          <label for="startdate">Start Date</label>
                        </th>
                      
                      
                      </tr>

                      <tr>
                        <th> 
                          <label for="enddate">End Date</label>
                        </th>
                      
                      
                      </tr>

                         <tr>
                        <th> 
                           <label for="catagory">Catagory</label>
                        </th>
                      
                      
                      </tr>

         <tr>
                        <th> 
                           <label for="platformtype">Platform type</label>
                        </th>
                      
                      
                      </tr>

                    </table>
                    <input type="submit" value="Send">
              </form>     

    </div>

    </div>
</div>



</body>
</html>

最佳答案

1) 这是您第一个问题的答案。我添加了一个函数:updateFields()，当单击预览选项卡时会调用它，并且该函数会填充您的各种预览输入框。

你应该能够根据这个算出其余的。

$(document).ready(function() {
  $("#linkOne").click(function(e) {
    e.preventDefault();
    $("#preview").removeClass("active");
    $("#add").addClass("active");
  });
  $("#linkTwo").click(function(e) {
    e.preventDefault();
    $("#add").removeClass("active");
    $("#preview").addClass("active");
  });
});

function updateFields() {
  $("#campaignNameLabel").text(" : " + $("#campaignname").val());
  $("#dailyBudgetLabel").text(" : " + $("#dailybudget").val());
  $("#campaignTypeLabel").text(" : " + $("#campaigntype").val());
  $("#startDateLabel").text(" : " + $("#startdate").val());
  $("#endDateLabel").text(" : " + $("#enddate").val());
  $("#categoryLabel").text(" : " + $("#catagory").val());
  $("#platformTypeLabel").text(" : " + $("#platformtype").val());
}
.tab-pane {
  display: none;
}
.active {
  display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Collapse content</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="bs-example">
    <ul class="nav nav-tabs" id="myTab">
      <li><a id="linkOne" href="#add">ADD CAMPAIGN</a>
      </li>
      <li><a id="linkTwo" href="#preview" onclick="updateFields()">PREVIEW</a>
      </li>

    </ul>
    <div class="tab-content">
      <div id="add" class="tab-pane active">

        <form method="post" action="javascript.php">
          <table>
            <tr>
              <th>
                <label for="campaignname">Campaign name</label>
              </th>
              <td>
                <input type="text" name="campaignname" id="campaignname">
              </td>

            </tr>
            <tr>
              <th>
                <label for="dailybudget">Daily budget</label>
              </th>
              <td>
                <input type="text" name="dailybudget" id="dailybudget" placeholder="Min $10/day">
              </td>

            </tr>

            <tr>
              <th>
                <label for="campaigntype">Campaign type</label>
              </th>
              <td>
                <select name="campaigntype" id="campaigntype">

                  <option value="" disabled selected>Dialog click to message</option>
                  <option value="a">a</option>
                  <option value="b">b</option>
                  <option value="c">c</option>
                  <option value="d">d</option>
                </select>
              </td>

            </tr>

            <tr>
              <th>
                <label for="startdate">Start Date</label>
              </th>
              <td>
                <input type="text" name="startdate" id="startdate" placeholder="YYYY-MM-DD H:I">
              </td>

            </tr>

            <tr>
              <th>
                <label for="enddate">End Date</label>
              </th>
              <td>
                <input type="text" name="enddate" id="enddate" placeholder="YYYY-MM-DD H:I">
              </td>

            </tr>

            <tr>
              <th>
                <label for="catagory">Catagory</label>
              </th>
              <td>
                <select name="catagory" id="catagory">
                  <option value="" disabled selected>Select catagory...</option>
                  <option value="a">a</option>
                  <option value="b">b</option>
                  <option value="c">c</option>
                  <option value="d">d</option>
                </select>
              </td>

            </tr>

            <tr>
              <th>
                <label for="platformtype">Platform type</label>
              </th>
              <td>
                <select name="platformtype" id="platformtype">
                  <option value="" disabled selected>Select platform...</option>
                  <option value="a">a</option>
                  <option value="b">b</option>
                  <option value="c">c</option>
                  <option value="d">d</option>
                </select>
              </td>

            </tr>

          </table>
          <input type="submit" value="Send">
        </form>


      </div>
      <div id="preview" class="tab-pane">



        <form method="post" action="javascript.php">
          <table>
            <tr>
              <th>
                <label for="campaignname">Campaign name</label>
              </th>
              <td>
                <label id="campaignNameLabel"></label>
              </td>

            </tr>
            <tr>
              <th>
                <label for="dailybudget">Daily budget</label>
              </th>
              <td>
                <label id="dailyBudgetLabel"></label>
              </td>


            </tr>

            <tr>
              <th>
                <label for="campaigntype">Campaign type</label>
              </th>
              <td>
                <label id="campaignTypeLabel"></label>
              </td>

            </tr>

            <tr>
              <th>
                <label for="startdate">Start Date</label>
              </th>
              <td>
                <label id="startDateLabel"></label>
              </td>


            </tr>

            <tr>
              <th>
                <label for="enddate">End Date</label>
              </th>
              <td>
                <label id="endDateLabel"></label>
              </td>


            </tr>

            <tr>
              <th>
                <label for="catagory">Category</label>
              </th>
              <td>
                <label id="categoryLabel"></label>
              </td>


            </tr>

            <tr>
              <th>
                <label for="platformtype">Platform type</label>
              </th>
              <td>
                <label id="platformTypeLabel"></label>
              </td>


            </tr>

          </table>
          <input type="submit" value="Send">
        </form>

      </div>

    </div>
  </div>



</body>

</html>

关于javascript - 创建具有 2 个选项卡的表单(表单和预览)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28071476/

上一篇：html - <div> 不会适应外部 <li> 高度

下一篇：javascript - 添加类定义的不透明度不会影响 Webkit 中的元素

相关文章：

javascript - 为什么异常用于拒绝 JS 中的 promise ？

javascript - ESlint:通过 glob 模式验证文件

php - 在 PHP/MySQL 查询中创建关联数组

javascript - 如何处理ajax 201

javascript - 我怎样才能让 AngularJS 绑定(bind)与花式框对话框一起工作？

javascript - 重新加载单选按钮值

javascript - 我可以在 CaSTLe MonoRails/NVelocity 中以编程方式将标签附加到 <head> 中吗？

javascript - 在 JavaScript 中验证 Int 值

javascript - jQuery .each 不通过 li 进行迭代

php - 如何在运行模板时获取所有分配的 Smarty 变量？

©2024 IT工具网  联系我们