jQuery show message when one option is selected twice

user_614208 0
Viewed 1340

I have form with one simple input text and another option select dropdown.So my markup is like this

 <div id="form-wrap" style="width:500px; margin: 0 auto;">
    <table>
      <tr>
        <th width="55%">Service Name</th>
        <th width="35%">From Price</th>
        <th width="10%"></th>
      </tr>
          <tr id="template">
            <td id="example" width="55%">
              <select name="service-name" id="service-name" style="width:230px;">
                <option value="" selected>--select--</option>
                <option value="service-1">service-1</option>
                <option value="service-2">service-2</option>
                <option value="service-3">service-3</option>
                <option value="service-4">service-4</option>
              </select>
            </td>
            <td width="45%"><input type="text" name="from-price" id="from-price" /></td>
            <td width="10%"><input type="button" id="remove" value="remove row" /></td>
          </tr>
    </table>
    <input type="button" value="+ Add Row" id="add-row" />
  </div>

Under the form I have button called as Add row. So when someone clicks on it, it will add another row and also another button as remove which will remove the row with that selected button row. The jQuery code is like this

<script type="text/javascript">
  jQuery(document).ready(function() {
    id = 0;
    var template = jQuery('#template');
    jQuery('#add-row').click(function() {
      var row = jQuery(template).clone();
      var templateSelectedIndex = template.find("select")[0].selectedIndex;
      template.find('input:text').val("");
      row.attr('id','row_'+(++id));
      row.find('#remove').show();
      row.find("select")[0].selectedIndex = templateSelectedIndex;
      template.after(row);
    });
    jQuery('#form-wrap').on('click','#remove',function() {
      jQuery(this).closest('tr').remove();
    });

});

Here it is working fine. Here is the working fiddle link

http://jsfiddle.net/NewUserFiddle/LT7gM/

But in this I want another extra option. You can see I have option like 

 <select name="service-name" id="service-name" style="width:230px;">
  <option value="" selected>--select--</option>
  <option value="service-1">service-1</option>
  <option value="service-2">service-2</option>
  <option value="service-3">service-3</option>
  <option value="service-4">service-4</option>
</select>

So I want that when someone selects one option in a row (lets say Service1) and then adds another row and again chooses the same previous selected option (here it is Service1 as Service1 has been selected in previous row) then it should show an alert message that sorry the option name has been selected previously. So can someone tell me how to do this? Any help will be really appreciable. Thanks. Any help??

html jquery
4 Answers

As a concept...

if $( select#service_1 ) exists

    alert("already added")

else

    add new select box

end if

You seem to have a good grasp of jquery to implement the pseudo code.

user_12464940

Try:

jQuery('#add-row').click(function () {
    var row = jQuery(template).clone();
    var templateSelectedIndex = template.find("select")[0].selectedIndex;
    template.find('input:text').val("");
    row.attr('id', 'row_' + (++id));
    row.find('#remove').show();
    row.find("select")[0].selectedIndex = templateSelectedIndex;
    template.after(row);
    $("#template").find("select:first option:first").prop("selected","selected");
});

DEMO here.

user_14438660

Correct me if I'm wrong, but it appears as if you want to ensure that a user can only select one of each option. In other words, you want to prevent a user selecting service-1 on more than one row.

To do this, you can attach an event listener to each select, cycle through all the select inputs, and ensure that no duplicates are found. This is the code I put together:

jQuery('#form-wrap').on('change', 'select',function(event) {
    var services = {};
    var valid = true;
    $('#form-wrap select').each(function(index, element) {
        if (services[element.selectedIndex])
            valid = false;

        if (element.selectedIndex != 0)
            services[element.selectedIndex] = true;
    });

    if (!valid)
    {
        alert('Sorry, that service has already been selected');
        this.selectedIndex = 0;
    }
});

and here is a working fiddle

user_30337650

Possibly an if statement with a event listener.

Something like; if Service 1, listen for Service1 as Service1, if so = Biggity bam!

Below may get you in the right direction.

  if (Service1) init();
        else addEventListener(Event.yourstuffhere, init);
    }
user_9733970
Related