How to add and remove the class of the select input using Jquery addClass( )?

Question

I am using Uniform JS plugin for the form inputs. in the below code, i was trying to initialize the uniformjs styles in the dynamically created fields also.

In the below html code, there is a function called ext() which inserts a new row when the add button is clicked. I want the uniformjs style to get applied to those dynamically generated fields too. I tried and tried but its getting worst and its getting collapsed and the select boxes are not at all showing the selected value even after selecting ... :(

HTML

<table style="width:100%;border:1px solid;" id="table1">
  <tr><td>
  <select>
            <option>Through Google</option>
            <option>Through Twitter</option>
            <option>Other&hellip;</option>
            <option>&lt;Hi&gt;</option>
  </select>
</td>
<td><button onClick="ext();">Add</button></td>

</tr>
</table>

JS

$(function()
{
    $("input, textarea, select, button").uniform();
});

function ext()
{
    $(function()
    {
        $("input, textarea, select, button").uniform();
    });

    rl = document.getElementById("table1").rows.length;

    var a = document.getElementById("table1").insertRow(rl);
    var b = a.insertCell(0);


    b.innerHTML = '<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div>';
}

Resource - www.uniformjs.com

dku.rajkumar · Accepted Answer · 2011-12-21 06:00:49Z

3

instead of "input, textarea, select, button" you can just use ":input" it covers all the input type elements. please try something like below :

$(function(){
    $(":input").uniform();
  });

function ext()
        {
        rl=document.getElementById("table1").rows.length;

        var a=document.getElementById("table1").insertRow(rl);
        var b=a.insertCell(0);


    b.innerHTML='<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div>';

    $(function(){
        $(":input").uniform();
      });
    }

answered Dec 21, 2011 at 6:00

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

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

1 Comment

Bala Over a year ago

@dku...nope..its affecting all input fields and even other fields will get affected as the rows keep on increasing...!

Jake Feasel · Accepted Answer · 2011-12-21 05:57:38Z

2

Try this:

function ext()
        {

        $("#table1").append('<tr><td><div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div></td></tr>');

        $(":input").uniform();
    }

answered Dec 21, 2011 at 5:57

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

Comments

nnnnnn · Accepted Answer · 2011-12-21 05:57:38Z

2

I don't know how Uniform works, so just a guess: within your ext() function, move the following code:

$("input, textarea, select, button").uniform();

to be the last line of the function. That is, call .uniform() after you create the new elements. (Obviously I'm assuming here that it is the call to .uniform() that applies the styles you are talking about.)

Note also that within your ext() function you currently surround the above line with a document ready function and you don't need to do that.

answered Dec 21, 2011 at 5:57

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Collectives™ on Stack Overflow

How to add and remove the class of the select input using Jquery addClass( )?

HTML

JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related