.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 встроенную функцию filter().

См. Ниже для более простого решения , которое также работает для всех элементов формы (input, textarea, checkbox, radiobutton и т. Д.):

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

Вот короткая и трезвая функция стрелки javascript (ES6) для фильтрация serializeArray () :

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

Answer 2

Попробуйте это

    $( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        var flag = false;
        //if($("#inputTwitter").val() != "" && $("#inputYouTube").val() != "")
        $(this).find(">div>input").each(function(index, el){
            if ($(el).val().length == 0) 
                flag = true; 
        });
        if( !flag )
            console.log( $( this ).serialize() );
    });