Avatar of erzoolander
erzoolander
 asked on

Jquery Form Functionality (add field, order fields, etc)

Hi -

I'm looking for recommendations on any sort of javascript/jquery function that you might be able to point me in the direction of that would have the following features:

1: It needs to be able to add subsequent inputs as the user progresses.  Like...if they have 1 field, they can add another, and another, and another, etc.  Not sure if it matters in my question or not - but they'll all be input type "text"
2: It needs to have the ability to allow the user to order the inputs (move entries around in their preferred order)
3: It should also have the ability to remove an item from the list.

Any plugins you've come across that accomplish those tasks?  Any help/guidance is appreciated :)

Thanks!
jQueryJavaScript

Avatar of undefined
Last Comment
erzoolander

8/22/2022 - Mon
Amar Bardoliwala

Julian Hansen

The code to do this is fairly straight forward.

You will need something like jqueryui to implement a sortable function. After that - dynamically creating and removing items is a case of catching the event that you want to trigger each and then implementing something like this.
The HTML (assumes jquery UI with sortable included
<a href="#" id="addrow">Add</a>
<ul id="inputlist">
<li><input ...><a class="removerow">x</a></li>
</ul>

Open in new window

The JQuery
$('#inputlist').sortable();
$('#addrow').click(function(e) {
  e.preventDefault();
  $('#inputlist').append(
    $('<li>').append(
      $('<input type="text">')
        .attr('id', 'uniqueid')     // set unique id you need
        .attr('name', 'uniquename') // set unique name you need
      .after(
        $('<a class="removerow">).html('x')
      )
    )
  );
}
// To Remove
$('a.removerow').live('click', function(e) {
  e.preventDefault();
  $(this).parent().remove();
}

Open in new window

erzoolander

ASKER
Works perfectly - except that it's not placing the 'x' on the child elements.

The sorting, and the additions work perfectly - however when I add - the remove "x's" aren't created.  

Here's the code -

$(document).ready(function(){
$('#inputlist').sortable();
$('#addrow').click(function(e) {
  e.preventDefault();
  $('#inputlist').append(
    $('<li>').append(
      $('<input type="text">')
        .attr('id', 'url')     // set unique id you need
        .attr('name', 'urlname') // set unique name you need
      .after(
        $('<a class="removerow">').html('x')
      )
    )
  )
});
// To Remove
$('a.removerow').on('click', function(e) {
  e.preventDefault();
  $(this).parent().remove();
});
});
</script>
</head>

<body>
<a href="#" id="addrow">Add</a>
<ul id="inputlist">
<li><input ...><a class="removerow">x</a></li>
</ul>
</body>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
erzoolander

ASKER
Thanks!