Данные поля формы в span / div

Question

Я хочу объединить несколько полей формы в область span или div. Я нашел в Интернете сценарий, который действительно хорошо работает для меня. Но он объединяет поля в другое поле формы.

Что мне нужно изменить, чтобы указать, чтобы поместить его в span / div.

Я сделал скрипку, чтобы помочь объяснить, что я после. http://jsfiddle.net/3ZHfB/

Ура заранее !!

Answer 1

Ваша скрипка обновлена ​​с ответом, см. .

1) Замените copyPassDetails текстовое поле на span / div:

    <div class="field">
        <label for="copyPassDetails">Full Name:</label>
        <span id="fullName"></span>
    </div>

2) Заменить текстовое поле 'val () внутри функции связывания на html span () :

$('#fullName').html($('#Title').val() + ' ' +
                         $('#First_Name').val() + ' ' +
                         $('#Last_Name').val() );

Answer 2

    <form method="post" action="">


        <div class="field">
            <label for="Title">Title:</label>
            <select name="Title" id="Title">
                            <option value="" selected="selected">Select...</option>
                            <option value="Mr">Mr</option>
                            <option value="Mrs">Mrs</option>
                            <option value="Miss">Miss</option>
                            <option value="Ms">Ms</option>
                            <option value="Dr">Dr</option>
                            <option value="Revd">Revd</option>
                            <option value="Prof">Prof</option>
                            <option value="Judge">Judge</option>
                        </select>
        </div>

        <div class="field">
            <label for="First_Name"> First Name:</label>
            <input type="text" id="First_Name" name="First_Name" />
        </div>

        <div class="field">
            <label for="Last_Name"> Last Name:</label>
            <input type="text" id="Last_Name" name="Last_Name" />
        </div>

        <br>
        <br>

        <div class="field">
            <label for="copyPassDetails">Full Name:</label>
           <!-- <input type="text" id="copyPassDetails" name="address" /> -->
<div id="copyPassDetails"></div>
        </div>

    </form>
    <script>
    $('#Title, #First_Name, #Last_Name').bind('blur', function() {

        $('#copyPassDetails').html($('#Title').val() + ' ' +
                                 $('#First_Name').val() + ' ' +
                                 $('#Last_Name').val() );
    });
    </script>

Попробуйте, я отредактировал <input type="text" id="copyPassDetails" name="address" /> в <div id="copyPassDetails"></div> и $ ('# copyPassDetails'). Val ( до $ ('# copyPassDetails'). Html (

Чтобы поместить значение в теги <div><span>, необходимо использовать html и для ввода val