从输入中获取数据并在提交按钮上单击控制台记录数据

时间:2015-11-19 17:55:16

标签: javascript php jquery html ajax

当用户输入他的姓名,电子邮件,主题,文字,电话时,我试图发送带有数据的电子邮件。这封电子邮件发送到电子邮件,如email@gmail.com我的案例中的特定电子邮件是网站酒店所以酒店的电子邮件。 以下代码无效,并且不显示"#submit"按钮单击。我无法找到它无法正常工作的原因。它与form标签或javascript中的某个地方有些不同

Javascript / Jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
        <script>

            $(document).ready(function(){
                $("#submit").click(function(){
                    var email = $("#email").val();  
                    var name = $("Name").val();
                    var subject = $("Subject").val();
                    var text = $("textarea").val();
                    var telephone = $("tel").val();
                    var data = "email : "+email + "name : " + name + "subject : " + subject + "text : "+text + "telephone : " + telephone;
                    console.log(data);
                });
            });

HTML:

<form action="POST">
                    <label for="email">Email:</label>           
                    <input type="text" name="email" id="email">
                    <label for="Name">Name:</label>
                    <input type="text" name="Name" id="Name">
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject">
                    <label for="text">Text:</label>
                    <textarea name="text" id="textarea" cols="30" rows="5" ></textarea>
                    <label for="Tel">Telephone:</label>
                    <input type="text" name="Telephone" id="tel">
                    <br><br>
                    <input type="button" value="send" id="submit">  
                </form>

稍后为此任务添加了AJAX脚本:

$(document).ready(function(){
                $("#submit").click(function(){
                    var email = $("#email").val();  
                    var name = $("Name").val();
                    var subject = $("Subject").val();
                    var text = $("textarea").val();
                    var telephone = $("tel").val();
                    var varData = "email : "+email + "name : " + name + "subject : " + subject + "text : "+text + "telephone : " + telephone;
                    console.log(data);

                    $.ajax({
                        type: "POST",
                        url: 'sendPHP.php',
                        data : varData,
                        success: function(){
                            alert("message sent");
                        }
                    });
                });
            });

并在sendPHP.php文件中输入如下代码:

<?php 
   $name = $_POST['email'];
   and so on ..
   ..
  ..
mail(something that sends above data to partcularEmail@gmail.com);
?>

2 个答案:

答案 0 :(得分:1)

您需要预先添加#以使用它的ID来选择元素。

                    var email = $("#email").val();  
                    var name = $("#Name").val();
                    var subject = $("#Subject").val();
                    var text = $("#textarea").val();
                    var telephone = $("#tel").val();
                    var varData = {"email":email,"name":name,"subject":subject,"text":text,"telephone":telephone};

ajax代码应该是

    $.ajax({
        type: "POST",
        url: 'sendPHP.php',
        data : varData,
        success: function(){
            alert("message sent");
        }
    });

答案 1 :(得分:1)

替换点击功能
<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>