data-bind multiple text boxes to display in one text box

Question

I'm using a Kendo edit box that a user can enter the different parts of a SQL connection string (server name, database, user name and password). I also have a text box that will show the user the entire connection string as they type.

My question is how can I data-bind each of the four text boxes (server, database, user and password) to one text box as the user enters data into each one.

Also, the user requested seperate fields.

Thanks in advance, Dan Plocica

Answer 1

Doing it using Kendo UI would be:

HTML:

<div id="form">
    <label>Server : <input type="text" class="k-textbox" data-bind="value: server"></label><br/>
    <label>Database : <input type="text" class="k-textbox" data-bind="value: db"></label><br/>
    <label>User : <input type="text" class="k-textbox" data-bind="value: user"></label><br/>
    <label>Password : <input type="password" class="k-textbox" data-bind="value: password"></label><br/>

    <div id="connections" data-bind="text: connection"></div>
</div>

JavaScript:

$(document).ready(function () {
    var model = kendo.observable({
        server    : "localhost:1521",
        db        : "database",
        user      : "scott",
        password  : "tiger",
        connection: function () {
            return this.get("user") + "/" +
                    this.get("password") + "@" +
                    this.get("server") + ":" +
                    this.get("db");
        }
    });
    kendo.bind($("#form"), model);
});

In the HTML there are two parts:

1. The input files where I define each input to what field it is bound in my model.
2. A div where I found its text to connection function in my model that creates a string from the different values.

This is automatically updated and you can freely edit each input.

You might decorate the input as I did setting it's CSS class to k-textbox , that's optional. The only important thing is the data-bind="value : ..." .

The JavaScript, is just create and Observable object with the fields and methods that we want.

Running example here: http://jsfiddle.net/OnaBai/xjNMf/

Answer 2

I will write solution using jQuery JavaScript library, and you should use jQuery because its much easier and easier to read and also to avoid errors in different browsers.

**HTML**
Server: <input type="text" id="server"/><br/>
Database: <input type="text" id="database"/><br/>
Username: <input type="text" id="username"/><br/>
Password: <input type="text" id="password"/><br/>
<br/>
Full CS: <input type="text" id="solution"/><br/>

JS

<script type="text/javascript">
   var _template = 'Data Source=%server%;Initial Catalog=%db%;Persist Security Info=True;User ID=%user%;Password=%pass%';

   $(document).ready(function(){
       $('#server,#database,#username,#password').keyup(function(){ updateSolution();});

    });
     function updateSolution(){
      var _t = _template.replace('%server%', $('#server').val()).replace('%db%', $('#database').val()).replace('%username%', $('#username').val()).replace('%pass%', $('#password').val());

       $('#solution').val(_t);
     };
</script>