如何提交PHP表单和JavaScript弹出窗口的值?

时间:2018-08-31 06:35:56

标签: javascript php jquery

我创建了一个PHP页面,其中包含一些表单信息,并且在表单末尾有一个提交按钮。我知道如何使用PHP post方法从表单中获取所有用户输入。我的问题是以下,我如何创建一个迷你弹出表单,该表单将在用户单击提交按钮后弹出。弹出表单将询问用户是否紧急提交信息,用户只需在紧急或不紧急之间进行选择,然后单击迷你弹出表单(“已处理”)中的一个按钮即可关闭弹出窗口并在另一个PHP页面中发送用户输入的所有信息以及弹出窗口。有人可以指导这个问题吗?

目前我的表单的源代码如下

 <?php include "includes/tasksheader.php"; ?>

    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="main1">
            <div class="contact-section">
            <div class="container">

                <form>
                    <div class="col-md-6 form-line">
                        <div class="form-group">
                            <label for="exampleInputUsername">Social Ensuarance Number</label>
                            <input type="text" class="form-control" id="" placeholder="Ensuarance Number">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail">Land Regisrty Department</label>
                            <input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
                        </div>  
                        <div class="form-group">
                            <label for="telephone">Income Tax Office</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
                        </div>
                        <div class="form-group">
                            <label for="telephone">Court</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Court">
                        </div>
                        <div class="form-group">
                            <label for="telephone">Limassol District Administration</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="District Administration">
                        </div>
                        <div class="form-group">
                            <label for="telephone">Municipality</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Municipality">
                        </div>
                    </div>
                    <div class="col-md-6">
                       <div class="form-group">
                            <label for="exampleInputUsername">VAT Department</label>
                            <input type="text" class="form-control" id="" placeholder="VAT">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail">RCB Bank</label>
                            <input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
                        </div>  
                        <div class="form-group">
                            <label for="telephone">Hellenic Bank</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
                        </div>
                        <div class="form-group">
                            <label for="telephone">Bank of Cyprus</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
                        </div>
                        <div class="form-group">
                            <label for="telephone">CDB Bank</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
                        </div>
                        <div class="form-group">
                            <label for="telephone">Other</label>
                            <input type="tel" class="form-control" id="telephone" placeholder="Other">
                        </div>
                    </div>

                        <div class="form-group">

                            <label for ="description"> Message</label>
                            <textarea  class="form-control" id="description" placeholder="Enter Your Message"></textarea>

                        <div>

                            <button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>  Send Message</button>
                        </div>  
                        </div>                                              
                </form>
            </div>
            </div>
</div>

感谢

2 个答案:

答案 0 :(得分:2)

我猜您需要执行以下操作: 首先创建弹出式表单(具有两个按钮...),然后您需要在javascript文件中编写以下内容:

$('form').on("submit", function(e){
  e.preventDefault();
  $('popup').fadeIn();
  ...
}

$('button').on("click", function(e){
  e.preventDefault();
  $('popup').fadeIn();
  ...
}

然后在弹出窗口中,您将再次需要preventDefault并执行您打算做的所有事情。 希望对您有所帮助:)

答案 1 :(得分:0)

您可以将按钮更改为“提交”按钮,并为表单设置onsubmit:

<button type="submit">

<form method="post" onsubmit="openPopup();return false">

然后使用javascript打开包含所有所需数据的弹出窗口。

我希望这会有所帮助。