Как ввести информацию в ряд форм и отобразить эту информацию?

Всего новичок в программировании здесь ищет базовое понимание.Как ввести информацию в ряд форм и отобразить эту информацию?

Я работаю над проектом с несколькими флажками/выпадающим списком выбора идентификатора.

ex.

<!DOCTYPE HTML> 

<html> 
    <div class="select"> 
     <select id> 
      <option>-</option> 
      <option>2.00</option> 
      <option>2.50</option> 
      <option>2.75</option> 
     </select> 
    </div> 

<div class="checkboxes"> 
options: 
<br> 
<input type="checkbox" name="option1" value="O1">O1 
<br> 
<input type="checkbox" name="option2" value="O2">O2 
<br> 
<input type="checkbox" name="option2" value="O3">O3 
<br> 
</div> 

</html>

Есть примерно пять или шесть из них в последовательности. То, что я ищу (и не знаю, как это сделать), делает эти пять выборов последовательными (это означает, что есть кнопка «Пуск», тогда вам задают первый вопрос, нажимают дальше, спрашивают второго, нажимают следующий и т. д. Вторая кнопка - последний, это «Обзор», где он показывает, на что вы ответили по каждому из вопросов, и в обзоре есть кнопка «Отправить», которая будет делать шестерню «Отправка ...», а затем наконец, представить).

Я знаю, как выложить каждый из разных идентификаторов select (см. Примеры выше), но я не знаю, как «использовать» эти данные, хранить их, запрашивать их последовательно и представлять введенную информацию на конец.

Я знаю, что это немного болит голова, но есть ли у кого-нибудь какое-либо направление, которое они могут предоставить мне здесь?

Большое спасибо!

источник

2015-01-07 levitt

Это зависит от того, что вы пытаетесь сделать. Возможно, вы пытаетесь что-то сделать с ним на сервере где-то, а это значит, что вам нужно написать какое-то программное обеспечение для его обработки, как правило, на языке Python, Ruby, JavaScript или PHP. Здесь вам понадобится кнопка отправки, чтобы отправить запрос в любом месте. Попробуйте прочитать [эту статью] (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data) в качестве хорошей отправной точки. –

«01», «02», «03» должно быть «' s. http://www.w3.org/TR/WCAG20-TECHS/H44.html – danielnixon

Храните данные в localstorage при переходе от одного вида формы к другому и извлекайте их, когда вы дойдете до последнего (обзор). Один из способов сделать это состоит в том, чтобы сохранить 1. объект контроллера, который отслеживает текущее состояние и визуализирует представления в DOM соответственно, 2. формируйте объекты вида, которые заботятся о регистрации указанных вариантов, передавая их на 3. проверку объект, который проверяет ввод в форме и 4. объект, который хранит данные в localstorage. Возможно, есть много плагинов, которые вы можете проверить в Google. – Trace

Хотя это довольно широкий вопрос (возможно, слишком широкий для переполнения стека), вам не нужно ничего сложного.
Все, что вам нужно сделать, это разделить ваши данные на логические разделы, скрыть и показать эти разделы по мере необходимости и обернуть все в элементе формы.

Я показал основную идею ниже с каким-нибудь простым примером кодом:

var options = $('.option'); 
 
//On page load, hide all options and then show the first one 
 
options.hide().eq(0).show(); 
 

 
$('.move').on('click', function() { 
 
    //Which move button did we click? 
 
    //This allows us to avoid repeating the rest of the below logic in two separate event handlers 
 
    var button = this.getAttribute("id"); 
 
    //Which way do we want to move? 
 
    var direction = +1; 
 
    if (button.localeCompare("prev") === 0) { 
 
    direction = -1; 
 
    } 
 
    //Hide the option we're currently viewing 
 
    var currentOption = $('.option:visible'); 
 
    currentOption.hide(); 
 
    //Figure out which option to show next 
 
    var currentIndex = (options.index(currentOption)); 
 
    //Make sure that the index is limited to reasonable values (so we don't try to show options that don't exist) 
 
    var index = Math.min(currentIndex + direction, options.length - 1); 
 
    index = Math.max(index, 0); 
 
    options.eq(index).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="prev" class="move" type="button" value="Prev option" /> 
 
<input id="next" class="move" type="button" value="Next option" /> 
 
<form> 
 
    <div class="option"> 
 
    <p>Description 1</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>2.00</option> 
 
     <option>2.50</option> 
 
     <option>2.75</option> 
 
    </select> 
 
    </div> 
 
    <div class="option"> 
 
    <p>Description 2</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>5.00</option> 
 
     <option>10.00</option> 
 
     <option>20.00</option> 
 
    </select> 
 
    </div> 
 
    <div class="option"> 
 
    <p>Description 3</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>50.00</option> 
 
     <option>100.00</option> 
 
     <option>200.00</option> 
 
    </select> 
 
    </div> 
 
    <p> 
 
    <button>Submit</button>(This submits all the options) 
 
    </p> 
 
</form>

источник

2015-01-07 01:10:36 Nit

-1

Что вы ищете способ создания мастера. Один пример, который использует JQuery можно найти здесь http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/ Вам нужно будет редактировать HTML, так что его больше как то, что его ищет ...

<!DOCTYPE HTML> 

<html> 
<head> 
    <title></title> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/formToWizard.js"></script> 
</head> 
<body> 
<form id="myForm" action="register.php" method="post"> 
<fieldset> 
<legend>Step 1</legend> 
    <div class="select"> 
    <select id> 
     <option>-</option> 
     <option>2.00</option> 
     <option>2.50</option> 
     <option>2.75</option> 
    </select> 
    </div> 
</fieldset> 
<fieldset> 
<legend>Step 2</legend> 
    <div class="checkboxes"> 
     options: 
     <br> 
     <input type="checkbox" name="option1" value="O1">O1 
     <br> 
     <input type="checkbox" name="option2" value="O2">O2 
     <br> 
     <input type="checkbox" name="option2" value="O3">O3 
     <br> 
    </div> 
</fieldset> 
<script> 
    $('#myForm').formToWizard(); 
</script> 
</body> 
</html>

Этот плагин имеет множество вариантов тоже, так что читать над документы ...

затем отправить форму с помощью действия/метод, а затем процесс, которые образуют со стороны сервера ...

источник

2015-01-07 01:11:31 NHNick603

Не понимаю нижний предел? Случается в течение нескольких секунд после публикации. Вопрос действительно очень широк, ища обработку мастера и сервера ... – NHNick603

Как ввести информацию в ряд форм и отобразить эту информацию?

ответ

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