I can't seem to figure this out.
I have a modal keypad that will submit to a php form that will send an EMAIL sms with information regarding the website.
I want people to be able to click on the keypad to insert value's into the text field area. Similar to like using a phone.
My HTML:
<script src="http://www.busetopizza.com/demo/phone.js" type="text/javascript"></script>
<!-- Send To Phone -->
<form action="phpmailer.php" method="post" name="theform">
<input type="hidden" name="redirect" value="message_success.php">
<div class="send-to-phone-wrapper">
<div class="send-to-phone">
<div class="phone-top">
<input type="text" id="phone" name="10digit" class="phone-enter-number" placeholder="Mobile Number"></div>
<div class="buttons-wrapper">
<div class="phone-button"><a href="#?stockAlert=1" class="coupon_link"><p>1<br /><span></span></p></a></div>
<div class="phone-button"><a href="#?stockAlert=2" class="coupon_link"><p>2<br /><span>ABC</span></p></a></div>
<div class="phone-button"><a href="#"><p>3<br /><span>DEF</span></p></a></div>
<div class="phone-button"><a href="#"><p>4<br /><span>GHI</span></p></a></div>
<div class="phone-button"><a href="#"><p>5<br /><span>JKL</span></p></a></div>
<div class="phone-button"><a href="#"><p>6<br /><span>MNO</span></p></a></div>
<div class="phone-button"><a href="#"><p>7<br /><span>PQR</span></p></a></div>
<div class="phone-button"><a href="#"><p>8<br /><span>STU</span></p></a></div>
<div class="phone-button"><a href="#"><p>9<br /><span>VXZ</span></p></a></div>
<div class="phone-button-fix"><div class="phone-star"></div></div>
<div class="phone-button"><a href="#"><p>0<br /><span style="font-size:23px; font-weight:100;">+</span></p></a></div>
<div class="phone-button-fix"><div class="phone-pound"></div></div>
</div>
<div class="choose-carrier-wrapper">
<div class="choose-carrier">
<select name="carrier" class="choose-carrier-selections">
<option value="none" class="choose-styled"></option>
<option value="att" class="choose-styled">AT&T</option>
<option value="alltel" class="choose-styled">Alltel</option>
<option value="cingular" class="choose-styled">Cingular</option>
<option value="nextel" class="choose-styled">Nextel</option>
<option value="sprint" class="choose-styled">Sprint</option>
<option value="suncom" class="choose-styled">SunCom</option>
<option value="tmobile" class="choose-styled">T-mobile</option>
<option value="voicestream" class="choose-styled">VoiceStream</option>
<option value="verizon" class="choose-styled">Verizon</option>
</select>
</div>
<div class="phone-submit"><input type="submit" value="" name="submit" class="submit-phone"></div>
</div>
</div>
</div>
</form>
<!-- End Send To Phone -->
My CSS:
/* Send To Phone
---------------------------------------------------------------------------------*/
.send-to-phone-wrapper {
width:319px;
margin:0 auto;
}
.send-to-phone {
width:322px;
padding:15px;
background-color:#000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 10px 30px #000;
-webkit-box-shadow: 0px 10px 30px #000;
-moz-box-shadow: 0px 10px 30px #000;
}
.phone-top {
}
.buttons-wrapper {
width:321px;
height:268px;
background-color:#fff;
border-right:1px solid #2d3136;
}
.phone-button {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
}
.phone-button-fix {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button p {
color:#FFF;
font-size:30px;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:23px;
}
.phone-button p span {
color:#878b90;
font-size:14px;
text-shadow:0px -1px 0px #000;
}
.phone-button a:link, .phone-button a:visited {
text-decoration:none;
display:block;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button a:hover {
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad2.gif) repeat-x;
text-decoration:none;
}
.phone-button a:active {
background-image:none;
background-color:#3559c3;
}
.phone-button a:hover span {color:#9ac2fa;}
.phone-button a:active p {text-shadow:0px 0px 5px #000;}
.phone-star {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-star.gif) no-repeat;
position:absolute;
top:15px;
left:39px;
}
.phone-pound {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-pound.gif) no-repeat;
position:absolute;
top:15px;
left:40px;
}
.phone-enter-number {
border:none;
text-align:center;
font-size:35px;
font-weight:bold;
text-shadow:0px 2px 0px #fff;
font-family:Arial, Helvetica, sans-serif;
height:73px;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-top.gif) repeat-x;
}
.choose-carrier-wrapper {
height:64px;
position:relative;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-choose.gif) repeat-x;
}
.choose-carrier {
width:215px;
overflow:hidden;
}
.choose-carrier-selections {
background:url(http://www.busetopizza.com/demo/sendtophone/phone-carrier.gif) repeat-x;
border:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
position:absolute;
top:0;
left:0;
width:230px;
height:63px;
padding-top:42px;
padding-left:27px;
cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size:14px;
font-weight:bold;
background-color:#000;
color:#fff;
}
.choose-styled {
}
.submit-phone {
height:64px;
width:107px;
background:url(http://www.busetopizza.com/demo/sendtophone/send.gif) repeat-x;
border:none;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
I created a jfiddle http://jsfiddle.net/muhupower/nkmXe/1/
I have tried many time with random online scripts. I am able to get the value inputting into the form from a link but all the scripts then replace the form with the other value I hit. So if I type 516 my end result is 6.. I need it to continue to populate the form.
Any help?
Here is the code to place the numbers inside the input:
var i = 0;
var num = [];
$(".buttons-wrapper a").click(function(e) {
e.preventDefault();
if($(this).attr("href") == "clear") {
num = [];
$("#phone").val(num);
i=0;
}
else if($(this).attr("href") == "delete") {
i--;
var str = $("#phone").val();
console.log(str);
if(num.length == 3) {
str = str.substring(0, str.length-3).substring(1, str.length);
}
else if(num.length == 6) {
str = str.substring(0, str.length-2);
}
else {
str = str.substring(0, str.length-1);
}
$("#phone").val(str);
num.splice(i, 1);
}
else {
if(num.length <= 9) {
num[i] = $(this).attr("href");
if(num.length == 3) {
$("#phone").val("("+$("#phone").val()+num[i]+")-");
}
else if(num.length == 6) {
$("#phone").val($("#phone").val()+num[i]+"-");
}
else {
$("#phone").val($("#phone").val()+num[i]);
}
i++;
}
}
});
And a fiddle demonstrating it: http://jsfiddle.net/nkmXe/11/