Avatar of thenelson
thenelson
 asked on

help with jquery sendDigits

I have a textbox:
       <input type="text" id="tocall" value="">
and a 0-9, *, # telephone keypad on a webpage created by php.

The following code sends the digits when the keypad buttons are clicked with the mouse:
			$.each(['0','1','2','3','4','5','6','7','8','9','star','pound'], function(index, value) { 
		    	$('#button' + value).click(function(){ 
					if(connection) {
						if (value=='star')
							connection.sendDigits('*')
						else if (value=='pound')
							connection.sendDigits('#')
						else
							connection.sendDigits(value)
						return false;
					} 
					});
			});

Open in new window


I would like to add the function where I can paste numbers into the "tocall" textbox, press enter and have the digits sent consecutively by sendDigits when the call is connected:
                  Twilio.Device.connect(function (conn) {
                        $('#status').text("Successfully established call");
                        toggleCallStatus();

How can I do that?

Here is the rest of the jquery code:
		$(document).ready(function(){

			Twilio.Device.setup("<?php echo $token->generateToken(86400);?>");
			var connection=null;
			
			$("#call").click(function() {  
				params = { "tocall" : $('#tocall').val()};
				connection = Twilio.Device.connect(params);
			});
			$("#hangup").click(function() {  
				Twilio.Device.disconnectAll();
			});

			Twilio.Device.ready(function (device) {
				$('#status').text('Ready to start call');
			});

			Twilio.Device.incoming(function (conn) {
				if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){
					connection=conn;
				    conn.accept();
				}
			});

			Twilio.Device.offline(function (device) {
				$('#status').text('Offline');
			});

			Twilio.Device.error(function (error) {
				$('#status').text(error);
			});

			Twilio.Device.connect(function (conn) {
				$('#status').text("Successfully established call");
				toggleCallStatus();
			});

			Twilio.Device.disconnect(function (conn) {
				$('#status').text("Call ended");
				toggleCallStatus();
			});
			
			function toggleCallStatus(){
				$('#call').toggle();
				$('#hangup').toggle();
				$('#dialpad').toggle();
			}

			$.each(['0','1','2','3','4','5','6','7','8','9','star','pound'], function(index, value) { 
		    	$('#button' + value).click(function(){ 
					if(connection) {
						if (value=='star')
							connection.sendDigits('*')
						else if (value=='pound')
							connection.sendDigits('#')
						else
							connection.sendDigits(value)
						return false;
					} 
					});
			});

Open in new window

jQueryPHPJavaScript

Avatar of undefined
Last Comment
thenelson

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Gary

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
thenelson

ASKER
It ended up easier than you suggested:
<input type="text" id="digits" /><input type="button" value="Send Digits" id="send"/>

$("#send").click(function() {
	if (connection) {
		connection.sendDigits($('#digits').val());
	}
});

Open in new window

but you helped me get started.

Thanks!!
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes