Как отправить эту форму, используя jQuery AJAX? - PullRequest
Новая
       2

Как отправить эту форму, используя jQuery AJAX?

1 голос
/ 05 августа 2011

У меня есть форма электронной почты PHP, и пользователь вводит свою электронную почту и отправляет им ссылку на загруженный файл.Как мне отправить эту форму с AJAX?

Прямо сейчас у меня это там, где они нажимают на ссылку, чтобы перейти на страницу с формой электронной почты, и я передаю переменную $target_path в URL, чтобы ссылка на загруженный файл моглабыть в электронной почте.Вот PHP, который у меня есть на странице «Успешно загружено», чтобы перейти на email.php: 

<?php echo "<a href='email.php?target_path=".$target_path."'>Click here</a> to get the link sent to your email." ?>

Вот источник email.php: 

<html>
<head>
<title>Upload File</title>
<style type="text/css">
body {
font-family:arial,sans-serif;
}
.error {
color:red;
}
</style>
</head>
<body>
<?php
function spamcheck($field)
  {
  //filter_var() sanitizes the e-mail
  //address using FILTER_SANITIZE_EMAIL
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);

  //filter_var() validates the e-mail
  //address using FILTER_VALIDATE_EMAIL
  if(filter_var($field, FILTER_VALIDATE_EMAIL))
    {
    return TRUE;
    }
  else
    {
    return FALSE;
    }
  }

if (isset($_REQUEST['email']))
  {//if "email" is filled out, proceed

  //check if the email address is invalid
  $mailcheck = spamcheck($_REQUEST['email']);
  if ($mailcheck==FALSE)
    {
    echo "Invalid email, please try again.";
    }
  else
    {//send email
    $to = $_REQUEST['email'] ;
    $subject = "Your file has been uploaded to our site and here's a link to it" ;
    $message = "
Hello,

Your file has been uploaded to our site. Here is a link to it for future reference, keep this email if you want to remember the link to your file: http://www.example.com/upload/".$_REQUEST['target_path']."

Thank you.";

    mail($to,$subject,$message, "From: noreply@example.com" );
    echo "Email has been sent. Please check your inbox and/or spam folder.";
    }
  }
else
  {//if "email" is not filled out, display the form
  echo "<form method='post' action=''>
  Email: <input name='email' type='text' /><br /><br />
  <input type='submit' />
  </form>";
  }
?>
</body>
</html>

Как вы можете видеть,когда они нажимают на ссылку, чтобы перейти к email.php на странице «Успешно загруженный файл» (upload.php), она пропускает переменную $target_path, чтобы иметь возможность отправить ссылку на загруженный файл.

Я хотел бы поместить форму электронной почты прямо на upload.php (страницу, на которую отправляется форма загрузки файла), а затем отправить эту форму электронной почты с помощью jQuery AJAX.Я просто не знаю, как заставить это работать.Мне также понадобится передать эту переменную, но я не думаю, что она будет в URL, возможно, она будет где-то еще в коде AJAX.

Любая помощь очень ценится.

Спасибо,
Натан

Ответы [ 3 ]

2 голосов
/ 05 августа 2011

Вы можете добавить скрытый ввод в форму, содержащую значение target_path, чтобы избежать передачи его через URL-адрес и легко получить к нему доступ через обратный вызов jQuery AJAX. 

<input type='hidden' id='path' value='<?php echo $target_path;?>'/>

и добавьте 

var path=$('#path').val();
var email=$('#email').val();

и отправьте их обоих с параметром данных. 

data:{'path' : path, 'email' : email}

В противном случае первый пост почти охватит его.

2 голосов
/ 05 августа 2011

Следующий бит JS кода 

$(document).ready(function(){

    $('#emailbtn').click(function(){
            //This is short form of php echo
        var target_path = <?php=$target_path?> 

            //Get eMail from input
            var email = $('#email').val(); 

            //Send form to email.php using GET method
        $.ajax(
        {
            type: "GET",
            url: "email.php",
            data: ({"target_path" :  target_path, "email" : email}),
            success: function(message)
            {   
                $("#btnspan").empty().append(message);
            }
        });         
    });
});

Это HTML-код 

<span id="btnspan">Your eMail: <input type="text" name="email" id="email" /> <button id="emailbtn" class="button">eMail me the link</button></span>

Кажется, ваш email.php возвращает действительные сообщения, поэтому, когда вы нажмете кнопку, произойдет следующее: содержимое, предоставленное вашим php, заменит содержимое формы! Страница НЕ обновляется.

Одна вещь, которую я бы предложил вам изменить - это метод GET, измените его на POST! Для php я предполагаю, что вы знаете, что $_POST[varname] для получения значения, а для JS просто измените тип AJAX на POST.

1 голос
/ 05 августа 2011

Я очень рекомендую плагин JQuery Form , найденный на http://jquery.malsup.com/form/. Добавление новых функций ajax к новым или существующим формам становится тривиальным, и я использую его в приложениях, которые могут работать как в режиме ajax, так и в режиме без Ajax.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...