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

Get data from input and on submit button clicked console log the data

本文关键字：数据单击按钮控制台记录日志提交输入获取更新时间：2023-09-26

当用户输入姓名、电子邮件、主题、文本、电话时，我试图发送带有数据的电子邮件email@gmail.com一封特殊的电子邮件在我的情况下，网站是为酒店，所以酒店的电子邮件。以下代码不起作用，并且在"#submit"按钮单击时没有显示任何数据。我找不出它不起作用的原因。它是带有表单标签的东西，或者是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);
?>

用替换点击功能

$("#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(varData);
                    $.ajax({
                        type: "POST",
                        url: 'login.php',
                        data : varData,
                        success: function(){
                            alert("message sent");
                        }
                    });
                });

您需要准备一个#来使用其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");
        }
    });