Fill empty inputs with jQuery

Question

I'm working with PHP+MySQL. In one page I have a form with aprox. 30 inputs.

After showing the form, at the end I execute some jQuery sentences styling the form.

Well, some rows in my SQL have data empty inputs, so I show empty inputs. I want to fill the form with "------" without writing that slashes into DB because makes SQL much bigger.

I'm trying "replaceWith", but i dont know if this implementation with "empty" is correct. This does not work, even without .is(:empty)

<script>
    $('#form').find('input[type=text]').is(':empty').replaceWith(function()
       {
        return this.val('------');
       });
</script>

I would suggest doing this server-side instead. You can simply format the output before returning it with a simple IF without touching the DB, like if(is_null(field)) {field = "----";} — BReal14
– BReal14, Commented Aug 27, 2014 at 14:30
@JaredEitnier fixed! Sorry, i had not that written in my file :) — Alex Deiwor
– Alex Deiwor, Commented Aug 27, 2014 at 15:19

adeneo · Accepted Answer · 2014-08-27 14:30:27Z

3

jQuery's :empty finds elements with no children, not elements without a value, and as an input can't have children it finds nothing.

And jQuery's is() returns a boolean, not a collection.

jQuery's replaceWith replaces the entire element, not just the value.

Check the value instead.

$('#form input[type=text]').val(function(_, val) {
    return val.length === 0 ? '------' : val;
});

or

$('#form input[type=text]').filter(function() {
    return this.value.length === 0;
}).val('------');

Throw in a $.trim to trim off whitespace if needed

answered Aug 27, 2014 at 14:30

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

Alex Deiwor Over a year ago

Wow, thank you. Obviusly I misunderstood the function of empty. Unluckily that two options is not working. I gonna try with $('#form').find('input[type=text]')

SeinopSys Over a year ago

It's not just jQuery's :empty, it's the way that CSS selector is supposed to work.

arserbin3 · Accepted Answer · 2014-08-27 14:54:21Z

2

Use something like this:

<script>
    $('#form').find('input[type=text]').each(function(e){
        if($(this).val()=="") $(this).val("---");
    })       
</script>

edited Aug 27, 2014 at 14:54

arserbin3

6,1688 gold badges39 silver badges53 bronze badges

answered Aug 27, 2014 at 14:37

RN Kushwaha

2,1343 gold badges30 silver badges41 bronze badges

1 Comment

Alex Deiwor Over a year ago

That works! as @adeneo write, I need to use .trim to trim off the whitespaces. Thankyou !!!!

Community · Accepted Answer · 2017-05-23 12:27:09Z

1

Have you considered using the HTML placeholder attribute?

You could use placeholder to make the dashes appear in light grey text without actually changing the value of the input. They would automatically be added to any blank fields on your page:

<input type="text" placeholder="----" value="asdf" name="notempty"
    title="This has a placeholder, but doesn't show it because the input is filled with something" />
<input type="text" placeholder="----" value="" name="empty"
    title="This is empty, so it shows the dashes" />

The placeholder text would not be included in your $_POST data. In this example, $_POST['empty'] would be blank.

The placeholder attribute is supported by many of the modern browsers, but not IE9:

http://caniuse.com/#feat=input-placeholder

There are various jQuery plugins that imitate this effect as well. You can read about a few of them here:

How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Aug 27, 2014 at 14:52

Chris

3,3281 gold badge34 silver badges40 bronze badges

1 Comment

Alex Deiwor Over a year ago

That it is a really good option but I could not use that because after adding the slashes I use other Jquery sentence to convert this inputs to plain text, so if there is no text written in the input, the conversion makes it dissapear

Collectives™ on Stack Overflow

Fill empty inputs with jQuery

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related