需要在一个html表单中多次使用一个字段

时间：2015-12-07 16:37:47

标签： javascript php jquery html css

我有两个问题： 1-我需要在ContentQue字段中输入多个问题。首先单击“添加新问题”按钮然后输入问题，单击“确定”，显示数据，然后再次单击“添加新问题”按钮，但此时输入未显示？ 2-我想强制用户从select中选择一个模块。

先谢谢了     

<head>
<meta charset="utf-8">
<title>Add New Item</title>
<style>
#myquelist
{
overflow-y:scroll;
}

// To force the user enter data
.btn
{
background-color:#336;
color:#CC6;
border-radius:10px;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
opacity:0.5;
}
.txt
{
background-color:#09F;
color:#009;
border-radius:10px;
}
.err
{
color:#F00;
}
</style>
<!-- Java Script-->
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#btnquestion').click(function () {
        $('#myquelist').hide('fast');
        $('#Type3').show('fast');
    });
    $('#btnOK').click(function () {
        var a=$('#ContentQue').val();
        var b=$('#qlist').val();
        var c=b+"<br>"+a;
        $('#qlist').val(c);
        $('#ContentQue').val('');
        document.getElementById("Type3").style.height="150px";
        document.getElementById("Type3").innerHTML=c;
        $('#myquelist').show('fast');
    });

    $('#myquelist').hide('fast');
    $('#Type3').hide('fast');
    $('#Type2').hide('fast');
    $('#ExamType1').click(function () {
        $('#Type2').hide('fast');
        $('#Type3').hide('fast');
        $('#Type1').show('fast');
    });
    $('#ExamType2').click(function () {
        $('#Type1').hide('fast');
        $('#Type3').hide('fast');
        $('#Type2').show('fast');
    });
        $('#ExamType3').click(function () {
        $('#Type1').hide('fast');
        $('#Type2').hide('fast');
        alert("A");         
        //$('#myquelist').show('fast');
        $('#Type3').show('fast');
    });


   // To force the user enter data in text box
    $(" :text" ).addClass("txt"); 
    $("p").hide();  
    $("#PageBody input:text select").blur(function()
    {
        if(!$(this).val())    
        {
            $(this).parent("div").children("p").show();   
            $(this).parent("div").children("p").addClass("err");
        }
        else
        {
            $(this).parent("div").children("p").hide();
        }
    });
});
</script>

</head>
<body id="PageBody">
<header><h2>New Exam</h2></header>
<form id="form1">
<table  width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th><b>Assignment Title : 
<td><div><input type="text" name="ExamTitle" autofocus ><p>Please Exam Title</p></div></td>
</tr>
<tr>
<th><b>Exam Type</b></th>
<td> 
<input type="radio" name="ExamType" value="File"   id="ExamType1" checked="checked">File
<input type="radio" name="ExamType" value="Text" id="ExamType2">Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3">Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div> 
<div id="Type2">
<input type="text"  name="ContentText"  class="hidden" autofocus>
</div> 
<div id="myquelist">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div> 
<div id="Type3">
<input type="text" id="ContentQue"  name="ContentQue" >
<button type="button" id="btnOK"  name="OK" >OK</button>
</div>
<input type="hidden" id="qlist" name="qlist">
</td> 
</tr>
<tr>    
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl" >
<option selected="selected" disabled="disabled" >Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn"  style="width:95px;height:50px"; value="Save" />
</td>
</tr>

</table>
</form>
<?php 

$qlist = $_POST["qlist"];
?>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

这需要相当多的工作。我不得不清理一些HTML问题并改变逻辑。

首先，使用Array来存储各种问题要容易得多。我会将数组传递给你的表单处理程序，但是当你拍摄时我填充了qlist。

其次，为了显示问题，我使用了List。以后更容易使用。

第三，我包装了不同的部分，以便更容易隐藏/显示。

第四，我在验证中添加了用户在点击ok时提交问题以及提交表单时的问题，以确保他们选择了一个模块。

<强> HTML 

<header>
  <h2>New Exam</h2>
</header>
<form id="form1">
  <table width="100%" border="2" cellspacing="5px" cellpadding="5px">
    <tr>
      <th width="135px"><b>Assignment Title : </b></th>
      <td>
        <div>
          <input type="text" name="ExamTitle" autofocus />
          <p>Please Exam Title</p>
        </div>
      </td>
    </tr>
    <tr>
      <th height="80px"><b>Exam Type :</b></th>
      <td valign="top">
        <input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked" />File
        <input type="radio" name="ExamType" value="Text" id="ExamType2" />Text
        <input type="radio" name="ExamType" value="Questions" id="ExamType3" />Questions
        <div id="Type1">
          <input type="file" name="fileToUpload" id="fileToUpload">
        </div>
        <div id="Type2">
          <input type="text" name="ContentText" class="hidden" autofocus>
        </div>
        <div id="Type3">
          <div id="addNew">
            <button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
          </div>
          <div id="addQuestion" style="display: none;">
            <input type="text" id="ContentQue" name="ContentQue">
            <button type="button" id="btnOK" name="OK">OK</button>
          </div>
          <div id="showQuestions" style="display: none;">
          </div>
          <input type="hidden" id="qlist" name="qlist">
        </div>
      </td>
    </tr>
    <tr>
      <th><b>Module :</b></th>
      <td>
        <select id="Modl" name="Modl">
          <option selected="selected" disabled="disabled">Choose Module</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
      </td>
    </tr>
    <!-- Other inputs -->
    <tr>
      <td align="center" colspan="2">
        <input type="submit" name="SaveBtn" style="width:95px;height:50px;" value="Save" />
      </td>
    </tr>
  </table>
</form>

<强> CSS 

.btn {
  background-color: #336;
  color: #CC6;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
  opacity: 0.5;
}

.txt {
  background-color: #09F;
  color: #009;
  border-radius: 10px;
}

.err {
  color: #F00;
}

#Type3 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 150px;
  overflow: auto;
}

#Type3 ul li {
  list-style: none;
}

<强> JQUERY 

// Set Globals
var ql = [];

$(document).ready(function() {
  // Set View State
  $("#Type1").show();
  $("#Type2").hide();
  $("#Type3").hide();

  // Set Action Functions
  $('#btnquestion').click(function() {
    $('#addNew').hide();
    $('#addQuestion').show();
    $("#ContentQue").focus();
  });

  $('#btnOK').click(function() {
    var q;
    q = $('#ContentQue').val();
    if (q == "") {
      alert("Please enter a Question.");
      $("#ContentQue").focus();
      return false;
    }
    ql.push(q);
    $('#qlist').val(ql.join(","));
    $('#ContentQue').val('');
    if (ql.length > 0) {
      var qtext = $("<ul>");
      $.each(ql, function(i, v) {
        qtext.append("<li id='que-" + i + "'>" + v + "</li>");
      });
      $("#showQuestions").html(qtext);
    }
    $("#addQuestion").hide();
    $('#showQuestions').show();
    $("#addNew").show();
  });

  $("#form1 input[name='ExamType']").click(function() {
    var pick = $(this).val();
    switch (pick) {
      case "File":
        $("#Type1").show();
        $("#Type2").hide();
        $("#Type3").hide();
        break;
      case "Text":
        $("#Type1").hide();
        $("#Type2").show();
        $("#Type3").hide();
        break;
      case "Questions":
        $("#Type1").hide();
        $("#Type2").hide();
        $("#Type3").show();
        break;
    }
  });
});

$("#form1").submit(function(e){
  e.preventDefault();
  if($("#Modl option").eq(0).is(":selected")){
    alert("Please select a Module.");
    return false;
  }
  return true;
});

工作示例：http://jsfiddle.net/Twisty/ax2zds1o/6/

您可能想要考虑的事情：

  1. 从列表中删除问题的按钮
  2. 您想要允许多少个问题？ 100？ 200？ 1000？你将如何传递大量问题？
  3. 允许用户在提交之前在列表中排列问题的顺序
相关问题
最新问题