PHP submit button not submitting
Question
I have a formpage which is supposed to submit the form data to an ajaxrequest. this has worked continuously but suddenly stopped working. it doesn't write error messages to the log it just does nothing.
image of the page that houses the button: submission page in dutch I have tried to look at what changes i made to the file and the only thing that i changed was a; which i returned to it's original position here is the code that contains the button:
<Formik
initialValues={getInitialFormData()}
onSubmit={onFormSubmit}
validationSchema={FormSchema}
render={({ values, errors }) => (
<Form>
<FormFieldsWrapper disabled={fieldsDisabled}>
<Section>
<SectionHeading>
Basis informatie
</SectionHeading>
<FieldsRow>
<FieldsColumn size='half'>
<Field
name='name'
label='Schoolnaam'
placeholder='Vul schoolnaam in'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='half'>
<Field
name='address'
label='Schooladres'
placeholder='Vul schooladres in'
component={FormTextField}
/>
</FieldsColumn>
</FieldsRow>
<FieldsRow>
<FieldsColumn size='third'>
<Field
name='region'
label='Region'
placeholder='Selecteer regio'
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={regionOptions}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name='contact_name'
label='Contactpersoon'
placeholder='Vul contactnaam in'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name='contact_email'
label='e-mailadres'
placeholder='Vul contact e-mailadres in'
component={FormTextField}
/>
</FieldsColumn>
</FieldsRow>
</Section>
<Section>
<SectionHeading noMarginBottom>
Groep
</SectionHeading>
<FieldArray
name='classes'
render={arrayHelpers => (
<>
{values.classes.map((item, index) => {
const productionId = get(values, `classes[${index}].production_id`);
return (
<FieldsArrayWrapper key={index}>
<ReactTooltip />
{!fieldsDisabled && (
<RemoveRowButton
onClick={() => {
if(confirm('Dient deze groep verwijdert te worden?')) {
arrayHelpers.remove(index)
}
}}
>
×
</RemoveRowButton>
)}
<FieldsRow>
<FieldsColumn size='third'>
<Field
name={`classes[${index}].level`}
label={(
<span data-tip='Vul hier aub per groep het juiste leerlingaantal in. Combinatiegroepen dienen per unieke groep te worden ingevoerd.'>
Groep
<QuestionMarkIcon>
?
</QuestionMarkIcon>
</span>
)}
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={[
{ value: '1', text: 'Groep 1/2' },
{ value: '2', text: 'Groep 3' },
{ value: '3', text: 'Groep 4' },
{ value: '4', text: 'Groep 5' },
{ value: '5' , text: 'Groep 6' },
{ value: '6' , text: 'Groep 7' },
{ value: '7' , text: 'Groep 8' },
]}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name={`classes[${index}].students_count`}
label='Aantal leerlingen'
placeholder='Vul aantal leerlingen in'
type='number'
min='1'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='third'>
{(
!Boolean(loginCode) ||
(
Boolean(loginCode) &&
productionId !== '' &&
productionId !== '0' &&
productionId !== undefined
)
) && (
<Field
name={`classes[${index}].production_id`}
label='Productie'
placeholder='Kies de productie'
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={productionOptions}
/>
)}
</FieldsColumn>
</FieldsRow>
{Boolean(loginCode) && (
<>
<EventInfoHeading>
Voorstelling informatie
</EventInfoHeading>
<FieldsRow>
<FieldsColumn size='half'>
<Field
name={`classes[${index}].event_display_date`}
label='Datum en tijd voorstelling'
component={FormTextField}
disabled
/>
</FieldsColumn>
<FieldsColumn size='half'>
<Field
name={`classes[${index}].event_address`}
label='Adres voorstelling'
component={FormTextField}
disabled
/>
</FieldsColumn>
</FieldsRow>
</>
)}
</FieldsArrayWrapper>
)
})}
{!fieldsDisabled && (
<Button
type="button"
addClass
onClick={() => arrayHelpers.push({
first_name: '',
last_name: '',
students_count: 1,
level: '1',
production_id: '',
event_display_date: '',
event_address: '',
})}
>
Voeg groep toe
</Button>
)}
{typeof errors.classes === 'string' && (
<FieldErrorMessage>
{errors.classes}
</FieldErrorMessage>
)}
</>
)
}
/>
</Section>
</FormFieldsWrapper>
{!loginCode && (
<Field
name='terms'
label={(
<span dangerouslySetInnerHTML={{ __html: get(__STP_DATA, 'options.terms_checkbox_text', '') }} />
)}
component={FormCheckbox}
/>
)}
{!loginCode && (
<FormButtons>
{fieldsDisabled && (
<>
<Button
cancelButton
onClick={() => {
setFieldsDisabled(false);
}}
>
Cancel
</Button>
<Button
submitButton
onClick={onConfirmClick}
>
Bevestig
</Button>
</>
)}
{!fieldsDisabled && (
<Button type="submit" submitButton>
Verzend
</Button>
)}
</FormButtons>
)}
</Form>
)}
/>
and it is a problem regarding this button specifically:
{!fieldsDisabled && (
<Button type="submit" submitButton>
Verzend
</Button>
)}
I've been pulling my hair out because i simply can't pinpoint the issue I'll also add the complete formpage code if that helps:
import React, { useState, useEffect } from 'react';
import ReactTooltip from 'react-tooltip';
import { Formik, Form, Field, FieldArray } from 'formik';
import get from 'lodash/get';
import * as Yup from 'yup';
import { ajaxRequest } from '../../../helpers';
import {
Wrapper,
BackLink,
Title,
Section,
SectionHeading,
FieldsRow,
FieldsColumn,
FormTextField,
FormTextAreaField,
FormSelectField,
Button,
RemoveRowButton,
FieldErrorMessage,
FieldsArrayWrapper,
FormFieldsWrapper,
QuestionMarkIcon,
FormButtons,
EventInfoHeading,
FormCheckbox,
} from './styled';
const FormSchema = Yup.object().shape({
name: Yup.string().required('Schoolnaam is verplicht'),
address: Yup.string().required('Schooladres is verplicht'),
region: Yup.string().required('Schoolregio is verplicht'),
contact_name: Yup.string().required('Contactnaam is verplicht'),
contact_email: Yup.string().email('contact e-mail is incorrect').required('contact e-mail is verplicht'),
classes: Yup.array().of(
Yup.object().shape({
first_name: Yup.string().required(`Voornaam leraar is verplich`),
last_name: Yup.string().required(`Achternaam leraar is verplicht`),
students_count: Yup.string().required('Aantal leerlingen is verplicht'),
level: Yup.string().required('Groepsniveau is verplicht'),
})
).required('Tenminste 1 groep dient er te worden opgegeven'),
terms: Yup.boolean().oneOf([true], 'You must accept terms and conditions'),
});
const RequestChangeFormSchema = Yup.object().shape({
message: Yup.string().required('Bericht is verplicht'),
});
const FormPage = ({ history, match: { params: { loginCode } } }) => {
const [loading, setLoading] = useState(true);
const [fieldsDisabled, setFieldsDisabled] = useState(false);
const [submittedValues, setSubmittedValues] = useState({});
const [ajaxData, setAjaxData] = useState({});
const getInitialFormData = () => {
if(loginCode && ajaxData && ajaxData.formData) {
const {
formData: {
school: {
name,
address,
region,
contact_name,
contact_email,
},
classes,
}
} = ajaxData;
return {
name,
address,
region,
contact_name,
contact_email,
classes: classes.map(({
students_count,
age_group,
production_id,
event,
}) => ({
students_count,
level: age_group,
production_id: production_id || '',
event_display_date: (event && event.formatted_datetime) ? event.formatted_datetime : 'Niet ingevuld',
event_address: event ? event.address : 'Niet ingevuld',
})),
terms: false,
}
}
return {
name: '',
address: '',
region: 'region-1',
contact_name: '',
contact_email: '',
classes: [
{
students_count: 1,
level: '1',
production_id: '',
event_display_date: '',
event_address: '',
}
],
terms: false,
};
}
const onBackButtonClick = () => {
history.push('/');
};
const onFormSubmit = (values, { setSubmitting }) => {
if(!fieldsDisabled) {
setFieldsDisabled(true);
setSubmitting(false);
setSubmittedValues(values);
}
};
const onRequestChangeSubmit = async (values, { resetForm }) => {
const success = await ajaxRequest({
action: 'stp_request_change',
data: {
message: values.message,
login_code: loginCode,
},
formatData: ({ success }) => success,
});
if(success) {
alert('Bericht is verzonden');
resetForm();
} else {
alert('Het is niet mogelijk het bericht te verzenden');
}
};
const onConfirmClick = () => {
ajaxRequest({
action: 'stp_add_school_data',
data: {
...submittedValues,
},
formatData: (data) => {
if(data && data.success && data.data && data.data.login_code) {
history.push(`/school/${data.data.login_code}`);
}
},
});
setLoading(true);
};
useEffect(() => {
const getData = async () => {
try {
const dataRequests = [
ajaxRequest({
action: 'stp_get_all_productions',
formatData: data => data,
}),
ajaxRequest({
action: 'stp_get_all_regions',
formatData: data => data,
})
]
if(loginCode) {
dataRequests.push(
ajaxRequest({
action: 'stp_get_form_data',
data: {
login_code: loginCode,
},
formatData: data => data,
})
);
}
const [
productions,
regions,
formData,
] = await Promise.all(dataRequests);
setAjaxData({
productions: productions.data,
regions: regions.data,
formData: loginCode && formData && formData.success ? formData.data : null,
});
if(loginCode) {
if(!formData || !formData.success) {
history.push(`/`);
} else {
setFieldsDisabled(true);
}
}
setLoading(false);
} catch(error) {
console.log(error);
}
}
setLoading(true);
getData();
}, [loginCode]);
if(loading) {
return <>Loading...</>;
}
if(
!ajaxData.productions ||
!ajaxData.productions.length ||
!ajaxData.regions ||
!ajaxData.regions.length
) {
return <>Er is een fout opgetreden. Neem aub contact op met de Administrator</>;
}
const productionOptions = [
{ value: '', text: 'Geen productie' },
...(ajaxData.productions.map(({
id,
name,
}) => ({
value: id,
text: name,
}))),
];
const regionOptions = [
...(ajaxData.regions.map(({
id,
name,
}) => ({
value: id,
text: name,
}))),
];
return (
<Wrapper>
<BackLink onClick={onBackButtonClick}>
< Back
</BackLink>
{!loginCode && (
<Title>
{!fieldsDisabled ? 'Vul hieronder de gegevens van uw school in.' : 'De volgende data is hieronder ingevuld. Bevestig aub dat deze data correct is'}
</Title>
)}
{loginCode && (
<Title>
Informatie van de school met code: <strong>{loginCode}</strong>
</Title>
)}
<Formik
initialValues={getInitialFormData()}
onSubmit={onFormSubmit}
validationSchema={FormSchema}
render={({ values, errors }) => (
<Form>
<FormFieldsWrapper disabled={fieldsDisabled}>
<Section>
<SectionHeading>
Basis informatie
</SectionHeading>
<FieldsRow>
<FieldsColumn size='half'>
<Field
name='name'
label='Schoolnaam'
placeholder='Vul schoolnaam in'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='half'>
<Field
name='address'
label='Schooladres'
placeholder='Vul schooladres in'
component={FormTextField}
/>
</FieldsColumn>
</FieldsRow>
<FieldsRow>
<FieldsColumn size='third'>
<Field
name='region'
label='Region'
placeholder='Selecteer regio'
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={regionOptions}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name='contact_name'
label='Contactpersoon'
placeholder='Vul contactnaam in'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name='contact_email'
label='e-mailadres'
placeholder='Vul contact e-mailadres in'
component={FormTextField}
/>
</FieldsColumn>
</FieldsRow>
</Section>
<Section>
<SectionHeading noMarginBottom>
Groep
</SectionHeading>
<FieldArray
name='classes'
render={arrayHelpers => (
<>
{values.classes.map((item, index) => {
const productionId = get(values, `classes[${index}].production_id`);
return (
<FieldsArrayWrapper key={index}>
<ReactTooltip />
{!fieldsDisabled && (
<RemoveRowButton
onClick={() => {
if(confirm('Dient deze groep verwijdert te worden?')) {
arrayHelpers.remove(index)
}
}}
>
×
</RemoveRowButton>
)}
<FieldsRow>
<FieldsColumn size='third'>
<Field
name={`classes[${index}].level`}
label={(
<span data-tip='Vul hier aub per groep het juiste leerlingaantal in. Combinatiegroepen dienen per unieke groep te worden ingevoerd.'>
Groep
<QuestionMarkIcon>
?
</QuestionMarkIcon>
</span>
)}
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={[
{ value: '1', text: 'Groep 1/2' },
{ value: '2', text: 'Groep 3' },
{ value: '3', text: 'Groep 4' },
{ value: '4', text: 'Groep 5' },
{ value: '5' , text: 'Groep 6' },
{ value: '6' , text: 'Groep 7' },
{ value: '7' , text: 'Groep 8' },
]}
/>
</FieldsColumn>
<FieldsColumn size='third'>
<Field
name={`classes[${index}].students_count`}
label='Aantal leerlingen'
placeholder='Vul aantal leerlingen in'
type='number'
min='1'
component={FormTextField}
/>
</FieldsColumn>
<FieldsColumn size='third'>
{(
!Boolean(loginCode) ||
(
Boolean(loginCode) &&
productionId !== '' &&
productionId !== '0' &&
productionId !== undefined
)
) && (
<Field
name={`classes[${index}].production_id`}
label='Productie'
placeholder='Kies de productie'
hideDropdownIcon={fieldsDisabled}
component={FormSelectField}
options={productionOptions}
/>
)}
</FieldsColumn>
</FieldsRow>
{Boolean(loginCode) && (
<>
<EventInfoHeading>
Voorstelling informatie
</EventInfoHeading>
<FieldsRow>
<FieldsColumn size='half'>
<Field
name={`classes[${index}].event_display_date`}
label='Datum en tijd voorstelling'
component={FormTextField}
disabled
/>
</FieldsColumn>
<FieldsColumn size='half'>
<Field
name={`classes[${index}].event_address`}
label='Adres voorstelling'
component={FormTextField}
disabled
/>
</FieldsColumn>
</FieldsRow>
</>
)}
</FieldsArrayWrapper>
)
})}
{!fieldsDisabled && (
<Button
type="button"
addClass
onClick={() => arrayHelpers.push({
first_name: '',
last_name: '',
students_count: 1,
level: '1',
production_id: '',
event_display_date: '',
event_address: '',
})}
>
Voeg groep toe
</Button>
)}
{typeof errors.classes === 'string' && (
<FieldErrorMessage>
{errors.classes}
</FieldErrorMessage>
)}
</>
)
}
/>
</Section>
</FormFieldsWrapper>
{!loginCode && (
<Field
name='terms'
label={(
<span dangerouslySetInnerHTML={{ __html: get(__STP_DATA, 'options.terms_checkbox_text', '') }} />
)}
component={FormCheckbox}
/>
)}
{!loginCode && (
<FormButtons>
{fieldsDisabled && (
<>
<Button
cancelButton
onClick={() => {
setFieldsDisabled(false);
}}
>
Cancel
</Button>
<Button
submitButton
onClick={onConfirmClick}
>
Bevestig
</Button>
</>
)}
{!fieldsDisabled && (
<Button type="submit" submitButton>
Verzend
</Button>
)}
</FormButtons>
)}
</Form>
)}
/>
{Boolean(loginCode) && (
<Formik
initialValues={{
message: '',
}}
validationSchema={RequestChangeFormSchema}
onSubmit={onRequestChangeSubmit}
render={({ handleSubmit, isSubmitting }) => (
<Section>
<SectionHeading hasMarginTop>
Aanvraag om gegevens te wijzigen
</SectionHeading>
<FieldsRow>
<FieldsColumn size='full'>
<Field
name='message'
label='Bericht'
placeholder='Vul hier aub de gewijzigde gegevens in'
disabled={isSubmitting}
component={FormTextAreaField}
/>
</FieldsColumn>
</FieldsRow>
<Button
type="submit"
onClick={handleSubmit}
disabled={isSubmitting}
submitButton
>
Verzend wijziging
</Button>
</Section>
)}
/>
)}
</Wrapper>
)
};
export default FormPage;
1 answers
solution1
0 ACCPTED 2021-01-30 15:33:58
I found the culprit:
first_name: Yup.string().required(`Voornaam leraar is verplich`),
last_name: Yup.string().required(`Achternaam leraar is verplicht`),
this checked for 2 fields which no longer existed. i had removed this part before i rolled back but didn't commit it due to errors. Removed this part and it worked!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Disable submit button after submitting and handling PHP code (Submit with AJAX?)
Submit button not submitting
submitting form to PHP page without reloading using the submit button
PHP post submit not submitting
submit button outside form is not submitting
Enabling a submit button after submitting
PHP loop with html forms and javascript submit button only submitting last form in loop
Submitting data without clicking a submit button
Form not submitting after disabling submit button
<button type=“submit”> with onclick submitting twice?
Related Tags