Comment soumettre un formulaire dans l'interface utilisateur sémantique?

Je sais comment valider un formulaire à l'aide de Sémantique de l'INTERFACE utilisateuret peut même lire dans la console le message "la Forme n'a pas d'erreurs de validation, la soumission." Cependant, où est-ce que la soumission? J'ai vraiment envie de soumettre le formulaire, mais la façon dont la Sémantique de l'INTERFACE utilisateur est mis je ne semble pas être en mesure de préciser l'endroit où déposer ou quoi que ce soit.

J'ai lu ce tutorielmais qui utilise Angulaire pour la présentation et pas seulement Sémantique de l'INTERFACE utilisateur.

Ai-je raté quelque chose de vraiment simple ici?

source d'informationauteur Jon Carl

22

Vous pouvez utiliser du jQuery ajax:
```
   //Get value from an input field
   function getFieldValue(fieldId) { 
      //'get field' is part of Semantics form behavior API
      return $('.ui.form').form('get field', fieldId).val();
   }

   function submitForm() {
      var formData = {
          field1: getFieldValue('someId')
      };

      $.ajax({ type: 'POST', url: '/api/someRestEndpoint', data: formData, success: onFormSubmitted });
   }

   //Handle post response
   function onFormSubmitted(response) {
        //Do something with response ...
   }
```
EDIT: vous pouvez aussi utiliser le onSuccess méthode de la forme pour exécuter le submitForm fonction, c'est à dire lors de l'initialisation de la forme:
```
$('.ui.form').form(validationRules, { onSuccess: submitForm });
```
onSuccess ne sera appelée lorsque le bouton "Soumettre" est cliqué et que le formulaire est valide selon les règles que vous avez définies.

EDIT: Si vous voulez que le HTML ordinaire comportement du formulaire, vous aurez besoin d'ajouter de la sémantique des classes css pour les form tag.
```
<form class="ui form" method="POST" action="/signup">...</form>
```
Et puis vous configurez les règles de validation à l'aide de jQuery. Cela vous donnera la valeur par défaut du formulaire HTML de comportement, c'est à dire lorsque vous cliquez sur le bouton envoyer, il faudra faire une requête POST /signup dans le cas ci-dessus. Si l'un de vos règles de déclenchement, la soumission est empêché jusqu'à ce qu'il n'y a pas d'erreurs de validation.

utiliser l'original bouton soumettre, mais ajouter de la sémantique bouton de style:

<input type="submit" value="Submit" class="ui button" />
<input type="submit" value="Submit" class="ui teal button big"/>

Sémantique de l'INTERFACE utilisateur a sa propre API pour soumettre le formulaire. par exemple:

$('.ui.form .submit.button')
.api({
    url: 'server.php',
    method : 'POST',
    serializeForm: true,
    beforeSend: function(settings) {
    },
    onSuccess: function(data) {
    }
});

Le plus simple est de modernisation d'un standard de formulaire HTML, utilisez le code ci-dessous.

Commencer avec une base standard de travail de formulaire HTML avec un bouton de soumission et de vos valeurs et de les afficher sur votre formulaire de destination, de retour de la sortie ci-dessous votre formulaire bouton "soumettre".

Ses un bon moment pour vérifier que vous êtes correctement en les reliant à jquery, sémantique, javascript et css sémantique à ce point.
Ajouter class="ui" formulaire à votre balise de formulaire .
Ajouter le code javascript ci-dessous.

$(document).ready(function() {

//validation 
 $('.ui.form').form({
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter an email'
        }
      ]
    }
},
{
    inline: true,
    on: 'blur',
    transition: 'fade down', 
    onSuccess: validationpassed
});

//called if correct data added to form 
function validationpassed() {

    //Multiple instances may have been bound to the form, only submit one.
    //This is a workaround and not ideal. 
    //Improvements welcomed. 

    if (window.lock != "locked") { 
        var myform = $('.ui.form');
        $.ajax({
            type: myform.attr('method'),
            url: myform.attr('action'),
            data: myform.serialize(),
            success: function (data) {
                //if successful at posting the form via ajax.
                myformposted(data);
                window.lock = "";
            }
        });
    } 
    window.lock = "locked";
}

//stop the form from submitting normally 
$('.ui.form').submit(function(e){ 
    //e.preventDefault(); usually use this, but below works best here.
    return false;
});




function myformposted(data) { 
    //clear your form and do whatever you want here 
    $('.ui.form').find("input[type=text], textarea").val("");
    //$('.ui.submit.button').after("<div>Message sent. Thank you.</div>");
    $('.ui.submit.button').after(data);
} 

});

Forme de base:

    <form action="process.php" method="post" class="ui form">
    <div class="field">
    <label>title</label>
        <input name="email" type="text">
    </div> 
    <input type="submit" class="ui button"/>
    </form>

Si vous souhaitez que le message d'erreur à afficher dans une boîte plutôt que dans la forme elle-même de les inclure dans votre formulaire, et de supprimer les mots "en ligne: true," et Sémantique de l'INTERFACE utilisateur fait le reste:

<div class="ui info message"></div>

REMARQUE: l'Utilisation de balises de formulaire avec la Sémantique de l'INTERFACE utilisateur n'est pas strictement nécessaire que vous ne vraiment besoin d'un div avec les classes "ui", cependant cette rénovation de code nécessite une balise de formulaire.

4

Que faire si vous n'avez pas wana utiliser ajax?!

Utiliser celui-ci:
```
$( "#reg_btn" ).click(function(event){
    event.preventDefault();
    $('#register_form').submit();

});
```
dans ce cas, u peut utiliser <button> tag... il n'y a pas besoin d'utiliser le tag classique au lieu
0

Sémantique de l'INTERFACE utilisateur est basée sur jQuery et CSS donc si vous souhaitez soumettre votre formulaire de données que vous avez une certaine façon de le faire:
1. Envoyer votre formulaire de données avec l'AJAX
2. Utiliser certains jqQuery plugins comme cette
3. Truc!
  
  Mettre un bouton de soumission et de régler l'affichage à aucun. Lorsqu'un utilisateur clique sur le div bouton lancer cet événement pour le bouton soumettre, de cette façon:
```
$("div_button_selector").on("click", function(){
   $("input[type='submit']").trigger('click');
});
```

Voir le post de Ajout d'erreurs à la validation du formulaire ne fonctionne pas? pour la forme et de l'erreur de validation. Depuis Sémantique de l'INTERFACE utilisateur est un outil pour l'interface utilisateur, c'est le php pour "auto soumettant /même page de code" email de contact. Depuis la fin de la Sémantique de l'INTERFACE utilisateur n'est pas logique de traitement, dans quelle langue et ou la méthode que vous souhaitez utiliser pour l'envoi du formulaire? JS/jquery côté client ou server-side php, rails, etc.? Gardez à l'esprit Sémantique de l'INTERFACE utilisateur dépend de jquery.

<?php    
if (isset($_POST["email"]))
{
    if ($_POST["email"] != "")
    {
        $from = htmlentities($_POST["email"]); 
        $subject = htmlentities($_POST["subject"]);
        $message = htmlentities($_POST["message"]);
        $message = wordwrap($message, 70);
        mail("valid-server-email-username@valid-server-address", $subject, $message, "From: $from\n");
        $_POST["email"] = "";
        $_POST["subject"] = "";
        $_POST["message"] = "";
        unset($GLOBALS['email']);
        header("location: /");
    }
}

Vous devez vous connecter pour publier un commentaire.