问题与表单的CSS

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

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

现在的问题是，将出现在表格内（执行的操作之后）的文本没有坐正确的形式。一些文字从左侧的形式出现。

我很欣赏任何建议，代码示例和指导。

来源

2014-12-19 Irfana

除了内嵌样式外，您还有其他任何CSS吗？请张贴样式。 – ZombieCode 2014-12-19 05:02:32

@僵尸代码我还没有任何CSS，但我不知道我可以使用什么CSS强制文件文本坐在彩色表单中。 – Irfana 2014-12-19 05:18:11

您可以通过检查元素来检查它。 – 2014-12-19 05:20:38

您的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。希望它能解决你所面临的奇怪的宽度问题。

来源

2014-12-20 21:04:57 ZombieCode

谢谢，现在解决了。 – Irfana 2015-01-17 08:26:00

问题与表单的CSS

回答

相关问题