Блог

Главная - Вопросы по программированию - Как получить значения из текстового поля и других значений html-элементов в label?

Как получить значения из текстового поля и других значений html-элементов в label?

#javascript #jquery #html #forms

#javascript #jquery #HTML #формы

Вопрос:

Привет, у меня есть форма в моем приложении, где пользователь может указать свои данные. Моя часть формы выглядит так,

http://jsfiddle.net/2MSXP/

при этом, когда пользователь нажимает на гиперссылку add school, я хочу, чтобы все значения добавлялись в label, например,

Школа: 12-я

Название школы: St. Xavier’s

Расположение школы: Банглор

Год выпуска: 2010

Отрасль: Наука

Это должно добавляться в любое время, когда пользователь нажимает на гиперссылку add school.

Как я могу это сделать, используя javascript / jquery?

Комментарии:

1. Вы что-нибудь пробовали? Где вы застряли?

2. на самом деле я понятия не имею, как я могу это сделать. 🙁

3. Вы пробовали руководство по введению в jQuery? В любом хорошем учебном пособии для начала будет достаточно информации, чтобы помочь вам реализовать ваши требования.

Ответ №1:

Значения в текстовых полях могут быть доступны с помощью document.getElementById('id').value

Остальное вам должно быть легко понять.

Вот как вы могли бы это сделать, не используя jQuery:

     <a href="javascript:show()">Add School</a>
    <script type="text/javascript">
        function show()
        {
            document.getElementById('result').innerHTML = "School Name: "   document.getElementById('sch1').value; 
        }
    </script>

Добавьте a span или div с идентификатором result везде, где вы хотите, чтобы результат отображался.
Разверните приведенный выше код, чтобы отобразить и другие поля.

взгляните на это: http://jsfiddle.net/GQdsD /

innerHTML перезаписывает то, что ранее содержалось в контейнере HTML. Вы можете сделать это:

 document.getElementById('result').innerHTML = "School Name: "  
document.getElementById('sch1').value   "<br/>Location: "   
document.getElementById('schloc1').value   "<br/>Year: "   
document.getElementById('schoolyear').value   "<br/>Branch: "   
document.getElementById('branch1').value;

ИЛИ соберите значения в переменной JS, а затем запишите их в HTML-контейнер:

 var result = "School Name: "   document.getElementById('sch1').value   
"<br/>Location: "   document.getElementById('schloc1').value   
"<br/>Year: "   document.getElementById('schoolyear').value   
"<br/>Branch: "   document.getElementById('branch1').value;

document.getElementById('result').innerHTML = resu<

Чтобы разрешить многократное добавление, измените эту строку в своем коде:

 var result = "School: "   document.getElementById('schools').value   "<br/>School Name: "   document.getElementById('sch1').value   "<br/>Location: "   document.getElementById('schloc1').value   "<br/>Year: "   document.getElementById('schoolyear').value   "<br/>Branch: "   document.getElementById('branch1').value; 
            document.getElementById('result').innerHTML = resu<

К этому, таким образом, добавляется новая информация к старой информации:

 var result = document.getElementById('result').innerHTML   "<br/>School: "   document.getElementById('schools').value   "<br/>School Name: "   document.getElementById('sch1').value   "<br/>Location: "   document.getElementById('schloc1').value   "<br/>Year: "   document.getElementById('schoolyear').value   "<br/>Branch: "   document.getElementById('branch1').value; 
            document.getElementById('result').innerHTML = resu<

Комментарии:

1. $(«#addtolabel»).click(function() { оповещение(document.getElementById(‘schools’).value); оповещение(document.getElementById(‘sch1’).value); оповещение(document.getElementById(‘schloc1’).value); оповещение(document.getElementById(‘schloc1’).value); оповещение(document.getElementById(‘schloc1’).value).getElementById(‘schoolyear’).value); alert(document.getElementById(‘branch1’).value); }); Используя это, я получаю значения всех элементов, но как я могу поместить это в ярлык?

2. Прочитайте последнее предложение моего ответа. создайте метку с идентификатором result . Программа document.getElementById('result').innerHTML найдет метку с идентификатором result и поместит туда значения.

3. @Debugmode: добавлена ссылка jsfiddle. взгляните на это.

4. @xbonex: Спасибо… Я пробовал это, но он показывает только последний элемент. функция show() { document.getElementById(‘result’).innerHTML = «Название школы: » document.getElementById(‘sch1’).value; document.getElementById(‘result’).innerHTML = «Местоположение: » document.getElementById(‘schloc1’).value;document.getElementById(‘result’).innerHTML = «Year: » document.getElementById(‘schoolyear’).value; document.getElementById(‘result’).innerHTML = «Branch: » document.getElementById(‘branch1’).value;}

5. @xbonex: есть ли какой-нибудь способ получить множественное добавление этого разделения. поскольку я могу получить только одну школу в результирующем div. в соответствии с требованиями моего приложения, пользователь может добавить несколько школ в свой профиль. как это возможно. и спасибо за вашу ценную поддержку. пожалуйста, обратитесь к этому jsfiddle.net/GQdsD/1

Ответ №2:

Вы можете добавить функцию к кнопке и получить такие значения, как…

 $('.profileupdateBod').click(function(){
    $('#yourContainer').append('<div>School : ' $('select[name=schooldivision]').val() '</div><div>School Name : ' $('#sch1').val().trim() '</div>')
})

Также проверьте селекторы jquery http://api.jquery.com/category/selectors /

Ответ №3:

Для поля выбора:

 $('#select_box_id option:selected').text();

Для текстового поля:

 $('#text_box_id').val();
Метки: