Я пытаюсь сохранить данные, представленные из формы, в мою базу данных mysql, а затем обновить элемент div последним опубликованным элементом, добавленным в список в div.
Прямо сейчас я только пытаюсь получить ответ, я не беспокоюсь о правильности форматирования на данный момент.
Моя проблема заключается в том, что форма не будет отправляться с e.preventDefault(); на месте, но без него форма выполняет обычный метод отправки в db, а затем обновляет страницу.
Вот мой вызов AJAX:
$(document).ready(function() { $('form#feedInput').submit(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "<?php echo site_url('dashboard/post_feed_item'); ?>", data: $('.feed-input').val(), dataType: "html", success: function(data){ debugger; $('#feed-container').prepend(data); }, error: function() { alert("Error posting feed."); } }); }); });
Я не думаю, что мне нужно публиковать свой код контроллера, поскольку, поскольку моя проблема – это форма, она не пройдет мимо e.preventDefault(); функция.
Как я могу получить эту форму для отправки через AJAX, если e.preventDefault() останавливает ее, прежде чем она сможет достичь функции $.ajax() ?
Атрибут data для вызова ajax недействителен. Он должен быть либо в формате JSON { key: $('.feed-input').val() } либо в формате запроса 'key='+$('.feed-input').val() . Также в методе успеха есть ненужная переменная debugger .
Рабочий код может быть:
$('form#feedInput').submit(function(e) { var form = $(this); e.preventDefault(); $.ajax({ type: "POST", url: "<?php echo site_url('dashboard/post_feed_item'); ?>", data: form.serialize(), // <--- THIS IS THE CHANGE dataType: "html", success: function(data){ $('#feed-container').prepend(data); }, error: function() { alert("Error posting feed."); } }); });
Вам не нужно использовать preventDefault(); вы можете использовать return false; в конце функции submit() но я сомневаюсь, что это проблема.
Вы также должны использовать кодировку url для $('.feed-input').val() для этого использует encodeURIComponent .
Вы также должны проверить наличие ошибок в консоли.
Чтобы определить, предотвращено ли действие по умолчанию, вы можете использовать e.isDefaultPrevented() . По умолчанию действие в этом случае означает подачу действия формы с id feedInput.
Вы не указали свой параметр в данных. Проверьте примеры jQuery ajax .
Вероятно, вы получаете ошибку e.preventDefault(); не останавливает ajax.
$.ajax({ type: "POST", url: "<?php echo site_url('dashboard/post_feed_item'); ?>", data: $("#form").serializeArray(), success: function(resp){ $('#container').html(resp); }, error: function(resp) { alert(JSON.stringify(resp)); } });
Html часть в поле зрения
<form id="comment" method="post"> <h2>Enter Your Details</h2> <center><div id="result"></div></center> <div class="form_fld"> <label>Name</label> <input type="text" placeholder="Enter Your Full Name" name="name" required=""> </div> <div class="form_fld"> <label>Email ID</label> <input type="text" placeholder="Enter Email ID" name="email" required=""> </div> <div class="form_fld"> <label>Contact Number</label> <input type="text" placeholder="Enter Contact Number" name="contact" required=""> </div> <div class="form_fld"> <label>Developer</label> <select name="developer"> <option>Lotus</option> <option>Ekta</option> <option>Proviso</option> <option>Dosti</option> <option>All</option> </select> </div> <div class="form_fld"> <button type="submit" id="send">Submit</button> </div> </form> After Html Part Just put ajax request <script type="text/javascript" src="<?php echo base_url('assets/'); ?>js/jquery.js"></script> <script> $(function(){ $("#comment").submit(function(){ dataString = $("#comment").serialize(); $.ajax({ type: "POST", url: "home/contact", data: dataString, success: function(data){ // alert('Successful!'); $("#result").html('Successfully updated record!'); $("#result").addClass("alert alert-success"); } }); return false; //stop the actual form post !important! }); }); </script> **Within Controller** public function contact() { $ip = $_SERVER['REMOTE_ADDR']; $data = array('name' => $this->input->post('name'), 'email' => $this->input->post('email'), 'number' => $this->input->post('contact'), 'developer' => $this->input->post('developer'), 'ip' => $ip, 'date' => date("d/m/Y")); $result = $this->User_model->contact($data); print_r($result); }