How to make text box uneditable?

fieryscream

I have an address form that user fills out
and whent they click same as above it fills out the postal address
how do i make the postal address non editable once the user clicks the same as above box?

Expand|Select|Wrap|Line Numbers

 function sameaddress()

{

    document.getElementById("st1").value=document.getElementById("street1").value;

    document.getElementById("st2").value=document.getElementById("street2").value;

    document.getElementById("st3").value=document.getElementById("street3").value;

    document.getElementById("city2").value=document.getElementById("city").value;

    document.getElementById("country2").value=document.getElementById("country1").value;

}

HTML

Expand|Select|Wrap|Line Numbers

 <p align="left" class="style1">Physical Address:</p>

    <p align="left" class="style1">Street

      <input name="street1" type="text" value="" size="30" id="street1" />

    </p>

    <p align="left"> <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <input name="street2" size="30" maxlength="15" value="" type="text" id="street2" />

    </span></p>

    <p align="left"> <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <input name="street3" size="30" maxlength="15" value="" type="text" id="street3" />

    </span></p>

    <p align="left" class="style1">City 

      &nbsp;&nbsp;&nbsp;

        <input name="city" size="30" maxlength="15" value="" type="text" id="city" />

    </p>

    <p align="left" class="style1">Country

      <select name="country1" id="country1">

          <option>NZ</option>

          <option>AU</option>

          <option>UK</option>

          <option>US</option>

        </select>

    </p>

    <p align="left" class="style1">Postal Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <label>Same as above

          <input name="abovebox" type="checkbox" onClick="sameaddress()" />

      </label>

    </p>

    <p align="left" class="style1">Street

      <input name="st1" type="text" value="" size="30" id="st1" />

    </p>

    <p align="left"> <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <input name="st2" size="30" maxlength="15" value="" type="text" id="st2" />

    </span></p>

    <p align="left"> <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <input name="st3" size="30" maxlength="15" value="" type="text" id="st3" />

    </span></p>

    <p align="left" class="style1">City 

      &nbsp;&nbsp;&nbsp;

        <input name="city2" size="30" maxlength="15" value="" type="text" id="city2" />

    </p>

    <p align="left" class="style1">Country

      <select name="country2" id="country2">

          <option>NZ</option>

          <option>AU</option>

          <option>UK</option>

          <option>US</option>

        </select>

    </p>

fieryscream

absolute legend if anyone can get it to work!

Dormilich

what about setting the disabled property?

besides that a label should not include the input element.

Expand|Select|Wrap|Line Numbers

 <label for="inp_id">label text for input field</label>

<input id="inp_id" …>

right alignment can als be achieved by CSS (float: right), no need to use spaces (there are more or less complex layouts available, search for form, css, layout)

Frinavale

An example of what Dormilich is talking about:

Expand|Select|Wrap|Line Numbers

 function sameaddress()

{ document.getElementById("st1").value=document.getElementById("street1").value;

     document.getElementById("st2").value=document.getElementById("street2").value;

  document.getElementById("st3").value=document.getElementById("street3").value;

  document.getElementById("city2").value=document.getElementById("city").value;

  document.getElementById("country2").value=document.getElementById("country1").value;

  document.getElementById("country1").disabled = true;

}

fieryscream

yup cool that was gold!~

how do i make when unchecked then the boxes then become blank again?

Dormilich

set their value to "".

_________

How to make text box uneditable?

re: How to make text box uneditable?

re: How to make text box uneditable?

re: How to make text box uneditable?

re: How to make text box uneditable?

re: How to make text box uneditable?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about