Avoid sending empty values, through dynamic inputs (HTML - Jquery)

Question

i found this tutorial, where they explain very well how to add dynamic inputs, however, if the submit button is clicked, this does not filter the empty values from the inputs. The idea is to filter those empty values before sending them to the server, some idea?

http://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/

The code:

<?php
if(isset($_REQUEST['submit'])){
    $field_values_array = $_REQUEST['field_name'];

    print '<pre>';
    print_r($field_values_array);
    print '</pre>';

    foreach($field_values_array as $value){
        //your database query goes here
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add more fields using jQuery</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

</head>
<body>
<form name="codexworld_frm" action="" method="post">
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a>
    </div>
</div>
<input type="submit" name="submit" value="SUBMIT"/>
</form>
</body>
</html>

You mean you will be having both static and dynamic input fields and when the form is submitted, the empty input fields will not be sent to the server. Right? — Wolverine
– Wolverine, Commented Jan 21, 2017 at 15:47
How about the answer below posted by charlietfl? Hope it will work for you. — Wolverine
– Wolverine, Commented Jan 21, 2017 at 16:08

charlietfl · Accepted Answer · 2017-01-21 15:48:55Z

2

One way would be remove the empty inputs within a submit event handler

$('form[name=codexworld_frm']).submit(function(){
    $(this).find('input').filter(function(){
           return !this.value;
    }).remove();
})

answered Jan 21, 2017 at 15:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Wolverine Over a year ago

That's cool bro! Too easy and simple. To put simply, it's expressive.

Mvram Over a year ago

This works ! thanks. However my solution is using JqueryValidate, if the input is empty, I force the user to eliminate the added inputs of more.

Wolverine Over a year ago

I like this solution. +1 from me. :)

charlietfl Over a year ago

nothing was mentioned about validation plugin in question. Not clear what impact is without a minimal reproducible example

Mvram Over a year ago

i know, that is just another solution that i have improvised.

Mr Giggles · Accepted Answer · 2017-01-21 20:48:57Z

0

From reading your comments, you are trying to validate existing Dom elements and elements that you add dynamically and the problem is that the added elements aren't hitting your validation code?

If so, try attaching the validator using delegate instead of however you are currently doing it

http://api.jquery.com/delegate/

This allows for elements added to the Dom to behave how you expect.

answered Jan 21, 2017 at 20:48

Mr Giggles

2,1443 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Avoid sending empty values, through dynamic inputs (HTML - Jquery)

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related