нажатие кнопки делает страницу перезагрузки javascript непреднамеренно

Question

У меня есть немного javascript, который я хочу использовать, чтобы позволить пользователю вводить бесконечные параметры и бесконечные URL-адреса изображений.

Я сделал jsFiddle

здесь HTML-код:

<div class="container-fluid body"> 


<div class="admin-box"> 
<form action="http://localhost/MyZone/public_html/index.php/create_option/2" class="form-horizontal" method="post" accept-charset="utf-8"><div style="display:none"> 
<input type="hidden" name="ci_csrf_token" value="001b4b051689692edec29d09b9837f3a"> 
</div> <fieldset> 
    <legend>Option Title</legend> 
    <div class="control-group"> 
     <label class="control-label" for="Option title">title</label> 
     <div class="controls"> 
      <input type="text" name="name" id="name" class="span6"> 
     </div> 
    </div> 
    <div class="admin-box" id="option_information"> 
     <fieldset> 
     <legend>Option information</legend> 
     <div class="control-group"> 
      <label class="control-label" for="value">Description</label> 
      <div class="controls"> 
       <input type="text" name="value" id="value" class="span6"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="cost_including_vat">Cost including VAT</label> 
      <div class="controls"> 
       <input type="text" name="cost_including_vat" id="cost_including_vat" class="span6"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="vat_of_cost">VAT of cost</label> 
      <div class="controls"> 
       <input type="text" name="vat_of_cost" id="vat_of_cost" class="span6"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="sale_price_including_vat">Sale price including vat</label> 
      <div class="controls"> 
       <input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="vat_of_sale_price">VAT of sale price</label> 
      <div class="controls"> 
       <input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6"> 
      </div> 
     </div> 
     <div id="image_addition"> 

     </div> 
     <div class="control-group"> 
      <button class="controls" id="add_image" value="Add image">Add Image</button> 
     </div> 
     </fieldset> 
    </div> 
    <div class="control-group"> 
      <button class="controls" id="add_option" value="Add option">Add option</button> 
    </div> 
    <div class="form-actions"> 
     <br> 
     <input type="submit" name="save" class="btn btn-primary" value="Create option"> 
      or <a href="http://localhost/MyZone/public_html/index.php" class="btn btn-warning">Cancel</a>  </div> 
</fieldset> 
</form> 

вот Javascript

var counter_image = 1; 
$('#add_image').click(function() 
{ 
    var newrow = '<div class="control-group">'+ 
      '<label class="control-label" for="image_name'+counter_image+'">Image '+counter_image+' name</label>'+ 
      '<div class="controls">' + 
      '<input type="text" name="image_name'+counter_image+'" id="image_name'+counter_image+'" class="span6" />'+ 
      '</div>' + 
      '</div>' + 
      '<div class="control-group">' + 
      '<label class="control-label" for="image_description'+counter_image+'">Image '+counter_image+' message</label>' + 
      '<div class="controls">' + 
      '<input type="text" name="image_description'+counter_image+'" id="image_description'+counter_image+'" class="span6" />' + 
      '</div>' + 
      '</div>' + 
      '<div class="control-group">' + 
      '<label class="control-label" for="image_url'+counter_image+'">Image '+counter_image+' URL</label>' + 
      '<div class="controls">' + 
      '<input type="url" name="image_url'+counter_image+'" id="image_url'+counter_image+'" class="span6" />' + 
      '</div>' + 
      '</div>'; 
    $('#image_addition').append(newrow); 
    counter_image++; 
    return false; 
}); 

var counter_option = 1; 
$('#add_option').click(function() 
{ 
    var newrow = '<fieldset>' + 
     '<legend>Option information</legend>'+ 
     '<div class="control-group">'+ 
      '<label class="control-label" for="value">Description</label>'+ 
      '<div class="controls">'+ 
       '<input type="text" name="value" id="value" class="span6" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<div class="control-group">'+ 
      '<label class="control-label" for="cost_including_vat">Cost including VAT</label>'+ 
      '<div class="controls">'+ 
       '<input type="text" name="cost_including_vat" id="cost_including_vat" class="span6" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<div class="control-group">'+ 
      '<label class="control-label" for="vat_of_cost">VAT of cost</label>'+ 
      '<div class="controls">'+ 
       '<input type="text" name="vat_of_cost" id="vat_of_cost" class="span6" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<div class="control-group">'+ 
      '<label class="control-label" for="sale_price_including_vat">Sale price including vat</label>'+ 
      '<div class="controls">'+ 
       '<input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<div class="control-group">'+ 
      '<label class="control-label" for="vat_of_sale_price">VAT of sale price</label>'+ 
      '<div class="controls">'+ 
       '<input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<div id="image_addition">'+ 
     '</div>'+ 
     '<div class="control-group">'+ 
      '<button class="controls" id="add_option" value="Add image">Add Image</button>'+ 
     '</div>'+ 
     '</fieldset>'; 
    $('#option_information').append(newrow); 
    counter_option++; 
    return false; 
}); 

Поэтому в основном я могу продолжать добавлять опции штрафа и параметр FIRST я могу добавить бесконечные образы, однако, на любой из e предшествующих опций (генерируемых), когда я нажимаю «Добавить изображение», он просто перезагружает страницу, заставляя меня потерять все, что было создано до сих пор?

Идея состоит в том, что я хочу разрешить кому-либо вводить столько опций и изображений, сколько они хотят добавить, а затем добавить их в базу данных.

Благодаря

Answer 1

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

$("#whatever").click(function(event) { 
    event.preventDefault(); 
    ... 
}); 

Кроме того, глядя на свой коде, я думаю, что вы могли бы извлечь выгоду из глядя в яваскрипте шаблонов двигатель. Они делают такие вещи просто супер. http://underscorejs.org имеет хорошую упаковку, и http://handlebarsjs.com/ также очень мил.

Answer 2

Изменение:

<button class="controls" id="add_option" value="Add option"> 

To:

<button type="button" class="controls" id="add_option" value="Add option"> 

Чтобы предотвратить кнопку от отправки формы. См. type attribute для получения дополнительной информации.

Вы также можете отменить представления формы внутри вашего click обработчика:

$('#add_option').click(function(e) 
{ 
    e.preventDefault(); // Cancel form submit 
    // Rest of code 
}); 

Вы также, конечно, необходимо обновить впрыскивается HTML <button> тег, а также. Одна проблема, с которой вы столкнетесь, - это ваш .click обработчик не будет привязан к новым кнопкам, которые вы создаете. Один из способов, который заключается в использовании .live связывания вместо:

$('#add_option').live('click', function() 
{ 
    // Old code here 
}); 

Вот updated Fiddle.

Совет: Я хотел бы использовать class вместо id, так как, используя тот же id более чем один раз не рекомендуется.В основном, изменения:

<button type="button" class="controls" id="add_option" value="Add option"> 

к:

<button type="button" class="controls add_option" value="Add option"> 

и связать его с:

$('.add_option').live('click', function() 

Если ваш интерфейс становится слишком сложным, вы можете проверить в тип MVVM шаблон такой как Knockout.js, который может все это сделать очень легко привязывая все к модели. Вы просто добавили бы элемент в модель, и он автоматически создавал новый пользовательский интерфейс.

Answer 3

Вы создаете несколько элементов с идентификатором «add_option». Это неправильно. Он может работать в некоторых браузерах.

Кроме того, вы прикрепляете обработчик 'click' к этой кнопке, когда она находится в исходном HTML.

Но когда вы добавляете больше HTML и другую кнопку, вы не ставите на нее обработчик кликов. Его то, что вам нужно будет сделать сразу после того, как вы вызовете .append() с новым HTML.

Обычная работа кнопки - отправить форму, в которой она находится. Отправляющая форма отправит материал на сервер, и сервер отправит содержимое обратно, которое будет отображаться.

ПОДСКАЗКА:

То, что вы можете это способ представить содержимое формы в JavaScript с помощью Ajax. Это не для слабонервных. В Интернете много противоречивой информации, потому что недавние изменения HTML5 сделали ее довольно легкой, но вся старая информация все еще плавает. Вам нужно будет узнать о FormData, который является классом объектов javascript и передает его в файл $.ajax() jQuery. Не забудьте найти примеры этого, чтобы получить другие свойства для вызова ajax.