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

Question

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>

What exactly is your question? Do you want to combine the values of 2 inputs? — Halo, Nov 07 '22 at 17:01
In essence yes, I want to combine the two inputs, but first one is defined using `const`, and the variable later is defined using `var field3 = $("#whatsappno").val();` I just want to replace that `#whatsappno` with the **country code and whatsapp number. (+1 and 9998886664 —> +19998886664** Thing is I don't know what is the first variable, and if it's defined by definition, since whoever made this code, must've naturally thought that it would be combined(my logic) and I've seen examples of that online(to substantiate that). Something about the const `phoneInput` made me feel it's combined. — nlpat016, Nov 07 '22 at 17:09
Does this answer your question? [How to concatenation two strings in jQuery](https://stackoverflow.com/questions/51861223/how-to-concatenation-two-strings-in-jquery) — Heretic Monkey, Nov 07 '22 at 17:47
No, I also need to figure out which variables to concatenate, that would be a general question, also there's some other issue which I couldn't figure out. Anye here helped me out. I appreciate their help. Had the discussion on a chat, so will mark it once added to this thread. — nlpat016, Nov 07 '22 at 18:39

Halo · Accepted Answer · 2022-11-07T21:38:07.037

1

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.

edited Nov 07 '22 at 21:38

answered Nov 07 '22 at 17:03

Halo

1,730
1
8
31

How do I refer to the `total` here at a later instance? Suppose I want to refer to `total` through `var` since my code defines it in such a way to use at a later instance, how do I do that? Eg, My goal is to define **field3** here `var field3 = $("#whatsappno").val();`. `field3` is the +19998886664 in essence (combined). I understood your `let` part, but how can I refer to that later again using `var`, what is the syntax? Apologies for the utter noob question again. – nlpat016 Nov 07 '22 at 17:21
1

@nlpat016, I just edited my answer to respond to this comment – Halo Nov 07 '22 at 17:34
Also I just realised, the initial variable is defined using `const`, I can't define it using `let` later, can I? – nlpat016 Nov 07 '22 at 17:38
1

You can only define a variable once. After that, you can just read or set it. – Halo Nov 07 '22 at 17:39
1

But the thing with `const` is that it will always be the same, you will never be able to change/set it – Halo Nov 07 '22 at 17:40
@nlpat016, did that answer your question? – Halo Nov 07 '22 at 17:49
The pre-defined code had the input `input1` defined as a `const`. (Also, what is input1 in the code above?). I tried it in [this way](https://imgur.com/a/pP5i8A9), but it is received as a blank value. Where am I going wrong? – nlpat016 Nov 07 '22 at 18:04
@nlpat016, `input1` is the country code, and `input2` is the rest of the phone number – Halo Nov 07 '22 at 18:09
But what is the variable to the country code? Is it `phoneInputField` or `phoneInput`? I tried both ways, but neither worked. I don't know where I'm going wrong here. – nlpat016 Nov 07 '22 at 18:10
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249404/discussion-between-anye-and-nlpat016). – Halo Nov 07 '22 at 18:11

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

1 Answers1