Question 196373 in Html Question posted in
Some basic documentation can be found here.

How do I in replace "&" with "%20" in HTML

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.

URL preview

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>
Tags:

2

Answers


  1. 0

    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

    <input
  type="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>
    Login or Signup to reply.
  2. 0

    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:

    1. Stop form submit.
    2. Get the producto[N] values.
    3. Set those values as the message body.
    4. Build the query string.
    5. Build the URL + query string.
    6. Send the message
    const form = document.querySelector("form"),
      phone = form.phone.value;

form.addEventListener("submit", e => {
    //1. Stop form submit
    e.preventDefault();
    
    //2. Get the productos values
    const values = [...form.querySelectorAll("[name^=producto]")].map(elem => elem.previousElementSibling.textContent + elem.value);
    
    //3. Set those values as the message body
    const message = `Here are the products: ${values.join(", ")}`;
    
    //4. Build the query string
    const queryString = `phone=${phone}&message=${message}`;
    
    //5. Build the URL + query string
    const url = form.action + queryString;
    
    //6. Send the message (in a new tab)
    window.open(url);
    
    //Sending the message in the same tab: location = url;
}, false);
    @media (min-width: 501px) {
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 801px) {
    ul {
        grid-template-columns: repeat(3, 1fr);
    }
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search