Change input value or add a new input if it doesn't exist

Question

Background: I need to append certain data to post; similar to what jQuery's ajaxSetup does that for asynchronous requests except I need it for native form submits.

I need to be able to add a couple of form fields to a form before it is submitted, but I want to make sure I don't add duplicate fields in case they're already there (i.e. original submit failed because of validation or something).

At first I thought something like this would be nice and coherent:

$("form").live("submit", function () 
{
    var $this = $(this);

    ($this.find('#stuff') ||
    $this.append('<input type="hidden" id="stuff" name="stuff" />'))
        .val('some value');

    // carry on with the native submit
    // this is actually correct, as opposed to $this.submit()  
    // which would create a loop

    this.submit();
});

Meaning look for #stuff, if it's not found create it, then set its value to "some value". However because the result of the .find() is actually a jQuery wrapper, it would be implicitly converted to a true meaning that even if there are no matching elements found, the .append() code would never be executed.

Is there a nice way to tackle this whole "look for an element and create it if it doesn't already exist" scenario?

Josh · Accepted Answer · 2013-03-06 02:51:59Z

2

change $this.find('#stuff') to $this.find('#stuff').length

edit

if you want to be able to all of it in one statement you can do

(
 ($this.find('#stuff').length && $this.find('#stuff')) || 
  $('<input type="hidden" id="stuff" name="stuff" />').appendTo($this)
).val('some val');

edited Mar 6, 2013 at 2:51

answered Mar 6, 2013 at 2:16

Josh

3,3041 gold badge25 silver badges35 bronze badges

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

3 Comments

Oleg Over a year ago

mmm... I wouldn't be able to ($this.find('#stuff').length || /*add #stuff*/).val('new value') thogh, would I?

Oleg Over a year ago

almost. .val() doesn't seem to work for when the input is being appended. If nothing else, this convinces me to use the less obscure if-else :)

Josh Over a year ago

just for fun. it could still work by reversing the selection IE ... || $('<input type="hidden" id="stuff" name="stuff" />').appendTo($this)

Oleg · Accepted Answer · 2013-03-07 23:37:46Z

1

To keep checking logic readable one would expand the conditional:

if ($this.find('#stuff').length) {
  $this.find('#stuff').val('some val');
} else {
  $this.append('<input type="hidden" id="stuff'" name="stuff" value="some val" />');
}

Alternatively one could just remove and re-add the element... I know, "dom operations are expensive" but if there are several fields to be operated on it's just so much prettier this way:

$this.find('#stuff', '#stuff2', ...).remove()
  .append('<input type="hidden" id="stuff" name="stuff" value="some val" />...');

answered Mar 7, 2013 at 23:37

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

3 Comments

Josh Over a year ago

you do loose any/all events associated with the elements though

Oleg Over a year ago

@Josh: true, but not a concern in my case/for hidden inputs

Josh Over a year ago

I commented just for reference. i figure you posted a solution that works for you :)

Collectives™ on Stack Overflow

Change input value or add a new input if it doesn't exist

2 Answers 2

edit

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

edit

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related