Get a value from a JS script and pass it to a HTML Form

Question

I don`t find out how to get the value from the js script input ( phone number that user input , and the country prefix code that the script auto put )

  <script src="{% static 'assets/js/intlTelInput.js' %}"></script>
  <script>
    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
      initialCountry: "gb",
    });
  </script>

and have it saved thru my HTML form under this:

  <input type="tel" name="phone-number" class="form-control input-style" placeholder="your phone">
  <input type="tel" id="phone">

Full code :

<form class="submit-form" method="post" action="{% url 'register' %}" enctype="application/json">
  {% csrf_token %}

<div class="div-block">
<div class="double-fields-step-2-only">
<div class="form-group">
<div class="form-group right">
  <input type="tel" name="phone-number" class="form-control input-style" placeholder="your phone">
  <input type="tel" id="phone">

  <script src="{% static 'assets/js/intlTelInput.js' %}"></script>
  <script>
    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
      initialCountry: "gb",
    });
  </script>
  <div class="icon"></div>
  </div>
</div>
<button type="submit" class="btn btn-register" data-title="Loading...">
Register
</button>
</form></div>
</form>

Hi! Just to be clear: you want to get the input value from a field with JS? — Nagy Szabolcs
– Nagy Szabolcs, Commented Jul 24, 2021 at 22:07
Yes. And to go in my form, when someone click the Register button, the value from the JS field to go into <input type="tel" name="phone-number" HTML input, that way i can use it in my view with the lead.phone = request.POST['phone-number'] lead.save() — NbaRo
– NbaRo, Commented Jul 25, 2021 at 6:56

itsmehemant7 · Accepted Answer · 2021-07-25 11:19:34Z

1

As I can understand, your js file has a phone number and you want it to be in your input field. If so, then you can do something like this:

#Step 1: Store the phone number value in a variable (e.g: var mobile='myNumber';)

#Step 2: Now you can use this variable inside the DOM anywhere.

<form id='myform' method="post" action="action/">
  <!--your fields here-->
</form>
<script>
 document.getElementById('myform').innerHTML+=`
  <input type="text" id="myid" name="mobile" value="${mobile}">
 `
</script>

Tip: you can also use type="hidden" for hiding this field from users.

Here is a working example: https://www.w3schools.com/code/tryit.asp?filename=GSTEVYR70G0L

answered Jul 25, 2021 at 11:19

itsmehemant7

3431 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nagy Szabolcs · Accepted Answer · 2021-07-25 19:13:06Z

1

Well, in case of misunderstanding, here is an example for both SET and GET values in jQuery.

<form id="form1">
  <input id="phone_number" type="text">
</form>

<script>

  var phoneNumber = "123456789"; //this is your pre-defined variable
  
  $(document).ready(function(){
    //if you want to SET an input field value, you can do as the following
    $("#phone_number").val(phoneNumber);
    
    //if you want to GET an input field value, you can do as the following
    var input_phoneNumber = $("#phone_number").val();

    //if you want it to happen on Register button click, do this:
    $(".btn-register").click(function(){
       $("input[type='tel']").val(phoneNumber)
    })
  })

</script>

answered Jul 25, 2021 at 19:13

Nagy Szabolcs

2421 silver badge10 bronze badges

Collectives™ on Stack Overflow

Get a value from a JS script and pass it to a HTML Form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related