JQuery form plugin how to send only visible fields

Using the jQuery plugin, I just want to expose the visible fields (not hidden) of the form.

HTML:

<div class="result"></div>
    <form id="myForm" action="comment.php" method="post"> 
        Name: <input type="text" name="name" /> 
        Comment: <textarea name="comment"></textarea> 

<div style="display:none;">
        <input type="text" value="" name="name_1" /> 
</div>

        <input type="submit" value="Submit Comment" /> 

    </form>

      

I cannot find a way to represent only visible fields using any of the methods below:

ajaxForm:

// wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 

      

ajaxSubmit:

$('#myForm').ajaxSubmit({
      target: '.result',   
      success: function(response) {
        alert("Thank you for your comment!");


      }
    });

      

There is another method formSerialize

, but found no way to use it with the above two methods (however, you can use $.ajax

). How can I represent only visible fields using either of the two methods?

+3


source to share


1 answer


$("#myForm").on("submit", function() {
        var visibleData = $('#myForm input:visible,textarea:visible,select:visible').fieldSerialize();
        $.post(this.action, visibleData, function(result) {
            alert('Thank you for your comment!');    
        });
        // this is needed to prevent a non-ajax submit
        return false;
});

      



+2


source







All Articles