Jquery Send To Phone click link to populate text field in form for keypad

Question

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&amp;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?

Answer 1

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/