form and input fields not functioning correctly using .append()

Question

I am attempting to append a form to the body of my document within my .js file. I press a button 'Proceed' and the form appears. The form is displaying correctly on screen, however the input field is not allowing for text input.

$(document).ready(function() {
 $('body').append('<div id="checkout"><button id="checkout2">Proceed </button></div>');
 $('#checkout').one('click', function(e) {
 $('body').html(
 '<div id="payarea"><h1 size="50"><u>Checkout</u> </h1></ br>' +
 '<form method="post" action="nav.html" >' +
 '<table width=518 border="0" cellpadding="0" cellspacing="0" >' +
 '<tr> ' +
 '<td height="22" colspan="3" align="center" ><strong>Billing Information </strong></td>' +
 '</tr>'+
 '<tr> '+
 '<td height="22" width="180" align="right" >Full name:</td>'+
 '<td colspan="2" align="left"><input type="text" size="50"></td>'+
 '</tr>'+
 '</table>'+
 '<input id="payment1" type="submit" value="Send name">'+
 '</form>'+
 ' </div>');
 });
});

The css.

input:not([type]) {
 padding: 1px 0px;
}
user agent stylesheetinput {
 -webkit-appearance: textfield;
 padding: 1px;
 background-color: white;
 border: 2px inset;
 border-image-source: initial;
 border-image-slice: initial;
 border-image-width: initial;
 border-image-outset: initial;
 border-image-repeat: initial;
 -webkit-rtl-ordering: logical;
 -webkit-user-select: text;
 cursor: auto;
}
user agent stylesheetinput {
 margin: 0em;
 font: normal normal normal normal 13.3333330154419px/normal Arial;
 text-rendering: auto;
 color: initial;
 letter-spacing: normal;
 word-spacing: normal;
 text-transform: none;
 text-indent: 0px;
 text-shadow: none;
 display: inline-block;
 text-align: start;
}
user agent stylesheetinput {
 -webkit-writing-mode: horizontal-tb;
}

• Andreas: </ br> should be <br /> and an input field without a name isn't submitted to the server

Answer 1

I implement your code in jsfiddle.

HTML

<div id="checkout"><button id="checkout2">Proceed </button></div>

jQuery

$(document).ready(function() {
 $('#checkout').one('click', function(e) {
 $('body').html(
 '<div id="payarea"><h1 size="50"><u>Checkout</u> </h1></ br>' +
 '<form method="post" action="nav.html" >' +
 '<table width=518 border="0" cellpadding="0" cellspacing="0" >' +
 '<tr> ' +
 '<td height="22" colspan="3" align="center" ><strong>Billing Information </strong></td>' +
 '</tr>'+
 '<tr> '+
 '<td height="22" width="180" align="right" >Full name:</td>'+
 '<td colspan="2" align="left"><input type="text" size="50"></td>'+
 '</tr>'+
 '</table>'+
 '<input id="payment1" type="submit" value="Send name">'+
 '</form>'+
 ' </div>');
 });
});

The input field is allowing to text input, so there's no problem, unless there was other code to make the input field read-only or disabled. Right-click on your element and use Inspect Element to see field properties.

• AMorton1989: Thanks, I had a look at the css properties on the page, and I can't seem to find anything to suggest the fields are disabled. I'll paste the css properties above.
• Khalil Laleh: Whats your browser? Do you have an online version to check it out? I applied your CSS but still it is working.
• Khalil Laleh: It seems you left this question. Please don't forget to mark as accepted answer, if your problem solved!!!