Как отправить форму в Semantic UI?

Ответ 1

Вы можете использовать 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: вы также можете использовать метод onSuccess формы для запуска функции submitForm, то есть при инициализации формы:

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

onSuccess вызывается только при нажатии кнопки "Отправить", и форма действительна в соответствии с указанными вами правилами.

EDIT: если вы хотите регулярное поведение формы HTML, вам нужно будет добавить семантические классы css в тег form.

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

И затем вы устанавливаете правила проверки с помощью jQuery. Это даст вам поведение по умолчанию HTML-формы, т.е. Когда вы нажмете кнопку отправки, он сделает запрос POST/signup в приведенном выше случае. Если какое-либо из ваших правил запускается, подача сохраняется до тех пор, пока не будут допущены ошибки проверки.

Ответ 2

используйте исходную кнопку отправки, но добавьте стиль семантической кнопки:

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

Ответ 3

Семантический интерфейс имеет собственный API для отправки формы. например:

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

Ответ 4

Самый простой способ - модифицировать стандартную HTML-форму, используя приведенный ниже код.

Начните с базовой рабочей HTML-формы с кнопкой отправки, и это приведет к вашим значениям и отправке их в пункт назначения формы, возвращая выходные данные ниже кнопки отправки формы.

• Хорошо провести время, чтобы проверить, что вы успешно связываетесь с jquery, семантическим javascript и семантическим css на этом этапе.

• Добавьте class= "ui form" в свой тег формы.

• Добавьте javascript ниже.

.

$(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);
} 

});

Базовая форма:

    <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>

Если вы хотите, чтобы сообщение об ошибке отображалось в поле, а не внутри самой формы, включите это в вашу форму и удалите слова "inline: true", а семантический UI сделает остальные:

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

ПРИМЕЧАНИЕ. Использование тегов формы с семантическим интерфейсом не является строго необходимым, так как вам действительно нужен только div с классами "ui form", однако для этого модифицированного кода требуется тег формы.

Ответ 5

Что делать, если вы не используете ajax?!

Используйте это:

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

});

в этом случае u может использовать тег <button>... нет необходимости использовать классический тег вместо

Ответ 6

Семантический интерфейс основан на jQuery и CSS, поэтому, если вы хотите отправить свои данные формы, у вас есть способ сделать это:

• Отправьте данные формы с помощью AJAX

• Используйте некоторые плагины jqQuery, такие как this

• Trick!

  Поместите кнопку отправки и установите ее отображение равным none. Когда пользователь нажимает кнопку div, вы можете отправить это событие в кнопку отправки следующим образом:

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

Ответ 7

См. сообщение Добавление ошибок для проверки формы не работает? для проверки формы и ошибок. Поскольку Semantic UI - это клиентский инструмент для пользовательского интерфейса, это php для электронной почты для самостоятельной отправки/той же кодовой страницы. Поскольку цель Semantic UI не является логической обработкой, какой язык и метод вы хотите использовать для подачи формы? JS/jquery клиентская сторона или serveride php, рельсы и т.д.? Имейте в виду, что семантический интерфейс зависит от 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("[email protected]", $subject, $message, "From: $from\n");
        $_POST["email"] = "";
        $_POST["subject"] = "";
        $_POST["message"] = "";
        unset($GLOBALS['email']);
        header("location: /");
    }
}

Ответ 8

Если у вас есть такая форма

<div class="ui form segment">
  <p>Tell Us About Yourself</p>
  <div class="field">
    <label>Name</label>
    <input placeholder="First Name" name="name" type="text">
  </div>
  <div class="field">
    <label>Username</label>
    <input placeholder="Username" name="username" type="text">
  </div>
  <div class="field">
    <label>Password</label>
    <input type="password" name="password">
  </div>
  <div class="ui blue submit button">Submit</div>
</div>