How to remove submit parameters after appending them dynamically using jQuery?

Question

I have a form and I need to append two items that are not in the form scope. I'm using jQuery to do it.

My code is working, however, the second time that I submit the form, I'm getting the values I selected in the first time.

Here is my code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnUpdate").click(function (event) {

            var items = [];

            $('#params :selected').each(function (i, selected) {
                items[i] = $(selected).text();
                $(selected).prop("selected", false)
            });

            //So far, so good. My variable 'items' changes the second time.

            //The problem is here:

            for (var i = 0; i < items.length; i++) {

                var submitVal = items[i];
                $('#myForm').append("<input type='hidden' name='param" + i + "' value='" + submitVal + "' />");
            }

            return true;
        });
    });

</script>

I guess the second time I'm appending a third and a fourth parameters, which means that I have param0, param1 - from the first time - and param0, param1 again - from the second time.

In the third time I'm appending a fifth and sixth and so on.

On the server side I'm using ASP.NET MVC.

public ActionResult Method(string param0 = "", string param1 = "")

I tried to use the method .submit but I was not successful, that is why I'm using the .click method.

Now I'm trying to append the two parameters, submit the form, and remove them after.

Any ideas on how to proceed? Or any ideas to a better solution?

colestrode · Accepted Answer · 2013-08-12 14:15:41Z

1

Assuming you don't have any other hidden inputs in your form, you could try removing them all before adding the new items:

$('#myForm').find('input[type=hidden]').remove(); //remove all hidden elements

for (var i = 0; i < items.length; i++) {
    var submitVal = items[i];
    $('#myForm').append("<input type='hidden' name='param" + i + "' value='" + submitVal + "' />");
}

If you have other hidden elements, tag these dynamic ones with the same class and use that to select the elements to remove:

$('#myForm').find('input[type=hidden].dynamic').remove(); //remove all hidden elements tagged with dynamic class

for (var i = 0; i < items.length; i++) {
    var submitVal = items[i];
    $('#myForm').append("<input class='dynamic' type='hidden' name='param" + i + "' value='" + submitVal + "' />");
}

answered Aug 12, 2013 at 14:15

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

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

Comments

Jason P · Accepted Answer · 2013-08-12 14:15:53Z

1

I would spend a bit more effort getting this to work with the submit event, since the user doesn't necessarily need to click the button to submit the form.

But anyway, I would give the dynamically added inputs a special class, and use that to remove them on page load:

$('#myForm').append("<input type='hidden' class='dynamically-added' name='param" + i + "' value='" + submitVal + "' />");

...

$(document).ready(function () {
    $('input.dynamically-added').remove();
});

answered Aug 12, 2013 at 14:15

Jason P

27k3 gold badges34 silver badges45 bronze badges

1 Comment

Lucas Over a year ago

I tried this, but it didn't work. However, I will try to work with the submit event as soon as I have more time to work on this. Thank you.

Collectives™ on Stack Overflow

How to remove submit parameters after appending them dynamically using jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related