remote form

Remote-Form

Eine Funktion, die das Senden von Formularen über AJAX ermöglicht.

Die Funktion stellt mithilfe von window.fetch eine Anfrage basierend auf dem Formular, wobei die Nutzdaten als URL-Parameter codiert werden, wenn die Formularmethode ein GET ist, und FormData für alle anderen Methoden.

Das Anforderungsobjekt ist in der Rückruffunktion verfügbar, sodass die Header und der Hauptteil geändert werden können, bevor die Anforderung gesendet wird.

Installation

 $ npm install --save @github/remote-form

Verwendung

 import { remoteForm } from '@github/remote-form'

// Make all forms that have the `data-remote` attribute a remote form.
remoteForm ( 'form[data-remote]' , async function ( form , wants , request ) {
  // Before we start the request
  form . classList . remove ( 'has-error' )
  form . classList . add ( 'is-loading' )

  let response
  try {
    response = await wants . html ( )
  } catch ( error ) {
    // If the request errored, we'll set the error state and return.
    form . classList . remove ( 'is-loading' )
    form . classList . add ( 'has-error' )
    return
  }

  // If the request succeeded we can do something with the results.
  form . classList . remove ( 'is-loading' )
  form . querySelector ( '.results' ) . innerHTML = response . html
} ) 

 < form action =" /signup " method =" post " data-remote >
  < label for =" username " > Username </ label >
  < input id =" username " type =" text " >

  < label for =" password " > Username </ label >
  < input id =" password " type =" password " >

  < button type =" submit " > Log in </ button >
  < div class =" results " > </ div >
</ form > 

Browserunterstützung

Browser ohne native Unterstützung für benutzerdefinierte Elemente erfordern eine Polyfüllung.

• Chrom
• Firefox
• Safari
• Microsoft Edge

Entwicklung

 npm install
npm test

Lizenz

Wird unter der MIT-Lizenz vertrieben. Einzelheiten finden Sie unter LIZENZ.