PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 9, 2022

[FIXED] How can I compile the country code through intl-tel-input along with the number during submission?

 November 09, 2022     css, html, javascript, jquery     No comments   

Issue

I use a field for obtaining phone numbers, now I added a field to show the country codes through intl-tel-input through code mentioned below. However, when I attempt to submit the form, the code is not attached, and only the numbers are sent. I'm not versed with JS syntax, however understood it enough through YouTube videos to have it functional. It is using the backend of Google forms (not the best way but serves the purpose). How can I add the country code along with the WhatsApp number (#whatsappno) in the code. I believe the change needed would be around var field3 = $("#whatsappno").val(); to replace #whatsappno (example: country code: +1, number: 9998886664 —> +19998886664) through the form when I receive it.

Edit to avoid duplication: I am also unsure which variables have I to use to concatenate.

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>


<form>
 <div>
  <p class="required-form">*</p>
   <fieldset>
     <input type="tel" name="blah" id="whatsappno" placeholder="Whatsapp number" required/>
   </fieldset>
 </div>
 <div>
  <fieldset>
    <button type="submit" id="contact">Submit Application</button>
  </fieldset>
</div>

</form>

<script>
   const phoneInputField = document.querySelector("#whatsappno");
   const phoneInput = window.intlTelInput(phoneInputField, {
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
   });
 function postToGoogle() {
                
 var field3 = $("#whatsappno").val();
        
$.ajax({
 url: "https://docs.google.com/forms/d/e/…….?”,
 data: {“val.123456789”: field3 },
 type: "POST",
 dataType: "xml",
 success: function (d) {
 },
 error: function (x, y, z) {
     $('#success-msg').show();
     $('#contact').hide();

     }
     });
     return false;
     }
</script>

</html>

Solution

If you want to combine the value of 2 inputs, you can do so with the following:

let input1 = document.getElementByID("input1").value; //123
let input2 = document.getElementByID("input2").value; //456
let total = input1 + input2;

console.log(total) //Returns "123456"

At the top of your JavaScript code, add the following line:

var total;

Then, whenever you want to calculate the inputs, just do:

total = input1 + input2; //WITHOUT THE VAR

Now the variable total is in global scope, you will be able to access it anywhere in your program.

If you wanted to do this using the same library, take a look at this method that it provides:

var number = iti.getNumber(); //Returns +1222333444

You can also see more info about it here.



Answered By - Anye
Answer Checked By - David Goodson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing