Как динамически добавлять данные из одной HTML-страницы в список в другой

0

У меня есть список строковых элементов на странице html, так как follows-

<h1><b>Subject Groups</b></h1>
        <div id="listContainer">
            <div class="listControl">
            </div>
            <ul id="expList">
                <li>
                    Maths 
                    <ul>
                        <li>
                            John Smith       
                        </li>
                        <li>
                            Jane Smith
                        </li>
                        <li>
                            Elvis Presley
                        </li>
                    </ul>
                </li>
                <li>
                    Science 
                    <ul>
                    <li>
                    Jane Smith
                    </li>
                    <li>
                    Kate Smith
                    </li>
                    </ul>
                </li>
                <li>
                    Literature
                    <ul>
                        <li>
                            Kate Smith
                        </li>
                        <li>
                            Tom Hanks
                        </li>
                    </ul>
                </li>
                <li>
                <a href = "JavaScript:newPopup('new.html');"<b>New Student..</b></a>
                </li>
            </ul>

В конце списка есть ссылка на всплывающую форму, которая позволяет вам вводить нового ученика и выбирать с помощью флажков, какими темами этот человек является studying-

<form action="" style= "font-size: 16pt">

<h3> First Name: </h3>

    <div class="input-group">
      <input type="text" class="form-control">

      <h3> Last Name: </h3>

    <div class="input-group">
      <input type="text" class="form-control">


      <h3> Email Address: </h3>

    <div class="input-group">
      <input type="text" size="70" class="form-control">

    </div><!-- /input-group -->

    <h3> Select the subjects that this student will study: </h3>


<input type="checkbox" name="Maths" value="Maths"> &nbsp Maths<br>
<input type="checkbox" name="Science" value="Science"> &nbsp Science<br>
<input type="checkbox" name="Literature" value="Literature"> &nbsp Literature>
<input type="button" class="btn btn-lg btn-primary btn-block" value="Submit" />
</form>

Мой вопрос is-, как я могу использовать событие onClick кнопки отправки, чтобы взять имя и фамилию вновь созданного ученика и добавить их в соответствующую категорию темы в моем списке? Это возможно без наличия базы данных?

  • 0
    это похоже на работу для jQUery: api.jquery.com/append
Теги:
forms

1 ответ

2
Лучший ответ

Я думаю, что это будет легко сделать с jquery... просто дайте каждому субъекту идентификатор, например, <li id="Maths"> затем, когда пользователь отправит форму, получите значение флажка и используйте.append для добавления в список, например

> $(chekBoxValue).append("<li>"+name+'</li>');

надеюсь это поможет

  • 0
    Звучит хорошо, но будет ли это работать между двумя страницами?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню