javascript - Jquery Send To Phone click link to populate text field in form for keypad -
i can't seem figure out.
i have modal keypad submit php form send email sms information regarding website.
i want people able click on keypad insert value's text field area. similar using phone.
my html:
<script src="http://www.busetopizza.com/demo/phone.js" type="text/javascript"></script> <!-- send 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 phone --> my css:
/* send 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 jfiddle http://jsfiddle.net/muhupower/nkmxe/1/
i have tried many time random online scripts. able value inputting form link scripts replace form other value hit. if type 516 end result 6.. need continue populate form.
any help?
here code place numbers inside input:
var = 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 fiddle demonstrating it: http://jsfiddle.net/nkmxe/11/
Comments
Post a Comment