Add/Remove an input field using javascript

Question

I am working on an alert button that gets generated depending on a select drop-down. The JavaScript has been able to read and send the values of the <select> drop-down exactly as I want it to. But, when it comes to displaying the button that triggers the alert message, is my problem.

ISSUES

-- I am not too sure if I am actually removing the child correctly (syntax issue)

-- I can't seem to get the button to display. Instead, it only performs its onclick command.

JAVASCRIPT

function displayInfo(key) {
    alert(key);
}

function determineDisplay(Item, ButtonLocation) {
    // Get selected value from drop down
    var si = Item.selectedIndex;
    var sv = Item.options[si].value;

    // Create View Button to display info
    var VB = document.createElement("input");

    // Assign attributes to button
    VB.setAttribute("type", "button");
    VB.setAttribute("value", "view");
    VB.setAttribute("display", "inline-block");
    VB.onClick = displayInfo(sv);

    // Insert button
    var insertHere = document.getElementsById(ButtonLocation);
    var CheckChild = insertHere.lastChild;
    if(lastChild) {
        insertHere.removeChild(CheckChild);
        insertHere.appendChild(VB);
    }
    else
        insertHere.appendChild(VB);
 }

HTML

<div id="SoupBox">
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
        <option>--Select--</option>
<?php foreach($soup_products as $key => $product) :
$name = $product['name']; $cost = number_format($product['cost'], 2);
$item = $name . ' ($' . $cost . ')';
?>
        <option value="<?php echo $key; ?>"><?php echo $item; ?></option>
<?php endforeach; ?>
    </select>
    <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
    <label id="contentView_Two"></label>

</div>

HTML WITHOUT PHP

<div id="SoupBox">
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
        <option>--Select--</option>
        <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option>
        <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option>
        <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option>
        <option value="ND-BF">Ramen beef Noddles ($0.50)</option>
        <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option>
        <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option>
        <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option>
    </select>
    <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
    <label id="contentView_Two"></label>

</div>

I can't located your modifications in the code. And also the alert massage happens before the button display. — user2337345
– user2337345, Commented May 4, 2013 at 21:10

Sebas · Accepted Answer · 2013-05-04 21:17:47Z

1

Different problems here:

VB.setAttribute("display", "inline-block"): this is wrong, because the display attribute is from the style of the element, not of the element itself. Use VB.style.display instead.
VB.onClick = displayInfo(sv): this is wrong, because what you're doing here is executing the function right away. You probably meant VB.onclick = function() { displayInfo(sv); }

Also, you could try adding the following styles attributes:

VB.style.position = 'absolute';
VB.style.left = '5px';
VB.style.top = '5px';
VB.style.width = '50px';
VB.style.height = '20px';

Otherwise I'm not sure how js would render it.

edited May 4, 2013 at 21:17

answered May 4, 2013 at 21:01

Sebas

21.6k9 gold badges60 silver badges109 bronze badges

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

5 Comments

Robin Manoli Over a year ago

VB.style.display = "inline-block"

user2337345 Over a year ago

new lines VS.style.display = "inline-block"; VB.onClick = function() {displayInfo(sv);}; but it doesn't seem to fix the issue. @Sebas I also tried the 3. suggestion you put and that didn't do the trick either.

user2337345 Over a year ago

@Sebas I've found this online text-editor link and it says there is a missing semicolon on the code. Could post your 3rd suggestion again so I could look up the handler's syntax.

user2337345 Over a year ago

ahh Never mind, fixed it, VB.onClick = function(p) { return function(){ displayInfo(p);};}(sv);

Sebas Over a year ago

yeah that 3rd point was not so important. Does the big picture works now?

user2337345 · Accepted Answer · 2013-05-04 21:44:55Z

fixed it, thank you all for the help.

JavaScript

function displayInfo(key) {
    alert(key);
}

function determineDisplay(Item, ButtonLocation) {
    // Get selected value from drop down
    var si = Item.selectedIndex;
    var sv = Item.options[si].value;

    // Create View Button to display info
    var VB = document.createElement("input");

    // Assign attributes to button
    VB.setAttribute("type", "button");
    VB.setAttribute("value", "view");
    VB.setAttribute("display", "inline-block");
    VB.onclick = function() { displayInfo(sv);};

    // Insert button
    var insertHere = document.getElementById(ButtonLocation);
    var CheckChild = insertHere.lastChild;
    if (CheckChild) {
        insertHere.removeChild(CheckChild);
        insertHere.appendChild(VB);
    }
    else
        insertHere.appendChild(VB);
 }

HTML WITHOUT PHP

<div id="SoupBox">
                <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
                    <option>--Select--</option>
                                            <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option>
                                            <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option>
                                            <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option>
                                            <option value="ND-BF">Ramen beef Noddles ($0.50)</option>
                                            <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option>
                                            <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option>
                                            <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option>
                                        </select>
                <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
                <label id="contentView_Two"></label>

                </div>

Collectives™ on Stack Overflow

Add/Remove an input field using javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related