AJAX 양식 제출을 어떻게 구현할 수 있습니까?

내 임무는 AJAX를 통해 연락 양식을 제출 한 다음 " 제출해 주셔서 감사합니다!"를 표시하는 것입니다. 양식이 있던 곳에로드 된 메시지입니다. 따라서 기존 문의 양식을 수정해야합니다.

D8에서 AJAX를 사용하여 양식 필드의 유효성 을 검사 하는 방법에 대한 몇 가지 예를 찾았 지만 AJAX 양식 제출 을 구현 하고 AJAX를 통해 일부 내용을로드 하는 방법에 대한 예제를 찾을 수 없습니다 .

작업을 어떻게 구현할 수 있습니까? 필요한 기능을 추가하려면 연락처 양식을 어떻게 변경해야합니까?

ajax 8 forms

— 세르게이 크라브 첸코
소스

일반적인 양식 질문이있는 사람들은 Webform 모듈 을 사용하여 원하는대로 양식을 만들고 결과를 ajax를 통해 제출 할 수 있습니다.

— Florian Müller

답변:

아약스를 양식으로 작업 할 때는 다음 사항을 명심해야합니다.

전체 양식 또는 일부만 재구성하는지 알고 트리거 요소의 #ajax 정의에 'wrapper'로 사용할 ID 속성 이 있는 div 요소로 양식을 적절히 래핑하십시오 . this ( )에 #prefix 및 #suffix 속성을 사용하십시오 . 또한 이 경우 접두사와 접미사를 렌더링 하지 않는 양식에 대한 사용자 정의 템플릿 이있는 경우 ( ) 그렇지 않으면 템플릿과 양식 테마 래퍼에 의해 두 번 렌더링됩니다. 양식 서식 파일에 실제 양식 html 요소가 포함되어 있으므로 #theme_wrappers를 빈 배열로 설정하여이를 방지 할 수 없습니다.$form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';{{ form|without('#prefix', '#suffix') }}
ajax 제출 핸들러에서 랩핑하고 다시 작성하려는 전체 양식 또는 양식의 일부를 리턴하십시오 ( return $form또는 return $form['myelement']). 폼 구조를 반환하는 대신 ajax 명령을 추가로 사용할 수 있지만 더 고급 기능입니다.
양식을 제출할 때까지 모든 값을 양식 상태 저장소에 저장하십시오. 제출 핸들러 ( $form_state->set('somevalue', $form_state->getValue('somevalue')))에서 $form_state->setRebuild()이를 수행하고 최종 양식 제출을 수행하지 않는 경우 항상 호출 하십시오. 사용자 정의 제출 핸들러를 선호하지만 기본 제출 핸들러에 더 많은 논리를 갖는 것도 좋습니다.
#name제출을 수행하는 버튼에 항상 속성을 사용 하고 단일 양식 제출 핸들러 만있는 경우 양식을 제출 $for_state->getTriggeringElement()['#name']한 요소를 감지하는 데 사용 하십시오.
#ajax 정의에서 'trigger_as'를 사용하는 경우, 예를 들어 select 요소가있는 양식을 제출하려는 경우 단추에서와 동일한 #ajax 정의를 항상 사용하십시오. 내 경험상 그것은 문서에 명시되어 있지 않지만 필요합니다.
를 사용 #limit_validation_errors하면 때로는 매우 까다로워지고 양식이 작동하지 않는 이유를 파악하는 데 꽤 오랜 시간이 걸릴 수 있으므로 신중하게 사용하십시오 (실제로 재구성하는 요소에서만 양식 오류를 격리하는 것이 좋습니다. 양식의 다른 부분에는 영향을 미치지 않습니다).
항상 버튼을 사용하여 양식을 제출하고 트리거 요소 선택과 같이 멋진 것을 원한다면 #ajax 구성의 'trigger_as'옵션을 사용하고 좋은 UI를 위해 'js-hide'클래스로 실제 버튼을 숨기십시오.
양식 정의에서 양식 상태의 스토리지에서 기본값을 가져 오거나없는 경우 스토리지에 기본값을 지정하십시오. 그렇지 않으면 양식이 제대로 작동하지 않습니다.
외부에 액세스 할 수없는 $ this 또는 다른 것을 사용하지 마십시오. 그렇지 않으면 ajax가 손상됩니다. 항상 정적 아약스 핸들러를 사용하십시오.
마지막으로 양식을 제출할 때 ajax에 대한 사용자 정의 양식 제출 핸들러가 없다는 사실에 따라을 호출하여 양식 재 빌드를 사용 안함으로 설정하십시오 $form_state->setRebuild(FALSE).
ajax submit 요소 ( $element['#ajax']['callback'] = '::ajaxFormRebuild';및 $element['#submit'] = [['::ajaxFormSubmitHandler'];) 에서 :: 속기 호출을 사용할 수 있습니다 .
ajax 콜백은 순전히 재구성 된 폼 또는 ajax 명령을 반환합니다. 변경된 폼을 반환하지 마십시오 (즉,이 콜백에서 폼 배열을 변경하지 마십시오).

drupal 8에서 아약스에 문제가 있다면 훌륭한 체크리스트! (아약스 랩 div를 렌더링하지 않는 이유는 무엇입니까?)

— 4k4

정확히 기억하지는 않지만 #theme, #theme_wrappers 및 렌더러의 #prefix 및 #suffix 속성 처리와 관련이 있다고 생각합니다. <form> 요소 내부의 래퍼로 끝날 것이라고 생각합니다. 이것은 물론 일부 요소가 아닌 전체 양식을 다시 작성하는 경우에만 적용됩니다.

고맙지 만 AJAX 제출에 대한 간단한 예는 어디서 찾을 수 있습니까?

— Sergey Kravchenko

drupal.stackexchange.com/a/188227/21641

@IvanJaros, 대답을위한 thx. 아약스 제출 후 폼 값을 지우는 방법을 알고 있습니까?

— milkovsky

이 점검 목록에 추가하려면 양식 창에 양식을 표시하는 경우 오류 메시지가 표시되지 않을 수 있습니다. Ivan Jaros가 말했듯이 양식에 래퍼가 있는지 확인해야합니다.

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

또한 양식을 제출하는 요소에 다음을 추가해야합니다. 대부분의 경우 제출 버튼이됩니다.

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

— IslandDev
소스

Contact ajax 모듈을 사용합니다 . 이에 대한 자세한 내용은 (프로젝트 페이지에서) :

Contact Ajax는 Drupal 8의 Contact form에 대한 ajax 제출을 구현합니다.

작동 원리

모듈을 활성화하면 각 연락처 양식에 "Ajax 사용"확인란이 표시됩니다. 이 확인란을 선택하면 연락 양식에 다음 옵션과 함께 "확인 유형"옵션이 표시됩니다.

양식로드 : 페이지를 다시로드하지 않고 양식을 보냅니다.

사용자 정의 메시지에서로드 : 사용자 정의 텍스트를로드하십시오.

노드에서로드 : 양식 제출 후 노드를로드하십시오.

이 모듈은 다음과 같은 경우에 도움이 될 수 있습니다.

확인 메시지를 사용자 정의해야합니다

페이지를 다시로드하지 않고 문의 양식을 제출해야합니다.

양식 제출 후 사용자 정의 텍스트 또는 다른 노드를로드하려고합니다.

— 마스 젠
소스