web-dev-qa-db-fra.com

Comment soumettre un formulaire dans une interface sémantique?

Je sais comment valider un formulaire à l’aide de Interface utilisateur sémantique , et peut même lire en console le message "Le formulaire n’a pas d’erreur de validation lors de la soumission". Cependant, à quoi cela est-il soumis? Je souhaite réellement soumettre le formulaire, mais la manière dont l’interface utilisateur sémantique est présentée ne semble pas pouvoir spécifier où soumettre ou quoi que ce soit. 

J'ai lu ce tutoriel , mais cela utilise Angular pour la soumission et pas seulement l'interface utilisateur sémantique.

Est-ce que je manque quelque chose de vraiment simple ici?

javascripthtmlformssemantic-ui
13
Jon Carl

Vous pouvez utiliser le fichier ajax de jQuery:

   //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 également utiliser la méthode onSuccess du formulaire pour exécuter la fonction submitForm, c'est-à-dire lorsque vous initialisez le formulaire:

$('.ui.form').form(validationRules, { onSuccess: submitForm });

onSuccess sera uniquement appelé lorsque le bouton "Soumettre" est cliqué et que le formulaire est valide en fonction des règles que vous spécifiez.

EDIT: Si vous voulez le comportement normal du formulaire HTML, vous devrez ajouter les classes css sémantiques à la balise form.

<form class="ui form" method="POST" action="/signup">...</form>

Et ensuite, vous configurez les règles de validation à l'aide de jQuery. Cela vous donnera le comportement par défaut du formulaire HTML, c'est-à-dire que lorsque vous appuierez sur le bouton d'envoi, une requête POST sera adressée à/inscription dans le cas ci-dessus. Si l'une de vos règles se déclenche, l'envoi est empêché jusqu'à ce qu'il n'y ait plus d'erreur de validation.

22
Agon Bina

utilisez le bouton de soumission d'origine mais ajoutez un style de bouton sémantique:

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

Semantic UI 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) {
    }
});
8
cuixiping

La méthode la plus simple consiste à adapter un formulaire HTML standard à l’aide du code ci-dessous. 

Commencez avec un formulaire HTML standard de travail de base avec un bouton d'envoi. Vos valeurs seront ensuite enregistrées et postées dans votre destination du formulaire, ce qui renverra la sortie sous le bouton d'envoi du formulaire. 

  1. C'est un bon moment pour vérifier que vous vous connectez avec succès à jquery, javascript sémantique et css sémantique à ce stade. 

  2. Ajoutez class = "ui form" à votre balise de formulaire. 

  3. Ajoutez le 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 basique:

    <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 s'affiche dans une zone plutôt que dans le formulaire proprement dit, incluez-le dans votre formulaire et supprimez les mots "inline: true" et l'interface utilisateur sémantique fait le reste: 

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

REMARQUE: L'utilisation des balises de formulaire avec l'interface utilisateur sémantique n'est pas strictement nécessaire, car vous n'avez besoin que d'un div avec les classes "ui form". Toutefois, ce code de modification nécessite une balise de formulaire. 

5
Digital Visual

Que faire si vous ne voulez pas utiliser ajana?!

Utilisez celui-ci:

$( "#reg_btn" ).click(function(event){
    event.preventDefault();
    $('#register_form').submit();

});

dans ce cas, vous pouvez utiliser la balise <button> ... il n'est pas nécessaire d'utiliser la balise classique à la place

4
Baya

L'interface utilisateur sémantique est basée sur jQuery et CSS. Par conséquent, si vous souhaitez soumettre vos données de formulaire, vous avez un moyen de le faire:

  1. Envoyez vos données de formulaire avec AJAX

  2. Utilisez des plugins jqQuery comme this

  3. Tour!

    Placez un bouton d'envoi et définissez son affichage sur aucun. Lorsqu'un utilisateur clique sur le bouton div, envoie cet événement au bouton d'envoi, de la manière suivante:

    $("div_button_selector").on("click", function(){
   $("input[type='submit']").trigger('click');
});
0
Majid Golshadi

Voir article L'ajout d'erreurs à la validation du formulaire ne fonctionne pas? pour la validation des formulaires et des erreurs. Puisque Semantic UI est un outil côté client pour l'interface utilisateur, il s'agit du php pour l'email de contact "auto-soumission/même page de code". Étant donné que le but de l'interface utilisateur sémantique n'est pas le traitement logique, quelle langue et/ou méthode souhaitez-vous utiliser pour la soumission du formulaire? JS/jquery côté client ou côté serveur php, Rails, etc.? Gardez à l'esprit que l'interface sémantique 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: /");
    }
}
0
wriver4