如何在html表单上将值从javascript传递到php？_Javascript_Php_Html

如何在html表单上将值从javascript传递到php？

javascript php html

如何在html表单上将值从javascript传递到php？,javascript,php,html,Javascript,Php,Html,我的用例是创建一个接受任何国际号码的HTML表单，并将其传递给php应用程序，该应用程序通过TwilioAPI调用该号码。现在PHP应用程序需要HTTP POST请求我正在使用intl tel输入javascript格式化和验证html表单中输入的电话号码。作为一名新手，我想了解如何从html表单上运行的javascript中获取格式化的数字，并从同一html表单实例化post方法并调用php应用程序到目前为止，我只知道这一点，我不知道如何设置post方法来调用php应用程序？有什么想法吗

我的用例是创建一个接受任何国际号码的HTML表单，并将其传递给php应用程序，该应用程序通过TwilioAPI调用该号码。现在PHP应用程序需要HTTP POST请求

我正在使用intl tel输入javascript格式化和验证html表单中输入的电话号码。作为一名新手，我想了解如何从html表单上运行的javascript中获取格式化的数字，并从同一html表单实例化post方法并调用php应用程序

到目前为止，我只知道这一点，我不知道如何设置post方法来调用php应用程序？有什么想法吗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="build/css/intlTelInput.css">
</head>
<body>

<form>
    <input id="phone" type="tel" name="phone">
    <button type="submit">Call</button>
</form>

<script src="build/js/intlTelInput.js"></script>
<script src="build/js/prism.js"></script>
<script src="build/js/isValidNumber.js"></script>

<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
    separateDialCode: true,
    utilsScript: "build/js/utils.js",
}); 

</script>

</body>
</html>


呼叫
var输入=document.querySelector（“电话”）；
window.intlTelInput（输入{
分离代码：对，
utilsScript：“build/js/utils.js”，
});

下面是启动实际电话呼叫的PHP文件：

<?php

require_once '/path/to/vendor/autoload.php';

use Twilio\Rest\Client;

$sid    = "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$token  = "your_auth_token";
$twilio = new Client($sid, $token);
$from = "xxxxx";
$to = $_POST['phone'];

$call = $twilio->calls
->create($to, $from, array("url" => "http://demo.twilio.com/docs/voice.xml"));
print($call->sid);

sid）；

正如我提到的，问题是如何从上面的html表单调用这个php应用程序，并将phone变量中的值传递给它？

First

call

call

然后添加一些Javascript：

<script>
window.onload = function() {
    const button = document.querySelector("#submitButton");
    button.addEventListener('click', () => {
        sendRequest();
        alert('button clicked');    
    });
}
function sendRequest() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     console.log(this.responseText);
    }
  };

  const number = document.querySelector("#phone").value;

  xhttp.open("POST", "/path/to/php/endpoint", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(`number=${number}`);
}
</script>


window.onload=函数（）{
const button=document.querySelector（“提交按钮”）；
按钮。addEventListener（'单击'，（）=>{
sendRequest（）；
警报（“点击按钮”）；
});
}
函数sendRequest（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
console.log（this.responseText）；
}
};
const number=document.querySelector（#phone”）.value；
open（“POST”，“/path/to/php/endpoint”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
send（`number=${number}`）；
}

使用jquery ajax调用和post方法：像这样：- html:

只需使用JS验证/更新HTML表单字段，并正常发布即可？到目前为止，您尝试了什么？你被困在哪里了？非常感谢，成功了。不确定我是否理解所有函数，但我希望了解…

window.onload

用于确保在加载DOM时设置eventlistener，而不是更早。如果-Tag设置了

defer

-属性或包含在文档底部，则可以删除window.onload。

<form>
    <input id="phone" type="tel" name="phone">
    <button type="button" onclick="return send_number();">Call</button>
</form>

function send_number()
{
    var post_data = { };
    var phone = $("#phone").val();
    post_data['phone'] = phone;
    var APPUrl = 'App_receive_number.php'; 
    $.ajax({
        type: "POST",
        url: APPUrl,
        data: post_data,
        cache: false,
        success: function(res)
        {
          alert("Success! Sent!"); return true;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Failed! Please Try Again!");
            return false;
        }            
    });
}