duanfuchi7236 2013-03-05 03:19
浏览 42
已采纳

提交PHP联系表单后打开模态窗口(AJAX?jQuery?)

I have reformulated my first question because it was too vague I believe!

The case: santz.net/index.contacto.html (if you want to try sending something it's okay... I recieve it so no problem)

Here's my code for.....

The Contact Form:

    <form id="contact-form" name="contact-form" class="p25" action="contact.php" method="post">
        <fieldset>
            <label class="name">
                <input class="input" type="text" value="Nombre" onfocus="if(this.value == 'Nombre'){this.value = '';}" onblur="if(this.value == ''){this.value='Nombre';}" name="php_name" />
            </label>
            <label class="email">
                <input class="input" type="email" value="Email" onfocus="if(this.value == 'Email'){this.value = '';}" onblur="if(this.value == ''){this.value='Email';}" name="php_email" />
            </label>
            <label class="phone">
                <input class="input" type="tel" value="Teléfono" onfocus="if(this.value == 'Teléfono'){this.value = '';}" onblur="if(this.value == ''){this.value='Teléfono';}" name="php_phone" />
            </label>
            <label class="message">
                <textarea class="textarea" onfocus="if(this.value == 'Mensaje'){this.value = '';}" onblur="if(this.value == ''){this.value='Mensaje';}" name="php_message">Mensaje</textarea>
            </label>

            <div class="buttons-wrapper ml20">
                <div class="submit-comment">
                    <span></span>
                    <input type="reset" value="Cancelar">
                </div>
                <div class="submit-comment ml25">
                    <span></span>
                    <input type="submit" value="Enviar">
                    <div id="clicker"></div>
                </div>
            </div>
        </fieldset>
    </form>

And here's my PHP code:

<?php
$field_name = $_POST['php_name'];
$field_email = $_POST['php_email'];
$field_phone = $_POST['php_phone'];
$field_message = $_POST['php_message'];

$field_sender = 's2@hotmail.com';

$mail_to = 's@hotmail.com';
$subject = 'Mensaje via Santz.net de '.$field_name;

$body_message = 'From: '.$field_name."
";
$body_message .= 'E-mail: '.$field_email."
";
$body_message .= 'Phone: '.$field_phone."
";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$field_sender."
";
$headers .= 'Reply-To: '.$field_email."
";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        alert('Gracias por contactarse, en breve, me pondre en contacto.

Santz Design | www.santz.net');
        window.location = 'index.contacto.html';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        alert('El envio fallo. Por favor, envie un mail directamente a info@santz.net');
        window.location = 'index.contacto.html';
    </script>
<?php
}
?>

What I want do do is the following...

The contact form right now works, and I get the email... that's fine... so:

1- I need to eliminate the page refresh/redirection when you submit the form 2- To replace the refresh/reload/redirect, I need that when the form is submited, I want it to open a modal window (I would put any content there...) (example: pixeden.com/media-icons/soft-media-icons-set-vol-2 ...the dialog that opens when I hit "Download")

This is what another user recommended me for the modal box (it's quite nice): mywebdeveloperblog.com/my-jquery-plugins/modalpoplite

The thing is I don't understand how to delete the reload/refresh/redirect issue after submiting and I don't understand how to connect the modal box opening event after the form is submited...

NOTE:

I'm quite new to all of this (I'm only aged 17), so I'm not a programmer... just a designer that understands little programming... but I'm learning to program web so I need help.

If PHP is not the way to go and I need to chenge of programming technology, please let me know. I'm open to any programming language that fully solves my problem!

Thanks a lot!!!

  • 写回答

2条回答 默认 最新

  • dongwu9063 2013-03-05 03:40
    关注

    Put this script in the <head> of your contact form:

    <link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#dialog-modal").dialog({
            height: 140,
            modal: true,
            autoOpen: false
        });
        $('#contact-form').submit(function() {
            $("#dialog-modal").dialog("open");
            $.ajax({
                type: "POST",
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function() {
                    $("#dialog-modal").dialog("close");
                }
            });
            return false;
        });
    });
    </script>
    

    Paste this anywhere in the body:

    <div id="dialog-modal">Form submitted</div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 spring后端vue前端
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题