CODEWITHSUNDEEP
jquery
shin
shin

Reputation: 32721

How to remove input and dropdown value with jQuery

I'd like to remove values from input and dropdown with jQuery.

For example, if you select a Student radio button, I want remove a value from input where name=child_email. And if you select the Teacher radio button, I want to remove a value from input where name=parent_email1, parent_email2 and empty a value in dropdown where name=advisor.

// radiobox 
echo '<fieldset data-role="controlgroup" data-mini="true">
        <input type="radio" name="parent_or_student" id="radio-mini-1" value="student" />
        <label for="radio-mini-1">Student</label>
        <input type="radio" name="parent_or_student" id="radio-mini-2" value="parent"  />
        <label for="radio-mini-2">Parent</label>
        </fieldset>';
...
echo '<div id="student" class="desc">';
// parent_email1
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='parent_email1'>Parent Email 1</label>"."\n";
    $parent_email1= array(
    'id'=>'parent_email1',
    'name'=>'parent_email1',
    'placeholder'=>'Parent email 1',
    'value'=>set_value('parent_email1'),
    );
echo form_input($parent_email1)."\n";
echo "</div>\n\n";

// parent_email2
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='parent_email2'>Parent Email 2 (optional)</label>"."\n";
    $parent_email2= array(
    'id'=>'parent_email2',
    'name'=>'parent_email2',
    'placeholder'=>'Parent email 2(optional)',
    'value'=>set_value('parent_email2'),
    );
echo form_input($parent_email2)."\n";
echo "</div>\n\n";

// advisor
echo '<div data-role="fieldcontain">'."\n";
echo '<label for="advisor">Advisor</label>'."\n";
echo form_dropdown('advisor', $advisors, set_value('advisor'), 'id="advisor" data-native-menu="false" data-theme="c"')."<br />\n";
echo "</div>\n\n";

echo '</div>';
// end of student

// for parent
echo '<div id="parent" class="desc">';
// parent_email1
echo '<div data-role="fieldcontain">'."\n";
echo "<label for='child_email'>Child's School Email</label>"."\n";
    $child_email= array(
    'id'=>'child_email',
    'name'=>'child_email',
    'placeholder'=>'Child\'s School Email',
    'value'=>set_value('child_email'),
    );
echo form_input($child_email)."\n";
echo "</div>\n\n";
echo "</div>";
// end of parent

And jquery I made is the following but does not remove value.

$(document).ready(function(){ 
$("input[name$='parent_or_student']").change(function() {
    var role = $(this).val();
    var parent_email1 = $("input[name=parent_email1]").val();
    var parent_email2 = $("input[name=parent_email2]").val();
    var child_email = $("input[name=child_email]").val();

    // remove other value
    if(role =='parent')
    {
        $(parent_email1, parent_email2).remove();   
    }
    else if(role=='student' )
    {
        $(child_email).remove();

    }
    $("div.desc").hide();
    $("#"+role).show();

});

Upvotes: 0

Views: 185

Answers (1)

anpsmn
anpsmn

Reputation: 7257

.remove is used to remove the element not the value. Check documentation. You need to set the value to blank here. Check fiddle

var parent_email1 = $("input[name=parent_email1]");
var parent_email2 = $("input[name=parent_email2]");
var child_email = $("input[name=child_email]");

// remove other value
if(role =='parent')
{
    parent_email1.val('');   
    parent_email2.val('');   
}
else if(role=='student' )
{
    child_email.val('');   

}

Upvotes: 2

Related Questions