javascript - 需要在一个html表单中多次使用一个字段-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 11:03:52

我有两个问题:1- 我需要在 ContentQue 字段中输入多个问题。先点击“Add New Question”按钮然后输入一个问题，点击OK，显示数据，然后再次点击“Add New Question”按钮，但是此时输入没有显示？2- 我想强制用户从选择中选择一个模块。

提前致谢

<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>

最佳答案

这需要大量的工作。我不得不清理一些 HTML 问题并更改一些逻辑。

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

其次，为了显示问题，我使用了一个列表。以后更容易使用。

第三，我包裹了不同的部分，这样它们更容易隐藏/显示。

第四，我在验证中添加了用户在单击 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/

您可能需要考虑的事项:

用于从列表中删除问题的按钮
您想允许多少个问题？ 100？ 200？ 1000？您将如何通过大量问题？
允许用户在提交前安排问题在列表中的顺序

关于javascript - 需要在一个html表单中多次使用一个字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34138613/

文章推荐： html - 删除 Bootstrap 输入插件中文本的最后一个边距

文章推荐： python - Flask无法读取/etc/environment

文章推荐： linux - 需要在 Linux 上运行 Mono (Xamarin Studio) Web 服务

文章推荐： Python ftplib - 有什么方法可以关闭它吗？

javascript - 我需要将文本放在一个中，它位于一个 Div 中，该 Div 位于另一个 Div 中，该 Div 位于另一个 Div 中
我需要将文本放在中在一个 Div 中，在另一个 Div 中，在另一个 Div 中。所以这是它的样子: #document Change PIN
html - 两个背景图像。一个在 HTML 中，一个在 BODY 中。在 Firefox 中，主体图像未呈现
奇怪的事情发生了。我有一个基本的 html 代码。 html，头部， body 。(因为我收到了一些反对票，这里是完整的代码) 这是我的CSS: html { backgroun
ios - 将图像从 asset.xcassets 加载到 imageArray 中，并将其动态加载到 UIImageView 中，该 UIImageView 存在于 UICollectionView 中 - swift
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中，但每当我运行应用程序时它都会显示错误。而且也没有显示图像。我在ViewDidLoa
linux - 在 BASH 中，我需要根据 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名 eval 组合。不能在 bash 中
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
asp.net - Windows 身份验证适用于 IIS，但不适用于 Kestrel/Microsoft.AspNetCore.Authentication.Negotiate(不在 Chrome 中，有时在 Edge 中，始终在 IE 中)？
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序，并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
java - java 中 Kotlin 中的等价物是什么？
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何最佳答案在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的，但一旦知道，就不会有其他类
express - 在 Jade 中，为什么有时我可以按原样使用变量而有时必须将它们包含在#{......} 中？
看下面的代码 for story in book if story.title.length < 140 - var story
c - C 中 strstr() 中 for 循环的错误使用
我正在尝试用 C 语言学习字符串处理。我写了一个程序，它存储了一些音乐轨道，并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
c - * 在 sscanf 中，* 在 [] 中
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
python - 在 Python (2.7.3) 中，如果 str(x) 中的任何字符在 str(y) 中(或 str(y) 在 str(x) 中)，我如何编写一个函数来回答？
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
ansible - 在 Ansible 中，如何将一行移动到一个 block 中？
我有一种情况，我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
Django 调试工具栏显示在根 URL 中，但不显示在应用程序 URL 中
我有一个新项目，我正在尝试设置 Django 调试工具栏。首先，我尝试了快速设置，它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个，当我转到我的根 URL 时，调试
r - 在 R 中，Matlab 中 @ 函数句柄的等价物是什么？
在 Matlab 中，如果我有一个函数 f，例如签名是 f(a,b,c)，我可以创建一个只有一个变量 b 的函数，它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
swiftui - SwiftUI 中 ScrollView 中 VStack 元素中的神秘间距或填充
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
cookies - 什么应该存储在 session 中，什么应该存储在 cookie 中？
我想知道，是否有关于何时使用 session 和 cookie 的指南或最佳实践？什么应该和什么不应该存储在其中？谢谢! 最佳答案这些文档很好地了解了 session cookie 的安全问题以及
python - Python 中 matplotlib 中 3d 直方图的奇怪行为
我在 scipy/numpy 中有一个 Nx3 矩阵，我想用它制作一个 3 维条形图，其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的是矩阵中的第三列，条形的数量由 N 确定。
c - c 中 sem_init(...) 中 value 参数的不同用法
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在， sem_wait(&randomsem) 在这两种情况下
c - 实际值存储在 pstr 中，但是该值如何存储在数组 "WORD"中
我怀疑该值如何存储在“WORD”中，因为 PStr 包含实际输出。？既然Pstr中存储的是小写到大写的字母，那么在printf中如何将其给出为“WORD”。有人可以吗？解释一下？ #include
javascript - 数组索引选择像在 numpy 中，但在 javascript 中
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
javascript - 在 Javascript 中，如何检测浏览器窗口何时在 View 中？
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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