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!

Amar Bardoliwala

Hello erzoolander,

As far as I know, there is not such plugin but you can do it on you own using jquery.

Following should help you.

http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

http://stackoverflow.com/questions/1811803/jquery-remove-item-from-middle-of-list-then-refresh-list

http://api.jquery.com/remove/

http://jqueryui.com/sortable/

http://stackoverflow.com/questions/3050830/reorder-list-elements-jquery

Thank you.

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

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

erzoolander

ASKER

Thanks!