英文:
How do I in replace "&" with "%20" in HTML
问题
最近我创建了一个代码来向WhatsApp发送订单，但在尝试发送消息时遇到了问题。
问题在于，在每个输入之前，消息都会添加一个&，我需要将其替换为%20，以便与WhatsApp一起正常工作。
我已经尝试过更改代码，但似乎没有任何效果。
我的实际代码是：
<form action="https://api.whatsapp.com/send?" method="GET" target="_blank" style="text-align: center;"><input type="hidden" name="phone" value="56987955586" /><input type="hidden" name="" value="" /><input type="hidden" name="text" value="" /><ul style="list-style: none; padding: 0; display: grid; grid-gap: 10px;"><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 1:</span><input type="number" name="producto1" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 2:</span><input type="number" name="producto2" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li></ul><button type="submit" style="background-color: #00c853; color: #ffffff; font-size: 20px; border-radius: 40px; border: none; padding: 15px 30px; margin: 20px auto; display: block; text-transform: uppercase; font-weight: bold;">Enviar Pedido por WhatsApp</button></form><style>@media (min-width: 501px) {ul {display: grid;grid-template-columns: repeat(2, 1fr);}}@media (min-width: 801px) {ul {grid-template-columns: repeat(3, 1fr);}}</style>
英文:
I recently created a code to send an order to WhatsApp but I'm running into trouble trying to make the code send a message.
The issue is that before each input the message gets an & and I need to replace it with %20 in order for it to work with WhatsApp.
I've tried to change the code and nothing seems to work.
My actual code is:
<form action="https://api.whatsapp.com/send?" method="GET" target="_blank" style="text-align: center;"><input type="hidden" name="phone" value="56987955586" /><input type="hidden" name="" value="" /><input type="hidden" name="text" value="" /><ul style="list-style: none; padding: 0; display: grid; grid-gap: 10px;"><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 1:</span><input type="number" name="producto1" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 2:</span><input type="number" name="producto2" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li></ul><button type="submit" style="background-color: #00c853; color: #ffffff; font-size: 20px; border-radius: 40px; border: none; padding: 15px 30px; margin: 20px auto; display: block; text-transform: uppercase; font-weight: bold;">Enviar Pedido por WhatsApp</button></form><style>@media (min-width: 501px) {ul {display: grid;grid-template-columns: repeat(2, 1fr);}}@media (min-width: 801px) {ul {grid-template-columns: repeat(3, 1fr);}}</style>
答案1
得分: 1
如果您想将 producto 值嵌入到 text 参数中，您需要一些 JavaScript 代码来实现。
首先，将 name 属性替换为 id，以便它们不包含在表单数据中，并添加一个类来帮助识别它们。
<inputtype="number"id="producto1"min="0"value="0"class="text-body"/>
然后，添加一个 submit 事件监听器来收集这些值并将它们插入到 text 输入值中。
<form id="whatsapp-form" ...><!-- ... --></form><script>document.getElementById("whatsapp-form").addEventListener("submit", (e) => {e.target.querySelector("input[name=text]").value = Array.from(e.target.querySelectorAll(".text-body"),({ id, value }) => `${id}=${value}`).join(" ");});</script>
英文:
If you want to embed the producto values into the text parameter, you'll need some JS in order to do so.
First, replace the name attributes with id so they're not included in the form data and add a class to help identify them
<inputtype="number"id="producto1"min="0"value="0"class="text-body"/>
Then add a submit event listener to collect the values and insert them into the text input value
<form id="whatsapp-form" ...><!-- ... --></form><script>document.getElementById("whatsapp-form").addEventListener("submit", (e) => {e.target.querySelector("input[name=text]").value = Array.from(e.target.querySelectorAll(".text-body"),({ id, value }) => `${id}=${value}`).join(" ");});</script>
答案2
得分: 0
根据您的评论，您确实希望将这些输入的 producto[N] 值附加到消息正文中。为了实现这一点，您必须按照以下步骤进行操作：
- 停止 表单提交。
- 获取 producto[N] 值。
- 将这些值设置为消息正文。
- 构建查询字符串。
- 构建 URL。
- 设置 URL 的查询字符串。
- 发送 消息。
以下是您提供的代码片段：
const form = document.querySelector("form"),phone = form.phone.value;form.addEventListener("submit", e => {//1. 阻止表单提交e.preventDefault();//2. 获取 productos 的值const values = [...form.querySelectorAll("[name^=producto]")].map(elem => elem.previousElementSibling.textContent + elem.value);//3. 将这些值设置为消息正文const text = `这里是产品: ${values.join(", ")}`;//4. 构建查询字符串const queryString = new URLSearchParams({phone, text});//5. 构建 URLconst url = new URL(form.action);//6. 设置 URL 的查询字符串url.search = queryString;//7. 发送消息（新标签页）window.open(url);//可选: location = url; (同一标签页)}, false);
希望这有助于您的项目！
英文:
According to your comments, you do want to attach those input producto[N] values to the message body. In order to get that, you must follow these steps:
- Stop form submit.
- Get the producto[N] values.
- Set those values as the message body.
- Build the query string.
- Build the URL.
- Set URL's query string.
- Send the message.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const form = document.querySelector("form"),phone = form.phone.value;form.addEventListener("submit", e => {//1. Stop form submite.preventDefault();//2. Get the productos valuesconst values = [...form.querySelectorAll("[name^=producto]")].map(elem => elem.previousElementSibling.textContent + elem.value);//3. Set those values as the message bodyconst text = `Here are the products: ${values.join(", ")}`;//4. Build the query stringconst queryString = new URLSearchParams({phone, text});//5. Build the URLconst url = new URL(form.action);//6. Set URL's query stringurl.search = queryString;//7. Send the message (new tab)window.open(url);//Optional: location = url; (same tab)}, false);
<!-- language: lang-css -->
@media (min-width: 501px) {ul {display: grid;grid-template-columns: repeat(2, 1fr);}}@media (min-width: 801px) {ul {grid-template-columns: repeat(3, 1fr);}}
<!-- language: lang-html -->
<form action="https://api.whatsapp.com/send?" method="GET" target="_blank" style="text-align: center;"><input type="hidden" name="phone" value="56987955586" /><input type="hidden" name="" value="" /><input type="hidden" name="text" value="" /><ul style="list-style: none; padding: 0; display: grid; grid-gap: 10px;"><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 1:</span><input type="number" name="producto1" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li><li style="margin-bottom: 10px;"><span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 2:</span><input type="number" name="producto2" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" /></li></ul><button type="submit" style="background-color: #00c853; color: #ffffff; font-size: 20px; border-radius: 40px; border: none; padding: 15px 30px; margin: 20px auto; display: block; text-transform: uppercase; font-weight: bold;">Enviar Pedido por WhatsApp</button></form>
<!-- end snippet -->
Thanks Sebastian Simon for the API URL suggest.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论