I'd like to use How do I use jQuery's form.serialize but exclude empty fields but it does not work. I used a minimal example that redirects to a php script:
<html><head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function(){
$("#myForm :input[value!='']").serialize();
alert('JavaScript done');
});
});
</script>
</head>
<body>
<form id="myForm" action="php.php" method="get">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" value="submit form"/>
</form>
</body></html>
An here is the php script
<?php
print_r($_GET);
?>
If I write "111" only into the first textbox, I get from php:
Array ( [name1] => 111 [name2] => [name3] => [name4] => )
Thus, all fields made it into the get parameters.
Can you please help me?
TIA
I'd like to use How do I use jQuery's form.serialize but exclude empty fields but it does not work. I used a minimal example that redirects to a php script:
<html><head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function(){
$("#myForm :input[value!='']").serialize();
alert('JavaScript done');
});
});
</script>
</head>
<body>
<form id="myForm" action="php.php" method="get">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" value="submit form"/>
</form>
</body></html>
An here is the php script
<?php
print_r($_GET);
?>
If I write "111" only into the first textbox, I get from php:
Array ( [name1] => 111 [name2] => [name3] => [name4] => )
Thus, all fields made it into the get parameters.
Can you please help me?
TIA
Share Improve this question edited May 23, 2017 at 12:34 CommunityBot 11 silver badge asked Nov 25, 2013 at 9:55 tardistardis 1,3704 gold badges26 silver badges51 bronze badges 1- You need to AJAX the form - just calling serialize does not remove the fields from the request – mplungjan Commented Nov 25, 2013 at 10:02
3 Answers
Reset to default 7You cannot use attribute selector for value as it is a changing property.
Use .filter()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length > 0
}).serialize();
alert('JavaScript done');
});
});
Demo: Fiddle
Note: just serializing the input fields does not change in form submission, it can be used only if the form is submitted via ajax.
If you want to do a normal form submission but want to remove the empty fields then use .remove()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length == 0
}).remove();
alert('JavaScript done');
});
});
You can try it with ajax, and get the array data in php file, see below code.
<html><head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit_form').click(function(e){
$("#myForm :input[value!='']").serialize();
var form_data= $("#myForm :input[value!='']").serializeArray();
$.post("php.php",form_data,function(data){
alert('JavaScript done');
},"json");
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="myForm">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" id="submit_form" value="submit form"/>
</form>
You need to AJAX the form - just calling serialize does not remove the fields from the request
Live Demo
$('#myForm').on("submit",function (e) {
e.preventDefault(); // cancel the form itself
var opts = $(this).find(":input").filter(function () {
return $.trim(this.value).length > 0;
}).serialize();
$.get($('#myForm').attr("action"),opts,function(data) {
alert(data);
});
});