Javascript to create text field with dropdown menu options

Question

I have been using some Javascript to create a text field once an certain value is selected from a drop-down box, but having a limited knowledge in Javascript now that I need to edit it so that a new dropdown option also creates a text field. When I have tried to edit it seems not not work. Here is the js I'm an trying to use:

$(".claim").change(function() {
    $(".area").find(".field").remove();
    //or
    $('.area').remove('.field');
    if ($(this).val() == "Insurance") {
        $(".area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");

    }
    if ($(this).val() == "Damage &lt;$100") {
        $(".area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");

    }
});

and here is the html dropdown box:

<div id="area" class="area">

    <strong>Cases:</strong><input name="cases" type=text  placeholder="Cases ID" maxlength="7" style="width:129px;">
    <br />
    <strong>Claim:</strong>
    <select class="claim" id="claim" name="claim"> 
    <option value="">Select a Claim</option>
    <option value="Insurance">Insurance</option>  
    <option value="Warrenty">Warrenty</option>
    <option value="Damage &lt;$100">Damage &lt;$100</option>
    </select>

I have attempted to edit the Javascript and a few other things but none seem to work. I am guessing its something that is simple but I am unsure about using Javascript at this moment so any help would be great.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Use

$(this).val() == "Damage <$100"

instead of

$(this).val() == "Damage &lt;$100"

DEMO

Note

You're comparing string so not need any special character.

Some more

Instead of $(this).val() use this.value, would be faster.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 8, 2012 at 3:37

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

7 Comments

Matthew Over a year ago

i have attempeted to use the code u used in the demo and i noticed once i placed it with the rest of my jquery code the Inserance code would would work not the one for damge <100... any idea why this might be

thecodeparadox Over a year ago

@Matthew that means above code is not working? is it possible to post your whole jQuery code in fiddle?

Matthew Over a year ago

what do u mean make a find replace operation? and yes tis quite a fair bit of code

Matthew Over a year ago

jsfiddle.net/matth4ck3r/p22Y7 here is the link but for some reason it seems to work once its placed in jsfiddle but on my machine it will not work

thecodeparadox Over a year ago

@Matthew It seems your code is just working fine. So where is the issue?

|

Collectives™ on Stack Overflow

Javascript to create text field with dropdown menu options

1 Answer 1

Note

Some more

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Note

Some more

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related