0
150
ViewsHow to send a javascript function variable in req.body?
This is a code from Google I am trying to integrate into my code.
I have a signup page with a phone number input, I'm using a javascript plugin that converts the phone number to E.164 format: +(country code)(phone number). the user inputs the phone number and chooses the country and a function converts it to E.164 format.
<head>
<title>signup</title>
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>
</head>
<body>
<form action="signup" method="POST">
<!-- PhoneNumber -->
<div>
<input type="tel" id="phoneNumber" name="phoneNumber"/>
<input type="submit" class="btn" value="Verify" />
</div>
</form>
<div class="alert alert-info" style="display: none;"></div>
</body>
<script>
const info = document.querySelector(".alert-info");
const pNum = document.getElementById("phoneNumber")
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
pNum.value = phoneNumber
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
const phoneInputField = document.querySelector("#phoneNumber");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
I don't know where to call the "process" function to change the value of the input.
What I want is to send the phoneNumber variable in req.body when submitting the form to be able to use it with the country code.
app.post('/signup', (req, res) => {
const {phoneNumber} = req.body;
})
2 answers
Answer question0
You can add onsubmit attribute in <form> element. Example: form action="signup" onsubmit="process" method="POST">. In process function you can send your data to backend server using axios.
0
You can add onSubmit as stated previously, and useState. The useState hook is very nice for situations like this, as it has a value, and a setValue which works together, meaning you can use setValue to, obviously, set value. And then the value in the useState is automatically updated and can be sent in. This works well with onChange, as onChange can take in the value in input, and use setValue to have value to always be updated to the users input.
Like this:
const [phone, setPhone] = useState("") // in top function
function onsubmit(e) {
e.preventDefault()
const res = await fetch("/api", {
method: "post",
body: JSON.stringify({phone}),
headers: {
"Content-type":"application/json"
}
}
}
And use on input:
<input type="tel" onChange={(e)=>setPhone(e.target.value) />