8 Replies - 728 Views - Last Post: 23 March 2016 - 08:42 AM

#1 daredavel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 26-January 16

Check Box to agree before login

Posted 22 March 2016 - 08:44 AM

It's my first time using XHTML 1.0 and would like to incorporate a checkbox that will enable or disable the "login" button if the user doesn't tick the checkbox to agree and enable the button when the box is tick. However, I seem to lack something or I'm doing entirely wrong. Here's what I have so far:

<td>
  <input style="width: 80px" name="username" type="text" value="$(username)" />
</td>
</tr>
<tr>
  <td align="right" class="style6">Password</td>
  <td>
    <input style="width: 80px" name="password" type="password" />
  </td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>
    <input type="submit" name="submit" value="Login" />
  </td>
</tr>
</table>


<div class="notice" style="color: #c1c1c1; font-size: 12px">
  <br />
  <input type="checkbox" name="checkbox" value="check" id="agree" />I agree to the statement above.
  <br />
</div>


Sadly the "required" attribute doesn't work in XHTML 1.0, could have sold my problem right away:
 <div class="notice" style="color: #c1c1c1; font-size: 12px"><br />
    <input type="checkbox" name="checkbox" value="check" id="agree" onclick="agree()"  required/> I agree to the statement above.
    <br q v/>
  </div>


Is This A Good Question/Topic? 0
  • +

Replies To: Check Box to agree before login

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4278
  • View blog
  • Posts: 13,562
  • Joined: 08-June 10

Re: Check Box to agree before login

Posted 22 March 2016 - 08:51 AM

Quote

Sadly the "required" attribute doesn't work in XHTML 1.0

no-one today uses XHTML (besides that, there are no standalone attributes in XHTML). better use HTML5.

you could use XHTML5 but then you must serve the document as application/xhtml+xml, otherwise browsers switch into quirks mode (except IE, which will not work with XHTML at all).
Was This Post Helpful? 0
  • +
  • -

#3 daredavel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 26-January 16

Re: Check Box to agree before login

Posted 22 March 2016 - 09:07 AM

I see. So there's no way I can make it done using xhtml?

This post has been edited by Dormilich: 22 March 2016 - 09:15 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4278
  • View blog
  • Posts: 13,562
  • Joined: 08-June 10

Re: Check Box to agree before login

Posted 22 March 2016 - 09:17 AM

if you want to work with XHTML 1.0 you should use the application/xhtml+xml Content-Type header and then decide, whether you still want to work with XHTML. if you’re not using that header, you’re working with HTML (at least in browsers) and then you can use any attribute you like.
Was This Post Helpful? 0
  • +
  • -

#5 daredavel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 26-January 16

Re: Check Box to agree before login

Posted 22 March 2016 - 09:36 AM

View PostDormilich, on 22 March 2016 - 09:17 AM, said:

if you want to work with XHTML 1.0 you should use the application/xhtml+xml Content-Type header and then decide, whether you still want to work with XHTML. if you’re not using that header, you’re working with HTML (at least in browsers) and then you can use any attribute you like.


Can you point me where I can do that or do I have to redo everything? I'm using microsoft expression web. Thank you
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4278
  • View blog
  • Posts: 13,562
  • Joined: 08-June 10

Re: Check Box to agree before login

Posted 22 March 2016 - 09:39 AM

if you don’t use a server-side language, just use the file extension .xhtml for your file. otherwise use that language’s functions/methods/whatever that sets the response’s MIME headers.
Was This Post Helpful? 0
  • +
  • -

#7 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: Check Box to agree before login

Posted 22 March 2016 - 05:42 PM

I haven't used xhtml in a while. XHTML is not that different from HTML, so if you are looking to convert, there are only small changes to make.

I would do the route of hiding the submit button until the checkbox is checked.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4278
  • View blog
  • Posts: 13,562
  • Joined: 08-June 10

Re: Check Box to agree before login

Posted 23 March 2016 - 01:11 AM

View Postastonecipher, on 23 March 2016 - 01:42 AM, said:

XHTML is not that different from HTML

objection! XHTML uses strict error handling (same as XML), so any error would cause a YSoD. if that’s not the case, then the document is parsed as HTML and the errors are ignored /1/.


1 - while usually not a problem, some tags can cause significant problems:
* <script src=""/> => missing </script> tag in HTML, usually breaks everything if the script tag is in the header
* <div/> => missing </div> in HTML and not auto-closed before the next block element. can cause layout hiccups, since an unintended div layer is inserted
Was This Post Helpful? 0
  • +
  • -

#9 dday9   User is offline

  • D.I.C Regular

Reputation: 95
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Check Box to agree before login

Posted 23 March 2016 - 08:42 AM

I do not use XHTML rather I use HTML5, but since you're not able to use the required attribute my first thought is to disable the submit button and toggle the disabled property based on if the checkbox is checked or not. Take a look at this example:
<body>
  <form>
    <input id="txtUsername" placeholder="Username" type="text" />
    <input id="txtPassword" placeholder="Password" type="password" />
    <input id="btnSubmit" disabled="disabled" type="submit" value="Login" />
    <input id="cbAgreement" type="checkbox" />I agree to the statement above.
  </form>  
</body>

form input[type="text"], form input[type="password"], form input[type="submit"] {
  display: block;
}

form input[type="text"], form input[type="password"] {
  width: 80px;
}

window.onload = function() {
	document.getElementById("cbAgreement").onchange = cbAgreement_CheckChanged;
}

function cbAgreement_CheckChanged() {
	document.getElementById("btnSubmit").disabled = !(this.checked);
}


Fiddle: http://codepen.io/anon/pen/WwjEoE
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1