Question

这是一个初学者。我正在处理一个表单，用户在表单中选择一个选项并单击该按钮。在后端将执行一些操作，结果将是一些将在表单中完全显示的文本。这是我的代码：

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

actionpage.php的代码如下：

<?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>

现在的问题是，表单中出现的文本（执行操作后）没有正确地放在表单中。一些文字从左侧出现在表格旁边。

我感谢任何建议，代码示例和指导。

Answer 1

您的ajax引用了表单的错误ID。

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

其次，您的ajax将文本放入#output的ID，但没有HTML具有您发布的ID。

这是一个带有工作样本的CodePen。希望它能解决您面临的奇怪宽度问题。

表单的CSS问题

1 个答案: