Необходимо использовать одно поле много раз в одной форме html

У меня две проблемы: 1- Мне нужно ввести несколько вопросов в поле ContentQue. Сначала нажмите кнопку «Добавить новый вопрос», затем введите вопрос, нажмите «ОК», покажите данные, затем снова нажмите кнопку «Добавить новый вопрос», но в это время вход не отображается? 2- Я хочу заставить пользователя выбрать один из модулей.Необходимо использовать одно поле много раз в одной форме html

Благодаря передовой

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

источник

2015-12-07 Marmar

Создано jsfiddle для этого: http://jsfiddle.net/Twisty/ax2zds1o/ – Twisty

Извилистые, В JSFiddle работает, но в моего локального хоста нет. Извините за то, что вы заняты моим кодом и для моего плохого английского языка – Marmar

Пожалуйста, убедитесь, что JQuery загружается. Какие ошибки вы видите в консоли? – Twisty

Это необходимо изрядное количество работы. Мне пришлось убрать несколько проблем с 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? Как вы пройдете большое количество вопросов?
Предоставление пользователю организовать порядок вопросов в списке перед отправкой

источник

2015-12-07 20:01:26 Twisty

эй @Twisty хороший ответ и отличный слоган! –

Хе-хе! "Важные вещи!" – Twisty

Waw, Это именно то, что я хочу. Только одно, когда пользователь выбирает «Вопросы», предположим, что окно ввода и кнопка «ОК» отображаются по умолчанию. Большое спасибо Twisty – Marmar

Необходимо использовать одно поле много раз в одной форме html

ответ

Смежные вопросы