Как отправить форму в Bootstrap Модал (отправить метод POST в Модал) Laravel

Question

Как отправить форму в Bootstrap Модал (отправить метод POST в Модал) Laravel

Я пытался в течение 2 дней, но до сих пор не повезло!

я бы хотел

Отправить форму из index.php в result.php
Показать result.php внутри модального, пока index.php открыт! (без
закрытие index.php)

вот пример кода!

index.php

<form id="myform" method="post" action="result.php" target="_blank">
<input type="text" name="userId" id="userId"/>
<input id="button" type="submit"/>
</form>

result.php

    <div id="resultModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-times-circle"></i>ESC</button>
<h4 class="modal-title">Show Result </h4>
</div>
<div class="modal-body"></div>

</div>
</div>
</div>

В модальном теле

<?php  $selectedId = $_POST['userId'];
echo  $selectedId;
?>

И JQuery

<script type="text/javascript">

$('#myForm').on('submit', function(ev) {
var userId = $('#userId').find("input").val();
$.ajax({
type: 'POST',
url : $(this).attr('action'),
data: userId,
success: function () {
// alert('form was submitted');
}
});
});
</script>

2

bootstrap-modal php twitter-bootstrap

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Ну, это заняло у меня некоторое время, но я думаю, что нашел ответ на ваш вопрос, или, по крайней мере, это решение может дать вам хорошую подсказку о том, как продолжить то, что вы делаете.

Первый index.php: Здесь вам нужно иметь форму с полем ввода и одной кнопкой, которую мы будем называть модальной, и отправлять форму (используя Ajax для публикации)

<form id="form" method="post">
<div id="userDiv"><label>UserId</label>
<input type="text" name="userId" id="userId" placeholder="UserId"/> <br></div>
<button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>

Тогда вам нужен модал, где вы будете размещать контент с удаленной страницы. В модальное тело вы добавляете еще один тег div с id = «bingo», чтобы легко его найти :), например:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">MyModal</h4>
</div>
<div class="modal-body">
<div id="bingo"></div>

</div>
</div>
</div>
</div>

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

<script>
$(document).ready(function(){
$("#btn").click(function(){
var vUserId = $("#userId").val();
if(vUserId=='')
{
alert("Please enter UserId");
}
else{
$.post("result.php", //Required URL of the page on server
{ // Data Sending With Request To Server
user:vUserId,
},
function(response,status){ // Required Callback Function
$("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
$("#form")[0].reset();
});
}
});
});
</script>

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

<?php
if($_POST["user"])
{
$user = $_POST["user"];
// Here, you can also perform some database query operations with above values.
echo "Your user id is: ". $user;
}
?>

Постскриптум Я надеюсь, что где-то не связывался с идентификаторами, переменными или подобными, потому что я пытался приспособить решение к вашему примеру. Я надеюсь, что это то, что вам нужно, или, по крайней мере, это будет ключ к выполнению вашей задачи. Все еще думаю, что это можно сделать на одной странице, но мне было интересно попытаться найти способ сделать эту работу … GL!

3