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;
}

</ br> should be <br /> and an input field without a name isn't submitted to the server — Andreas
– Andreas, Commented Sep 3, 2015 at 15:43

Jamal · Accepted Answer · 2015-09-20 16:49:05Z

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.

edited Sep 20, 2015 at 16:49

Jamal

7717 gold badges22 silver badges32 bronze badges

answered Sep 3, 2015 at 15:55

Khalil Laleh

1,23811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AMorton1989 Over a year ago

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 Over a year ago

Whats your browser? Do you have an online version to check it out? I applied your CSS but still it is working.

Khalil Laleh Over a year ago

It seems you left this question. Please don't forget to mark as accepted answer, if your problem solved!!!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related