FanKiLL
@FanKiLL

Как в jQuery добавить в форму елемент?

Ребята, есть форма, в ней много дивов с классом social_link, где находятся елементы формы.
Мне нужно по нажатии на кнопку с классом add_new_social_link добавить ещё 1 див в форму.

Но при этом регулярным выражением поменять одно слово на timestamp

Вот такая форма:

<form accept-charset="UTF-8" action="url" id="social_links" method="post">
  <div class="social_link">...</div>
  <div class="social_link">...</div>
  <div class="social_link">...</div>
  <div class="social_link">...</div>

  <a class="add_new_social_link" href="#"> Add New Social Link</a>
</form>


Вот что нужно добавить - этот div наверно надо где то в переменной держать:
<div class="social_link">

  <select class="chosen-select form-control" id="social_links_new_attributes_replaceme_link_type" name="social_links[new_attributes][replaceme][link_type]" style="display: none;">
    <option value=""></option>
    <option value="email">Email</option>
    <option value="jabber">Jabber</option>
    <option value="twitter">Twitter</option>
    <option value="facebook">FaceBook</option>
  </select>

  <div class="chosen-container chosen-container-single" style="width: 758px;" title="" id="social_links_new_attributes_replaceme_link_type_chosen">
    <a class="chosen-single chosen-default" tabindex="-1"><span>Select an Option</span>

      <div><b></b></div>
    </a>

    <div class="chosen-drop">
      <div class="chosen-search"><input type="text" autocomplete="off"></div>
      <ul class="chosen-results"></ul>
    </div>
  </div>
  <input class="form-control" id="social_links_new_attributes_replaceme_link_value" name="social_links[new_attributes][replaceme][link_value]" type="text">
  <a class="btn btn-danger remove_new_social_link" data-placement="right" data-toggle="tooltip" href="#" title="" data-original-title="Delete New Social Link"><i class="fa fa-trash-o"></i></a>
</div>


Если видите во всяких id в их названии есть слово replaceme вот его надо заменить на timestamp
Вот что начал писать, но в javascript не очень шарю.
$(document).on('page:change', function () {
    $('#social_links').on('click', '.add_new_social_link', function (event) {
        console.log('Knock Knock Knock');
        var regexp, time;
        time = new Date().getTime(); // получили timestamp
        // как теперь заменить в выше приведённом диве слово replaceme на timestamp
       // и добавить этот див в форму
    });
});
  • Вопрос задан
  • 2823 просмотра
Решения вопроса 1
barkalov
@barkalov
Многострочный html-код темплейта проще всего хранить в прямо в body, вот так:
<div id="new_social_link_template" style="display: none">
    <div class="social_link">
        ...          
    </div>    
</div>
Потому что в javascript не очень удобно эскейпить многострочность.

Сам js таков:
var regexp = new RegExp('replaceme', 'g');
var time = new Date().getTime(); // получили timestamp        
var newSocialLinkHtml = $('#new_social_link_template').html();
newSocialLinkHtml = newSocialLinkHtml.replace(regexp, time);
$('#social_links').append(newSocialLinkHtml);
Правда это добавит в самый конец формы. Чтобы добавлять к другим social_link'ам, оберните их в контейнер и добавляйте в него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы