Как вызвать php скрипт без перезагрузки страницы?

Question

[Dmitriy__S]

Доброго времени суток.
Такая проблема:
Есть форма

<form id="form1"  method="post"> 
                    <ul>
                        <li><a href="#close" title="Close" class="close" onclick="closeForm()">x</a></li>
                        <li><p>Оставьте заявку<br> и наш консультант позвонит вам <br>в течении 15 минут.</p></li>
                        <li> 
                            <input type="text" id="name" name="clientName" placeholder="Ваше имя">
                        </li>
                        <li>
                            <input type="tel" id="phone" name="clientPhone" placeholder="Ваш контактный телефон">
                        </li>
                        <li>
                            <button type="submit" id="subBtn">Заказать звонок</button>
                        </li>
                    </ul>
            </form>

Есть php скрипт на отправку почты, если прописать в форме action="/php/code.php" он отрабатывает нормально

<?
if((isset($_POST["clientName"])&&$_POST["clientName"]!="")&&(isset($_POST["clientPhone"])&&$_POST["clientPhone"]!="")){ 
    $to = "....@...";
    $subject = "Письмо с сайта";
    $charset = "utf-8";
    $headerss ="Content-type: text/html; charset=$charset\r\n";
    $headerss.="MIME-Version: 1.0\r\n";
    $headerss.="Date: ".date('D, d M Y h:i:s O')."\r\n";
    $msg = "Имя: ".$_POST["clientName"]."\n";$msg .= "Телефон: ".$_POST["clientPhone"]."\n";
    mail($to, $subject, $msg, $headerss);
    echo 'Заявка отправлена!';
}
?>

Но, если я пытаюсь вызвать его без перезагрузки страницы, через js файл "/js/script.js":

$('#subBtn').click(function(){
    $.post(
        '/php/code.php',
        $('form1').serialize(),
        function(msg) { 
            $('#form1').hide('slow');
            alert(msg);
        )
    }
});

ничего не происходит.

если в .js прописываю

$('#subBtn').click(function(){
            alert("work");
});

сообщение показывается.

Answer 1

[Anton Semenov]

нада не событие submit (не click) отлавливать и preventDefault() добавить.

$("#form1").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    
    $.ajax({
           type: "POST",
           url: '/php/code.php', //возможно тут нужен полный путь к файлу типа http://myweb.ru....
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
});

Comments

[Dmitriy__S]

Попробовал, не срабатывает..

[Anton Semenov]

Так же для дебага можно временно заменить POST на GET

и Проверить получает ли что то сам файл code.php доходят ли до него значения, и работает ли функция отправки mail()

[Anton Semenov]

Dmitriy__S, скопируй мой код полностью, тк у тебя он с ошибками и проделай для проверки все то что я тебе написал выше

для дебага javascript можно натыкать везде console.log('ok'); и смотреть в консоль браузера что бы понимать доходит ли до туда обработка

[Dmitriy__S]

Хотя я это и пробовал уже, но полный путь к файлу помог . Спасибо.

[debian_Lenovo-B50-30]

не будет такой код работать, если на теге button будет name и value для отправки, тег button не попадает в сериализацию

так же такой код не будет работать, если в форме несколько тегов button с атрибутами - formaction

ещё вот это

var form = $(this);
    
    $.ajax({
           type: "POST",
           url: '/php/code.php', //возможно тут нужен полный путь к файлу типа http://myweb.ru....
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

делается вот так

$.ajax({
           type: this.method,
           url: this.action, // прописать action="/php/code.php" в теге form и не лазить в скрипт для этого
           data: $(this).serialize(),
           success: function(data)
           {
               alert(data);
           }
         });

и ещё куча всего

Answer 2

[scottparker]

$('#subBtn').click(function(){
    $.post{
        '/php/code.php',
        $('form1').serialize(),
        function(msg) { 
            $('#form1').hide('slow');
            alert(msg);
        }
    }
});

скобки здесь проверьте