sending text messages through twilio

Question

i have an application that allows the user to send a text message by entering a phone number into the input field. but the text message is set to just say "hello". how can i allow the user to enter what they want the text message to say. heres the code

JS

app.get("/:data", function(req, resp){

var accountSid = '*******************'
var authToken = '*********************'

const client = require('twilio')(accountSid, authToken);

client.messages.create({

to: req.params.data,
from: '**********',
body: "Hello"
}, function(err, message) {
if(err) {
console.log(err);
} else {
console.log(message.sid);
}

});

HTML

<input type="text" placeholder="Enter your number" id="inputNum" />

<button id="submitNum">Enter</button>

<script>



submitNum.addEventListener("click", function(){

var inputNum = document.getElementById("inputNum");
var submitNum = document.getElementById("submitNum");



var phoneNumber = inputNum.value;


fetch(" https://*******************.com/" 
+ phoneNumber).then((resp)=>{
console.log(resp);
});
});

Answer 1

Twilio developer evangelist here.

To allow your user to enter the message too, you need to add an extra field to your HTML form and then add that field to the API request too. I would also suggest not adding the phone number to the path of the URL, but to query parameters instead. So, taking your HTML first, I'd change it to this:

<input type="text" placeholder="Enter your number" id="inputNum" />
<textarea name="inputMessage" id="inputMessage"></textarea>

<button id="submitNum">Enter</button>

<script>
var inputNum = document.getElementById("inputNum");
var inputMessage = document.getElementById("inputMessage");
var submitNum = document.getElementById("submitNum");

submitNum.addEventListener("click", function(){
  var phoneNumber = inputNum.value;
  var message = inputMessage.value;

  var query = "phoneNumnber=" + encodeURIComponent(phoneNumber);
  query += "&message=" + encodeURIComponent(message);
  fetch(" https://*******************.com/sendMessage?" + query).then((resp)=>{
    console.log(resp);
  });
});
</script>

Then, you'll need to update your server to use the message variable and the sendMessage endpoint. I also suggest you send a response back, so that your front end isn't left hanging. Like this:

app.get("/sendMessage", function(req, resp){
  var accountSid = '*******************'
  var authToken = '*********************'

  const client = require('twilio')(accountSid, authToken);

  client.messages.create({
    to: req.params.data,
    from: '**********',
    body: req.params.message
  }, function(err, message) {
    if(err) {
      console.log(err);
      resp.setStatus(200).send();
    } else {
      console.log(message.sid);
      resp.setStatus(500).send();
    }
  });
});

Let me know if that helps at all.