2016-12-10 3 views
0

Извините за вопрос о нобе. Я прочитал Show Twitter Bootstrap modal on form submit и скопировал код рядом с ним, но это не помогло.Дисплей Bootstrap modal window on submit

Я пытаюсь выполнить следующее поведение на моей странице:

если «id_field1» и поля «» id_field2 были заселены, а затем, когда пользователь нажимает на кнопку «Отправить», форма должна быть представлена ​​и следующим должно отображаться модальное окно:

«[добавить еще] или [перенаправить на другую страницу]?».

еще простое предупреждение должно отображаться («id_field1» и поле «id_field2» должно быть заполнено)

Но мой код в настоящее время оказывает модальное окно, если поля не были заселены, и ничего не подает.

HTML

<form method="POST"> 

    <input class="form-control" id="id_field1" name="field1" type="text" required=""> 
    <input class="form-control" id="id_field2" name="field2" type="text" required="">   

    <button type="button" class="btn btn-xl btn-success" data-toggle="modal" data-target="#myModal" id="formsubmit">Add item</button> 
</form> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-sm"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Item was successfully added</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Add another?</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button> 
       <a href="some_url" class="btn btn-primary">No</a> 
      </div> 
     </div> 
    </div> 
</div> 

JQuery

$(function(){ 
    $("#formsubmit").click(function() { 
     $("form").submit(function(evt){ 

     field1 = $('#id_field1').val(); 
     fiedl2 = $('#id_field2').val(); 

     if((field1 === '') && (field2 === '')){ 
      alert("You must enter tenant's name and phone at least"); 
      evt.preventDefault(); 
     } else { 
      $('#myModal').modal('show'); 
     } 
     }); 
    }); 
}); 

Спасибо так много.

ответ

1

Вы должны сначала установить значения полей в переменные.

$(function(){ 
$('#formsubmit').click(function() { 
    var1 = $('#id_field1').val(); 
    var2 = $('#id_field2').val(); 
    if((var1 === "") && (var2 === "")) { 
     alert("field1 and field2 must be populated"); 
     return false; 
    } else { 
     $('#myModal').modal('show'); 
    } 
    }); 
}); 

Обновлено.

+0

Выполнено. Теперь код выглядит лучше. Есть ли у вас дополнительные идеи? –

+0

Пустые поля должны теперь вызывать предупреждение. И заполненные поля должны вызывать отображение модальных данных. Может ли это сделать для вас? – Landslyde

+0

Попробуйте это: после того, как вы установили значения полей в переменные, поставьте предупреждение, чтобы отобразить две переменные. 'alert (var1 + '' + var2);' Делайте это до начала инструкции 'if'. – Landslyde

Смежные вопросы