Whether the submitted and entered values of the form in HTML are empty

Article origin: http://blog.csdn.net/lvhuiyang/article/details/53192277

Default way to submit html

<form  action="/server_url" method="post" id="form"><!--Submission address-->
    <input type="text" name="username" class="username" placeholder="Please enter your user name!">
    <input type="password" name="password" class="password" placeholder="Please enter your user password!"> <input type="tel" name="telphone" class="tel" placeholder="Please enter your phone number!">
    <input type="submit" class="submit_button" id="submit_button" value="Sign in">
    <button type="reset" class="reset_button">Reset</button>
</form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

There is nothing to say about this method of submission. It should be noted that the action attribute in the form tag is responsible for the address of submission, and the method is the method of submission (get/post).

2. Control with jquery

Sometimes we need to control the input of account password. For example, we need to judge whether the input box is empty. If it is empty, we need to further remind users. To facilitate the operation of jQuery, it is as follows:

$(document).ready(function () {
    $("#submit_button").click(function () {
        var username = $('.username').val();
        var password = $('.password').val();  var telphone = $('.tel').val();
        if (username == '') {
            alert("Please enter your account number");
            return false;
        }
        else {
            if (password == '') {
                alert("Please input a password");
                return false;
            }else   if (tel == '') {                    alert("Please enter your phone number");                    return false;
   }
else $('#form').submit(); } }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

//Note that if it does not meet the requirements, it should return to false at last. Otherwise, it will be submitted after the pop-up dialog box is opened. The principle of this point will be supplemented later, and the pit will be dug first.

3.Use ajax Submit

//Also use jQuery, the code is as follows

$(document).ready(function () {
    $("#submit_button").click(function () {
         var username = $('.username').val();
          var password = $('.password').val();
          alert(username + ' \n' + password);
          $.post(
                                  '{{ url_for('main.login') }}',
                  {username: username, password: password},
                  function () {
                    window.location.href = 'http://www.baidu.com';});
    });

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Pay attention to the format $. Post (URL, data, callback()) of post method. When using flash, the back-end redirects, but the front-end page does not jump. The reason may be that the ajax itself controls the page, or the ajax features do not make the page Jump. The solution is that the callback() function can be set to jump the page.

Tags: JQuery Attribute

Posted on Sun, 03 May 2020 08:19:35 -0400 by scast