jQuery function to create or set hidden input dynamically

Question

I am trying to create a function which updates the hidden inputs dynamically.

Below is my function:

function updateDeletedFileIds(deletedFileId) {
    if($('input[name=multiFieldDeletedIds]') == null) {
        $('.selected_file_info').append('<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="'+deletedFileId+'" />');
    }
    else{
        id = $('input[name=multiFieldDeletedIds]').val();
        id += ','+deletedFileId
        $('input[name=multiFieldDeletedIds]').attr('value', id);

    }
}

Here is my expected output: when the updateDeletedFileIds function is called for the first time it should create a hidden input tag and set the value as per deletedFileId

updateDeletedFileIds(1) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1" />'

when it is calleda second time it should just update the value as comma separated

updateDeletedFileIds(2) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1,2" />'

updateDeletedFileIds(3) =>
'<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="1,2,3" />'

But my function is not working as expected. Could someone please help me out?

Can you show your HTML code? What error you are getting? Or what is happening which is not expected by you? — Priyank Sheth
– Priyank Sheth, Commented May 1, 2015 at 4:20

Drazen Bjelovuk · Accepted Answer · 2015-05-01 15:59:42Z

1

To check whether your jQuery selector returned anything, you should check its length property. I also recommend using val() as opposed to attr() to set the value, as attr() only affects the html attribute, while val() sets its DOM property.

function updateDeletedFileIds(deletedFileId) {
    var $el = $('input[name=multiFieldDeletedIds]');
    if(!$el.length) {
        $('.selected_file_info').append('<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="'+deletedFileId+'" />');
    }
    else if ($el.val().indexOf(deletedFileId) < 0) {
        $el.val($el.val() + ',' + deletedFileId);
    }
}

edited May 1, 2015 at 15:59

answered May 1, 2015 at 4:17

Drazen Bjelovuk

5,5626 gold badges44 silver badges68 bronze badges

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

2 Comments

Brijesh Bhatt Over a year ago

Not working ...jsfiddle.net/hyvhbs2y/1 .. remove += and write only + in else

OTUser Over a year ago

@JoshBjelovuk Thanks for the answer I appreciate it. How do I make sure duplicated ids are not added to hidden fields. I mean if updateDeletedFileIds(1) for second time it shouldnt update the hidden fields

Brijesh Bhatt · Accepted Answer · 2015-05-01 18:27:50Z

1

You can try this:

    function updateDeletedFileIds(deletedFileId) {
        var $el = $('.selected_file_info');
        if($el.find("input.MultiField").length==0) {
            $('.selected_file_info').append('<input type="hidden"  class="MultiField" name="multiFieldDeletedIds" value="'+deletedFileId+'" />');
        }
        else{
          if( $el.find("input.MultiField").val().indexOf(deletedFileId)<0) { 
            $el.find("input.MultiField").val($el.find("input.MultiField").val() + ','+deletedFileId);
        }
      }
    }

DEMO

edited May 1, 2015 at 18:27

answered May 1, 2015 at 4:45

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

1 Comment

OTUser Over a year ago

Thanks for the answer I appreciate it. How do I make sure duplicated ids are not added to hidden fields. I mean if updateDeletedFileIds(1) for second time it shouldnt update the hidden fields

Collectives™ on Stack Overflow

jQuery function to create or set hidden input dynamically

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related