Home/ Questions/Q 3399908
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T04:49:42+00:00

There is an address book that already has contacts. That is why the open

  • 0

There is an address book that already has contacts. That is why the open contacts link is on the page when it loads. If the user does not want to add a current contact to populate these fields then once they have supplied data to the fields I want the add to contacts button to appear. Would a setInterval function be appropriate to check to see if the user is entering new data into these input fields? If so how would I write the dojo code?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        SAP
    </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">

        dojo.addOnLoad(function(){ 
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.TextBox");
        });

    </script>
    <style type="text/css">
        #prelims {
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 5px
        }

        #addToContacts {
            position: relative;
            float: left;
            display: none;
        }

        #nameWrap {
            position: relative;
            clear: left;
        }

    </style>
</head>
<body>
    <form>
        <div id="prelims" class="checksVertical">
            <span id="" class="button-link pill-btn">
                <span class="hasHover">
                    <a id="open-contacts" class="buttons" target="" href="#">
                        Open Contacts
                    </a>
                </span>
            </span>
        </div>
        <div id="addToContacts" class="checksVertical">
            <span class="button-link pill-btn">
                <span class="hasHover">
                    <div id="addNewContact" class="hide">
                        <form method="post" id="addContactHide">
                            <input class="buttons" id="addContact" type="submit" value="Add Contact" /><input type="hidden" id="hiddenFName" name="tFName" value=""/><input type="hidden" id="hiddenLName" name="tLName" value=""/><input type="hidden" id="hiddenCompany" name="tCompany" value""/>
                        </form>
                    </div>
                </span>
            </span>
        </div>
        <div id="nameWrap">
            <div class="input-inline">
                <label id="for-tFName" for="tFName">
                    <span class="required">
                        *
                    </span>First Name
                </label>
                <div class="input-text-wrapper input-text-lg">
                    <span class="input-cap-left">
                    </span>
                    <span class="input-field">
                        <input type="text" id="tFName" name="tFName" maxlength="50" />
                    </span>
                    <span class="input-cap-right">
                    </span>
                </div>
            </div>
            <div class="input-inline last">
                <label id="for-tLName" for="tLName">
                    <span class="required">
                        *
                    </span>Last Name
                </label>
                <div class="input-text-wrapper input-text-lg">
                    <span class="input-cap-left">
                    </span>
                    <span class="input-field">
                        <input type="text" id="tLName" name="tLName" maxlength="50" />
                    </span>
                    <span class="input-cap-right">
                    </span>
                </div>
            </div>
            <div class="clearfix">
            </div>
        </div>
        <div id="tCompanyWidget">
            <label id="for-tCompany" for="tCompany">
                <span class="required">
                    *
                </span>Company Name
            </label>
            <div class="input-text-wrapper input-text-lg">
                <span class="input-cap-left">
                </span>
                <span class="input-field">
                    <input type="text" id="tCompany" name="tCompany" maxlength="50" />
                </span>
                <span class="input-cap-right">
                </span>
            </div>
        </div>
    </form>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that either onChange or onBlur events on the input fields are better to use then setInterval. Since these exists on the regular input html DOM nodes, it is not necessary to use dojo.

    Write a javascript function that can be re-used on several input fields:

    var show_add_to_contact = function(){
  dojo.byId("prelims").style.display = "none";
  dojo.byId("addToContacts").style.display = "block";
};

    Then you can either use it directly on the html DOM node:

    <input type="text" id="tFName" name="tFName" maxlength="50" onChange="show_add_to_contact();" />

    or you can assign it programmatically when creating dijit TextBox

    new dijit.form.TextBox({"onChange":show_add_to_contact,"name":"tFName"}, "tFName");
    • 0