CODEWITHSUNDEEP
javascriptjqueryhtml
equitharn
equitharn

Reputation: 3482

how to dynamically add REQUIRED attribute to input tags based on output of select tag using jquery?

I have a select tag with two options 'new' and 'edit'

when someone selects the 'new' option all the input tags in that form should be marked required and when someone selects 'edit' only a few should be marked required.

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>

Now I tried some functions but they don't seem to work

<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
    $('#Name').attr('required',true);
} else if (todo == "edit") {
    //code
}
</script>

and

<script>
function req() {
    var selectBox = document.getElementById('todo');
    var userInput = selectBox.options[selectBox.selectedIndex].value;
    if (userInput == 'new') {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
}
</script>

where
<select name="todo" id="todo" onchange="return req();" required></select>

just to be sure if it works I put a alert() method in the if condition, but that alert is never fired.

PS. one of the input tags is

<input type="text" id="Name" name="Name">

Thank you for your time in advance...

EDIT

As pointed out by @Maximillian Laumeister in second snippet there was a typo error (which I have corrected here). (sorry for that)

Upvotes: 0

Views: 3725

Answers (3)

Gacci
Gacci

Reputation: 1398

This should be ebough to get you going. onchange detects whenever a different selection is made. Then based on what option is selected you perform the different instructions.

jQuery(document).ready(function(){
  jQuery('#todo').on('change', function(event){
    alert(this.value);
    if(this.value === 'edit'){
      
    }
    else if(this.value === 'new'){
      
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>

Upvotes: 2

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

In your script here you have a typo that throws a console error:

function req() {
    var selectBox = document.getElementById('todo');
    var userInput = selectBox.options[selectbox.selectedIndex].value;
    if (userInput == 'new') {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
}

Where it says 

selectBox.options[selectbox.selectedIndex].value

selectBox needs a capitalization like this:

selectBox.options[selectBox.selectedIndex].value

It seems to be working for me with that one change.

Also, since you asked, your first script isn't working because it needs to be bound to run when the select changes, just like with the first one. In addition, you need to use jQuery's val instead of text to get the value of an option tag. Here is a working version of your second script:

$("#todo").change(function () {
    var todo = $('#todo option:selected').val();
    if (todo == "new") {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
});

Upvotes: 2

brroshan
brroshan

Reputation: 1650

Try this:

$("select").change(function(){
   if($(this).val() === "new")
       $("#Name").attr("required","required");
   });

You used the option text which is "Add" but in your if statement you compared it to the string "new". That's the reason your code didnt work as expected.

Upvotes: 1

Related Questions