0

I am building my web app with ReactJS and I want to implement subscription page. I've got a simple form with 1 input for email, 1 select of a country and a submit button as an input as well.

I used axios for the connection between js and php. On all of my PCs and Laptops, the form works just fine, like I expected. Android phones surprisingly as well. The form goes through and the data are uploaded into my MySQL database.

The only problem is with browsers on iPhones & Safari on MacOS. Form goes through without an error, but nothing gets to the DB. I've always been struggling with inputs on iOS and MacOS(Safari) devices, as Apple tends to change styling and base functions for some javascript/jQuery state changes, etc.

React code:

const [email, getEmail]      = useState("");
    const [country, getCountry]  = useState("");
    

    function isValidEmail(email) {
        return /\S+@\S+\.\S+/.test(email);
    }

    const validate = () => {
        if (isValidEmail(email) & country !== 'default') {
            return email.length & country.length;
        }
    };

    const handleSubmit = () => {
        const url = "URL_TO_PHP_script";

        let fData = new FormData();
        fData.append('email', email);
        fData.append('country', country);

        axios.post(url, fData)
        .then(
            response => alert(response.data)
        )
        .catch(
            error => console.log(error)
        );
    }

    return (
        <>
            <form>
                <input
                    className='-text-center'
                    type="email"
                    placeholder="your email"
                    value={email}
                    onChange={e=>getEmail(e.target.value)}
                />
                {email.touched && email.error && <span>{email.error}</span>}

                <select 
                    className='-text-center'
                    value={country}
                    onChange={e=>getCountry(e.target.value)}
                >
                    <option value='default'>select your country</option>

                    {countrySelect.map(country => (
                        <option
                            key={country.id}
                            id={country.id}
                            value={country.origin}
                        >
                            {country.origin}
                        </option>
                    ))};
                </select>

                <input
                    className='-text-center'
                    type="submit"
                    value='Subscribe'
                    onClick={handleSubmit}
                    id="submit-sub"
                    disabled={!validate()}
                />
            </form>
        </>
    )
husslephil
  • 3
  • 4

1 Answers1

0

As usual for me, the issue was the smallest thing that I didn't even consider. :-)

I simply added the "preventDefault()" Event Method for my submit Handle:

const handleSubmit = (event) => {
    event.preventDefault();
  and so on...

Now both iPhone browsers and MacOS Safari send the POST to php and then the INSERT into MySQL db successfully goes through.

husslephil
  • 3
  • 4