PHP提交按钮不提交
[英]PHP submit button not submitting
问题描述
I have a formpage which is supposed to submit the form data to an ajaxrequest.
我有一个表单页面，它应该将表单数据提交给 ajax 请求。 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:我回到原来的 position 这里是包含按钮的代码：
<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 个解决方案
解决方案1
0 已采纳 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.这检查了 2 个不再存在的字段。 i had removed this part before i rolled back but didn't commit it due to errors.我在回滚之前删除了这部分，但由于错误而没有提交。 Removed this part and it worked!删除了这部分，它起作用了！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
提交和处理PHP代码后禁用提交按钮（使用AJAX提交吗？） - Disable submit button after submitting and handling PHP code (Submit with AJAX?)
提交按钮不提交 - Submit button not submitting
将表单提交到PHP页面，而无需使用Submit按钮重新加载 - submitting form to PHP page without reloading using the submit button
PHP的帖子提交不提交 - PHP post submit not submitting
表单外的提交按钮未提交 - submit button outside form is not submitting
提交后启用提交按钮 - Enabling a submit button after submitting
PHP循环使用html表单和javascript提交按钮仅在循环中提交最后一个表单 - 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”>与onclick提交两次？</button> - <button type=“submit”> with onclick submitting twice?
相关标签