How to do concatenation in html.

Hi. I have to concatenate two things in HTML, please assist me that how do i do it?

HTML? Do you mean Javascript??

+ works - did you try it and have a problem?

If you are trying to put a "1" and "2" together - and you have them in two variables you might try

String(varA) + String(varB);

lets suppose if i write the code that
username: <input type = "text"></br>
password: <input type = password> right.

when i run the code in browser so both the textboxes are not in equal alignment.

can't we have some concatenation operation as we have in php or vb.net to add space? did you get my idea?

I have no idea what you mean.

If you mean both of the textboxes aren't on the same line, it is because you put a <br /> in there to drop the second box to the 2nd line. Remove it and they will be on the same line.

If you mean you want to style them the same, then you can give them a class (class="blah") and use css to style that class the same.

If you mean that having "username" and password" beside the textboxes pushes one so they're not directly above each other, you can either wrap the text in a span tag (<span class="blah">Username</span>) and style that with a width, or you can use a table to align them properly.

I vote for SPAN - works really well for me.

Here are span's styling I use

Code:

---

<div id="dlgLogin">
  <p><span class="acs-span-medium">Username </span><input type="text" id="acs-username" class="acs-edit-medium-text"/></p>
  <p><span class="acs-span-medium">Password </span><input type="password" id="acs-password" class="acs-edit-medium-text"/></p>
  <p><label id="acs-login-error"></label></p>
</div>

---

Code:

---

.acs-span-small
{
    display: inline-block;
    width: 50px;
    text-align: right;
}
.acs-span-msgmedium
{
    padding-left: 30px;
}
.acs-span-medium
{
    display: inline-block;
    width: 60px;
    text-align: right;
}
.acs-span-large
{
    display: inline-block;
    width: 75px;
    text-align: right;
}
.acs-span-xlarge
{
    display: inline-block;
    width: 90px;
    text-align: right;
}

.acs-span-radio-left-small
{
    display: inline-block;
    text-align: left;
    width: 50px;
}

.acs-span-radio-right-small
{
    display: inline-block;
    text-align: right;
    width: 50px;
}

.acs-span-radio-left-medium
{
    display: inline-block;
    text-align: left;
    width: 75px;
}

.acs-span-radio-right-medium
{
    display: inline-block;
    text-align: right;
    width: 75px;
}

.acs-span-radio-left-large
{
    display: inline-block;
    text-align: left;
    width: 100px;
}

.acs-span-radio-right-large
{
    display: inline-block;
    text-align: right;
    width: 100px;
}

.acs-span-radio-left-xlarge
{
    display: inline-block;
    text-align: left;
    width: 150px;
}

.acs-span-radio-right-xlarge
{
    display: inline-block;
    text-align: right;
    width: 150px;
}

.acs-span-heading
{
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
}

.acs-span-textprompt
{
    vertical-align: top;
    font-weight: bold;
}

---

Yea i am also agree with span, and i was meant to ask about, please please you tell me that what is
acs-span-medium?

The correct element to use is label:

HTML Code:

---

<form>
  <p>
    <label for="username-input">Username</label>
    <input type="text" name="username" id="username-input" />
  </p>
  <p>
    <label for="password-input">Password</label>
    <input type="password" name="password" id="password-input" />
  </p>
</form>

---

The for attribute of the label is an accessibility feature; it allows the user agent to match label and input element pairs and give them appropriate behaviours. (For example, in most browsers, the input element will gain focus if its associated label is clicked.)
Note that the for attribute corresponds to the id of the input element, not its name; this is because multiple input controls can have the same name (such as radio buttons).

For some examples of styling forms (including aligning labels), take a look at this article:
Applying CSS to forms

Quote:

---

Originally Posted by szlamany

Code:

---

<div id="dlgLogin">
  <p><span class="acs-span-medium">Username </span><input type="text" id="acs-username" class="acs-edit-medium-text"/></p>
  <p><span class="acs-span-medium">Password </span><input type="password" id="acs-password" class="acs-edit-medium-text"/></p>
  <p><label id="acs-login-error"></label></p>
</div>

---

---

Strictly speaking, this is a misuse of the label markup. Instead, I would use the final paragraph element to display the error message, without a label element. In fact, I would go further and add the elements containing the error message at run-time, at the point when it needs to be shown.

@adqusit - .acs-span-medium is the CSS style element that you see in my post...

I recall having problems with labels - if empty they take no space? Span's worked better for me throughout the page work I've done. But not a lot of thought went into the login div I've got - I think I actually ripped it from some jQuery thread I found somewhere...

For what it's worth that gets put into a jQuery modal dialog pop up - code below - and images below. If I'm going to put something into some jQuery UI widget I prefer to have it contain all the elements it needs prior to calling the UI method...

I put a spinner-animation in the label - then either clear it or put up the log in failure message...

Code:

---

$(document).ready(function() {
    $('#dlgLogin').dialog({ title: 'Log in', modal: true, closeOnEscape: false
          , buttons: { 'Log in': function() { loginClick(this) } } });
.
.
.
function loginClick() {
    if (!g_blnInLogin) {
        g_blnInLogin = true;
        var strUN = $("#acs-username").val();
        var strPW = $("#acs-password").val();
        $("#acs-login-error").html('<img src="Images/ajax-loader-small.gif" />');
        ctrlWebService("login", strUN, strPW, "");
    }
}

---

And this call back function runs after the ajax for the login returns

Code:

---

function ajaxCtrlFinished(msg, strWho, objOptions) {
    var objReturn = $.parseJSON(msg.d);
.
.
.
    if (objReturn.login) {
        g_blnInLogin = false;
        if (objReturn.success) {
            $("#acs-login-error").html("");
            $("#acs-binder-info").html('Web Request...<img src="Images/ajax-loader-small.gif" />');
            objWebParam.ObText = strUN;
            objWebParam.username = window.username || "";
            var strWebParam = $.toJSON(objWebParam);
            $.ajax({
                type: "POST",
                url: "WebService.asmx/BootPage",
                dataType: "json",
                data: strWebParam,
                contentType: "application/json; charset=utf-8",
                success: function(msg) {
                    ajaxFinished(msg, "bootpage", objWebParam);
                },
                failure: function(msg) {
                    ajaxFinished(msg, "failure", objWebParam);
                },
                error: function(msg) {
                    ajaxFinished(msg, "error", objWebParam);
                }
            });
            $('#dlgLogin').dialog('close');
        } else {
            $('#acs-login-error').html(objReturn.message);
        }

---