Hide input empty input upon Submit

Question

I am trying to hide empty fields upon submit $_GET.

My code looks like this but it's not working. Any help with the logic of this would be great.

<script>
$(submit).click(function(){
if(input.value.length == 0)
    input.style.visibility = "hidden";
    });
</script>

EDIT: Here is my button which submits the form -

<input name="SaveBtn" type="submit" id="SaveBtn" 
formaction="update1Profile.php?id="<?php echo htmlentities($_SERVER["PHP_SELF"]) ?>
<?php echo $_GET['source_ID'] ?>" formmethod="GET" value="Save">

what is submit here. Is this refers html element? post your html code. — Kiran
– Kiran, Commented Oct 7, 2013 at 17:17
This is client-side code. As soon as the page is submitted any state set by this code will be lost when the page refreshes. — David
– David, Commented Oct 7, 2013 at 17:17
@David it's possible that the form submission is supposed to trigger an ajax call that won't result in the page being overwritten. — Pointy
– Pointy, Commented Oct 7, 2013 at 17:19
Submit is the 'type' of input button that submits the form. The actual input button I am using is named 'saveBTN' and is written like so: <input name="SaveBtn" type="submit" id="SaveBtn" formaction="update1Profile.php?id="<?php echo htmlentities($_SERVER["PHP_SELF"]) ?><?php echo $_GET['source_ID'] ?>" formmethod="GET" value="Save"> — MsNichols
– MsNichols, Commented Oct 7, 2013 at 17:21
@MizAkita you're using "submit" and "input" as if they were variables. There's no evidence in the code you posted that they actually are. — Pointy
– Pointy, Commented Oct 7, 2013 at 17:24

Pointy · Accepted Answer · 2013-10-07 18:29:05Z

1

Well that code is probably giving you errors in the browser console; it's always a good idea to check there first.

You need to find the <input> elements, and just mentioning the word "input" won't do that. Same goes for your "submit" element, whatever that is. That might look something like:

$('form').submit(function() {
  $(this).find('input').filter(function() { return this.value == ''; }).css('visibility', 'hidden');
});

edit — in a comment below, the OP now mentions that he wants to avoid having the empty inputs submitted. If that's the case, then making them invisible will definitely not do that. Instead (or additionally), it's necessary to mark the fields as "disabled":

$('form').submit(function() {
  $(this).find('input')
    .filter(function() { return this.value == ''; })
    .prop('disabled', true)
    .css('visibility', 'hidden');
});

edited Oct 7, 2013 at 18:29

answered Oct 7, 2013 at 17:18

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

6 Comments

MsNichols Over a year ago

I tried this with the following: $('#LName').find('input').filter(function() { return LName.value == ''; }).css('visibility', 'hidden'); but it seems to be now ignoring all updates and no errors are coming into my console. Hmmm... the $(this) is actually $('#Lname')

Pointy Over a year ago

It should not be LName.value == ''; it should be this.value == ''; as I wrote in my answer.

MsNichols Over a year ago

This seems to work but it still sends an empty field to my database which deletes the entry that is there already! Any way to completely ignore the $_GET if empty?

Pointy Over a year ago

@MizAkita making a field not visible does not prevent it from being submitted. If you want to do that, you have to disable the field as well.

MsNichols Over a year ago

Hmm... just tried it, instead it does not submit the form. Only if there is something presently in the LName field. If that area is empty, it just ignores the submit. There has got to be a way to achieve this. All i am trying to do is not submit the fields that ARE null! I'd like to skip posting these fields to the DB.

|

Jay Harris · Accepted Answer · 2013-10-07 17:18:03Z

0

use display instead of visibility, assuming you defined input somewhere in that code

input.style.display = "none";

answered Oct 7, 2013 at 17:18

Jay Harris

4,27120 silver badges22 bronze badges

1 Comment

rlemon Over a year ago

Visibility and display are two different things, this might cause unexpected behaviour with element shifting.

Collectives™ on Stack Overflow

Hide input empty input upon Submit

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related