如何从 HTML 中创建的表单中提取值并将变量连接成二维码图像 url？

Question

我创建了一个表单，要求用户输入他们的姓名和 phone 号码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Info</title>
<meta name="viewport" content="width=device-width">
<style>
    *,
    *::after,
    *:before{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    html{
        font:normal 20px/1.5 sans-serif;
    }
    h1{
        margin: 1rem 2rem;
    }
    form{
        margin: 2rem;
        width: 800px;
    }
    .form-box{
        padding: 1rem;
        clear: both;
        width: 100%;
        position: relative;
    }
    .form-box label{
        font-size: 1rem;
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .form-box input{
        font-size: 1rem;
        width: 300px;
        padding: 0.25rem 1rem;
    }
    .form-box select{
        font-size: 1rem;
        width: 300px;
        padding: 0.25rem 1rem;
    }
    .form-box option{
        font-size: 1rem;
        width: 300px;
        padding: 0.25rem 1rem;
    }
    .form-box input[type="checkbox"]{
        font-size: 1rem;
    }
    .form-box button{
        font-size: 1rem;
        border: none;
        padding: 0.25rem 2rem;
        margin-right: 1rem;
        color: white;
        background-color: cornflowerblue;
        cursor: pointer;
    }
    
    .error::after{
        background-color: hsl(10, 60%, 50%);
        color: papayawhip;
        font-size: 1rem;
        line-height: 1.8;
        width: 350px;
        padding-left: 1rem;
        position:absolute;
        right: 0;
        content: attr(data-errormsg);
    }
</style>
</head>
<body>
    <div align="center">
        <form action="results.html" method="GET">
            <div>
                <label for="name">Name :</label>
                <input type="text" name="name" id="name" autofocus required tabindex="1"/>
            </div>
            <div>
                <label for="phonenumber">Phone No. :</label>
                <input type="number" name="phonenumber" id="phonenumber" required tabindex="2"/>
            </div>
        <div>
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
        </div>
    </form>
</div>

并输出以下内容 URL

file:///C:/Users/w10us/Desktop/Website/results.html?name=john&phonenumber=0123456789

如何提取名称和 phone 数值并将它们连接成图像 URL 以生成 QR 码

我想要的输出是：

<img src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={name}_{phonenumber}' height=250 width=250/>

Answer 1

我想我已经找到了解决您问题的方法。在 results.html 上，将以下 javascript 放入 <head> 或链接到 results.html 的单独 .js 文件中：此代码在加载文档时运行，然后从 url 中检索值。

window.onload = function() {
  //use the line below this one to get a dynamic result. This is for demonstration purposes only.
  let url = new URL('file:///C:/Users/w10us/Desktop/Website/results.html?name=john&phonenumber=0123456789');
  //let url = new URL(window.location.href);
  let name = url.searchParams.get("name");
  let phoneNumber = url.searchParams.get("phonenumber");
  //create the qr code url
  let qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=" + name + "_" + phoneNumber;
  //set the qr code url as the source of the image tag
  document.getElementById('qrCodeImg').src = qrCodeUrl;
}

<img id='qrCodeImg' src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={name}_{phonenumber}' height=250 width=250/>

希望对您有所帮助！如果没有，请评论

如何从 HTML 中创建的表单中提取值并将变量连接成二维码图像 url？

how to extract the values from a form created in HTML and concatenate the variables into a qr code image url?

html

forms

qr-code