Чтение и добавление данных формы в прямом эфире с JavaScript - PullRequest
Новая
       11

Чтение и добавление данных формы в прямом эфире с JavaScript

0 голосов
/ 11 сентября 2010

Я какое-то время искал решение этой проблемы, и мне пришлось найти ответ, достаточно удобный для новичков, чтобы я мог понять его реализацию.Вот моя ситуация:

Я создаю простую маленькую веб-систему нумерации документов, которая берет данные, введенные в форму, и объединяет их для формирования номера документа.Примером может быть: пользователь вводит a, код класса (CCC), базовый номер (BBBB) и тире (DDD).Полученный номер документа будет CCC-BBBB-DDD.Супер просто.Я записал все это в базу данных и весь этот джаз.Я просто хотел бы добавить одно удобное для пользователя дополнение.

Мне нужна небольшая живая строка вверху, которая показывает, каким будет номер документа, когда пользователь редактирует каждое поле, прежде чем он фактически нажмет на кнопку отправки.Вроде как этот пример: http://inimino.org/~inimino/blog/javascript_live_text_input

Я почти ничего не знаю о javascript, поэтому было бы очень полезно узнать, 1: как должен выглядеть скрипт, 2: И как этот скрипт взаимодействует сHTML-форма.

Вот как выглядит форма: 

        <form action="submit.php" method="post">
        Enter Title:<input type="text" name="title" size="20"><BR>
        Enter Class Code:<input type="text" name="class" size="20"><BR>
        Enter Base Number:<input type="text" name="base" size="20"><BR>
        Enter Dash Number:<input type="text" name="dash" size="20"><BR>
        <input type="submit" value="Submit">

Большое спасибо за любую помощь, которую вы можете предложить.Я уверен, что это не слишком сложно для кого-то хорошо разбирающегося.

Томас

Ответы [ 2 ]

0 голосов
/ 11 сентября 2010

Включите этот HTML-файл, чтобы отобразить предварительный просмотр номера документа: 

Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>

Добавьте этот скрипт, чтобы заполнить значения: 

function updateDocNumPreviewPart(fieldName)
{
    var preview = document.getElementById(fieldName + "Preview");
    var field = document.forms[0][fieldName];
    preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
    updateDocNumPreviewPart("class");
    updateDocNumPreviewPart("base");
    updateDocNumPreviewPart("dash");
}

Наконец, добавьте немного кода в формуПоля для вызова скрипта: 

<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />
0 голосов
/ 11 сентября 2010

Насколько я понимаю, это должно делать то, что вы описываете. 

$('#yourForm input').bind('keyup', function(e) {
    var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
    $('#preview').html(docNum);
});​

Для вашего второго вопроса, как это взаимодействует с HTML-формой.Первый селектор jQuery #yourForm input будет искать любой <input>, который подпадает под <form id='yourForm'>.Затем он связывает событие keyup для запуска функции.Функция берет значение из <input> со значением name class, base и dash, а также некоторое форматирование и создает переменную с именем docNum.docNum затем вставляется в элемент с id, установленным для предварительного просмотра, который в примере Fiddle представляет собой div прямо над формой.

http://jsfiddle.net/nuY2M/

...