javascript - 如果字段为空，.serialize() 不在帖子中显示输入名称

Question

有一个问题。我有 .serialize()，如果字段为空，我不想在帖子中显示输入名称，这样帖子更干净。但不知道如何。

<form id="profile-form" method="post">
  <div class="form-group">
    <input name="Profile-twitter" type="text"  id="inputTwitter" placeholder="Twitter Link">
    <input name="Profile-youTube" type="text"  id="inputYouTube" placeholder="YouTube Link">
  </div>
  <button type="submit" id="Profile-submit">Profil aktualisieren</button>
</form>

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $( this ).serialize() );
});

Answer 1

您的问题更常见的解决方案是使用 filter()表单的 serilizeArray() 方法，

无论您使用 serialize() 还是 serilizeArray() 发布都没有任何区别，在这两种情况下您将获得相同的 post 变量，这里我们使用serilizeArray()。

@sivaprasad 的回答将适用于仅输入(我知道发问者也想要仅输入的解决方案)，

但您可以使用 javascript 的内置函数，使用简单和更少代码的简短方法来完成过滤器()。

请参阅下面的更简单的解决方案，它也适用于所有表单元素(输入、文本区域、复选框、单选按钮等):

//JAVASCRIPT or <script> tag

$("form").on("submit", function (event) {
   event.preventDefault();
   let filteredArray = $('#profile-form').serializeArray().filter(function (k) {
      return $.trim(k.value);
   });
   console.log(filteredArray);
});

/*** CSS ***/

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

<!-- HTML FORM -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="profile-form" method="post" action="submit_using_jQuery.php">
    <div class="form-group">
        <label for="inputTwitter">Twitter Link</label>
        <input name="Profile-twitter" type="text"  id="inputTwitter" placeholder="Twitter Link">
    </div>
    <div class="form-group">
        <label for="inputYouTube">YouTube Link</label>
        <input name="Profile-youTube" type="text"  id="inputYouTube" placeholder="YouTube Link"><br/>
    </div>
    <div class="form-group">
        <label for="bio">Bio</label>
        <textarea name="Profile-bio" id="bio"></textarea>
    </div>
    <div class="form-group">
        <label for="">Gender</label>
        <input type="radio" name="Profile-gender" value="male">Male
        <input type="radio" name="Profile-gender" value="female">Female
    </div>
    <div class="form-group">
        <label for="">Hobby</label>
        <input type="checkbox" name="Profile-hobby[cricket]">Cricket
        <input type="checkbox" name="Profile-hobby[football]">football
    </div>
    <button type="submit" id="Profile-submit">Profil aktualisieren</button>
</form>

这是用于过滤serializeArray()的简短javascript(ES6)箭头函数:

let filteredArray = $('#profile-form').serializeArray().filter(k => $.trim(k.value));