表单的CSS问题

Question

a beginner here. I am dealing with a form that the user chooses an option in a form and clicks on the button. In the back end some actions will be performed and the result will be some text that will appear EXACTLY inside the form. Here is my code:

  <form name="my_form" id="input" style = "background-color: #e1dddd; padding: 10px; border-radius: 5px;" action="actionpage.php" method="post">
        <div class="row" id="output">            
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <label>Title of the form</label><br><br>                 
                      <label>Choose a functionality</label><br>
                      <select name="message">
                            <option value="functionality 1">Choose One</option>
                            <option value="functionality 2">Choose One</option>
                      </select><br>
                      <button type="initiate" name="" id="" value="Initiate" class="btn btn-primary btn-lg">Initiate</button>
                    </div>
                </div>
            </div> 
        </div>
    </form>

<script type="text/javascript"> //this is to stop the form to go to another page

    $(document).ready(function () {
        $('#my_form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url : $(this).attr('action') || window.location.pathname,
                type: "GET",
                data: $(this).serialize(),
                success: function (data) {
                    $("#output").html(data);
                },
                error: function (jXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });
    });
    </script> 

And the actionpage.php has below code:

<?php
//some action happening here.
?>

<form name="my_form2" id="" style = "background-color: #e1dddd; padding: 10px; border-radius: 5px;" action="" method="post">
    <div class="row">            
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <label>Text will appear here.</label><br>
                  <label>Text will appear here.</label><br>      
                  <label>Text will appear here.</label><br>
                </div>
            </div>
        </div> 
    </div>
</form>

Now the problem is that the text that will appear inside the form (after performing the actions) is not sitting properly in the form. Some of the text goes out side the form from left side.

I appreciate any suggestion, code sample and guidance.

Answer 1

Your ajax is referencing the wrong id for your form.

<!-- notice your id is input. In your ajax it is using my_form -->
<form name="my_form" id="input" 

Secondly your ajax is putting the text in an id of #output, but no HTML has that id that you posted.

Here is a CodePen with a working sample. Hopefully it solves the weird width issue you are facing.