Jquery append and remove methods inside Ajax success function

Abdul Rehman Source

I'm working on a python project, In which I have two forms on a single HTML template. The first form takes user id and password and loads a text file inside HTML Form element along appended some input elements. After that user will fill the appended form and submit it again. What do I need? When a user submits the second form the text file has been loaded in the result of the first form should be removed from the template.

Here's what I have tried:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Descriptions</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="/static/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <script src="/static/underscore.js" type="text/javascript"></script>
    <style>
        .form-check {
            display: inline;
        }
    </style>
</head>
<body>
<h1>Descriptions </h1>
<div class="container">
    <form method="POST" id="textForm" action="">
        <input type="text" name="uid" id="uid" placeholder="User id"/>
        <input type="password" name="upass" id="upass" placeholder="User password"/>
        <input type="number" name="fid" id="fid" hidden value="0"/>
        <button class="btn btn-primary btn-lg" type="submit"> Load Data</button>

    </form>
    <form method="POST" id="submitDataForm" action="">
        <button class="btn btn-primary btn-lg" type="submit"> Submit</button>
    </form>
</div>
<script>
    $(document).ajaxStart(function () {
        var value;
        console.log('Ajax started!');
        if ($('#fid').value = 0) {
            value = document.getElementById('fid').value;
        $('#fid').attr('value', value);
    }
    else {
        value = parseInt(document.getElementById('fid').value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        $('#fid').attr('value', value);
        console.log(value);
    }
    });
    $(document).on('submit', '#textForm', function (e) {
        e.preventDefault();
        $.ajax({
            url: '/login',
            type: 'POST',
//            contentType: false,
            data: {
                uid: $('#uid').val(),
                upass: $('#upass').val(),
                fid: $('#fid').val()
            },
            success: function (data) {
                console.log('Login successfully!');
                console.log(data);
                var dobj = JSON.parse(data);
                console.log(_.size(dobj));
                var lines_length = _.size(dobj);
                // Load and append the text file to the second form element.
                for (var i in dobj) {
                    console.log(dobj[i]);
                    console.log(i);
                     $('#submitDataForm').append(
                     '<br><input type="text" value="' + dobj[i] + '" name="' + i + '" style="width: 100%"/><br>' + '<label>\n' +
                      '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="description_' + $("#fid").val() + '" value="description" required><span class="label-text">Description</span>\n' +
                       '</label>' + '<label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="input_' + $("#fid").val() + '" value="input" required><span class="label-text">Input</span>\n' +
                        '</label>' + '<label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="output_' + $("#fid").val() + '" value="output" required><span class="label-text">Output</span>\n' +
                        '</label>' + '<label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="example_input_' + $("#fid").val() + '" value="ex_input" required><span class="label-text">Example Input</span>\n' +
                        '</label>' + '<label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="example_output_' + $("#fid").val() + '" value="ex_output" required><span class="label-text">Example Output</span>\n' +
                        '</label>' + '<label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="misc_' + $("#fid").val() + '" value="misc" required><span class="label-text">Misc</span>\n' +
                        '</label>\n' +
                        '<input type="radio" name="type_' + $('#fid').val() + '_' + i + '" id="constraints_' + $("#fid").val() + '" value="constraints" required><span class="label-text">Constraints</span>\n' +
                        '</label>\n' +
                        '<input type="text" name="userId" id="userId" value="' + $('#uid').val() + '" hidden/>' +
                        '<input type="text" name="fid" id="pageId" value="' + $('#fid').val() + '" hidden/>' +
                        '<input type="text" name="lineNumber" value="' + i + '" hidden/>' +
                        '<input type="text" name="total_lineNumber" value="' + lines_length + '" hidden/>'
                );
            }
                $(document).on('submit', '#submitDataForm', function (e) {
                    e.preventDefault();
                    var fid = $('#fid').val();
                    var data = new FormData($('#submitDataForm').get(0));
                    $.ajax({
                        url: '/data',
                        method: 'POST',
                        data: $('#submitDataForm').serialize(),
                        success: function (data) {
                            console.log('Data submitted successfully');
                            // after submitting the second form successfully the appended elements should be disapeared
                            // But when i again click on load data it load second text file below the first one.
                            //I only need one file at a time.
                            console.log(data);
                        }
                    })
                });
            }
        })
    })
</script>
</body>
</html>

What I want to achieve?

I need to load various text files from a directory one by one.When a user clicks on load data the first file should be loaded in the browser, the user fills out the appended form and submit the data when the user hit submit button then the previous file should be disappeared and next file should appear.

Help me, please!

Thanks in advance!

javascriptpythonjquerypython-3.xjquery-append

Answers

comments powered by Disqus