When I'm sending the data with my code the inputs fields (utm_source, utm_medium and utm_campaign) are empty, but the email input is working, I don't really know what I'm doing wrong in my code.
Note: The connection to sending the data is working properly, the problem seems to be in the React code, that is sending empty values of utm_source, utm_medium and utm_campaign.
Code:
import { useRef, useEffect, useState } from "react"
export default function Testing_Form() {
const [utmSource, setUtmSource] = useState("")
const [utmMedium, setUtmMedium] = useState("")
const [utmCampaign, setUtmCampaign] = useState("")
const [defaultEmail, setDefaultEmail] = useState("")
const [formSubmitted, setFormSubmitted] = useState(false)
const btnRef = useRef(null)
const submitForm = () => {
console.log("Submited!")
}
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search)
const utmSrc = urlParams.get("utm_source")
const utmMdn = urlParams.get("utm_medium")
const utmCg = urlParams.get("utm_campaign")
console.log("utmSrc:", utmSrc)
console.log("utmMdn:", utmMdn)
console.log("utmCg:", utmCg)
if (utmSrc && utmMdn && utmCg && !formSubmitted) {
setFormSubmitted(true)
setUtmSource(utmSrc)
setUtmMedium(utmMdn)
setUtmCampaign(utmCg)
setDefaultEmail("test@gmail.com")
}
}, [])
return (
<>
{console.log(utmCampaign)}
{console.log(defaultEmail)}
<div>
<form name="formData" id="formData">
<label style= htmlFor="utm_source">
Source
</label>
<input
style=
type="text"
id="utm_source"
name="utm_source"
value={utmSource}
required
/>
<br />
<label style= htmlFor="utm_medium">
Medium
</label>
<input
style=
type="text"
id="utm_medium"
name="utm_medium"
value={utmMedium}
required
/>
<br />
<label style= htmlFor="utm_campaign">
Campaign
</label>
<input
style=
type="text"
id="utm_campaign"
name="utm_campaign"
value={utmCampaign}
required
/>
<br />
<label style= htmlFor="email">
Email
</label>
<input
style=
type="email"
id="email"
name="email"
value={defaultEmail}
required
/>
<input
id="btnSubmit"
type="submit"
value="Thanks for visiting us!"
ref={btnRef}
onClick={submitForm}
/>
</form>
</div>
</>
)
}
I tried the .submit() alternative and produces an infinite loop. The only approach that makes the code works is simulate a click to the input of type 'submit' to send the data, but still sending only the email input field.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/1rvRLgp
Comments
Post a Comment