Assigned form value into var in JavaScript

Question

I have a html form below:

 <label class="sr-only" for="phone">Phone Number </label> <input type="text" name="phone" placeholder="eg. 123456XXXXXXXX" class="phone form-control" id="phone"> </div> <div class="f1-buttons"> <button type="button" class="btn btn-next">Next</button> </div>

When the user fills in the form, the form value will be auto assigned in the script below:

<script>var data = "{ \"phone\":\"--this will get value from phone ID field\", \"tenantID\":\"0\" }"; .....</script>

Tried using the document.getElementById("phone").value; but it is not working. Any have suggestions how to achieve this?

 var data = "{ \\"MSISDN\\":\\"document.getElementById("phone").value\\", \\"tenantID\\":\\"0\\" }"; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener("readystatechange", function () { if (this.readyState === 4) { console.log(this.responseText); } }); xhr.open("POST", "https://api/v1/uat/user"); xhr.setRequestHeader("accept", "application/json;charset=UTF8"); xhr.setRequestHeader("content-type", "application/json"); xhr.setRequestHeader("api-key", "12345565"); xhr.setRequestHeader("cache-control", "no-cache"); xhr.send(data);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <fieldset> <h4>Please fill phone Number:</h4> <div class="form-group"> <label class="sr-only" for="phone">Phone Number (123456789xxx) </label> <input type="text" name="phone" placeholder="eg. 123456789xxx" class="MSISDN form-control" id="phone"> </div> <div class="f1-buttons"> <button type="button" class="btn btn-next">Next</button> </div> </fieldset>

I edited my question, the phone number field is to call an API response using post method in body request. What I want to do is, when user filled up the phone number will POST to the API URL to get a response if valid the response will print in the next form

Thanks

Answer 1

var data = "{ \\"MSISDN\\":\\"document.getElementById("phone").value\\", \\"tenantID\\":\\"0\\" }";

Putting some JavaScript source code inside a string literal is just going to make a string literal containing that source code and not the result of executing it.

Generating JSON by hand is a poor idea anyway. The value might contain special characters that would break it.

Create an object. Add a value to that object. Then use a library function to encode it.

var data = {
    MSISDN: document.getElementById("phone").value,
    tenantID: "0"
};
var json = JSON.stringify(data);

Answer 2

You are assigning the JSON into a variable var data = "{ \\"phone\\":\\"--this will get value from phone ID field\\", \\"tenantID\\":\\"0\\" }" . So, you can access directly to data as the following snippet shows:

 console.log(data)

 <script>var data = "{ \\"phone\\":\\"--this will get value from phone ID field\\", \\"tenantID\\":\\"0\\" }"</script>