0

私はJqueryが初めてで、このプロジェクトBootstrap html framewokとCodeIgniterに取り組んでいますが、Jqueryを使用してフォームを処理したいときはいつでも、送信/保存/ログイン/サインアップをクリックすることがわかりました(何でも) フォーム データを処理コントローラー メソッドに送信するボタン、フォーム ページがリロードし続ける、

そのように動作させるJqueryおよびJavascriptソースファイルを配置した場所であるかどうかは実際にはわかりません。

たとえば、これはコンタクトフォームを検証して処理しようとしています。送信ボタンをクリックすると、ページは静的なままになり、フォームはバックエンドで処理されます。

ここに私のコード

public function contact()
{

        $this->form_validation->set_rules('text', 'Message', 'trim|required|min_length[5]');
        $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');

        /**set error msg*/
        //$this->form_validation->set_message('required', 'Your Username Must Not Be Empty');
        $this->form_validation->set_message('min_length[5]', 'Your Message is too short!');
        $this->form_validation->set_message('valid_email', 'Please Enter A Valid E-mail Address');
        if ($this->form_validation->run() == TRUE  )
                    {
                    //the json and model for saving the feedback into db will bw placed here that will 
        }
        $data['title'] =    ucfirst('Contact Us');
        $data['currentpage'] =    'contact';
        $this->load->view('../templates/header', $data);
        $this->load->view('contact', $data);
        $this->load->view('../templates/footer', $data);
}

header.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>

<!-- Le styles --><?php
   $link = array(
          'href' => base_url().'css/bootstrap.css',
          'rel' => 'stylesheet'
);
echo link_tag($link);                                        
   $link2 = array(
          'href' => base_url().'css/main.css',
          'rel' => 'stylesheet',
          'type' => 'text/css'
);
echo link_tag($link2); 


   $link3 = array(
          'href' => base_url().'css/bootstrap-responsive.css',
          'rel' => 'stylesheet',
);
  echo link_tag($link3); 
  <script src="<?php echo base_url(); ?>js/jquery.js"></script>
  <script >
   $('#send').click(function(){
  $.ajax({
        url: '<?php echo site_url('contact');?>',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                $('#alert_div').append(output_string);
            } // End of success function of ajax form
        }); // End of ajax call 
   });
  </script>                                 
  </head>
  <body>

興味深いことに、他の JavaScript スクリプト ファイルはフッターに含まれています。

           <!-- Footer -->
 <footer>

 </footer>

<!-- Le javascript
================================================== -->

<!-- Placed at the end of the document so the pages load faster -->
<script src="<?php echo base_url(); ?>js/jquery.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-transition.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-alert.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-modal.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-dropdown.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-scrollspy.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tab.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tooltip.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-popover.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-button.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-collapse.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-carousel.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-typeahead.js"></script>
<script src="<?php echo base_url(); ?>js/prettify.js"></script>
<!-- Validate plugin -->
<script src="<?php echo base_url(); ?>js/jquery.validate.min.js"></script>
</body>
</html>

編集 contact.php ビューページの追加

<div class="container-fluid">
  <div class="row-fluid space">
    <div class="span2">


    </div><!--/span-->


    <div class="span8">
      <div class="top-page-ads">
   Our Feedback Form
      </div><!--/hero-unit-->

  <div class="file-div">
      <div class="row-fluid">
        <div class="span8" style="margin-left:10px;">
      <div id="alert-div"></div>
    <form method="POST" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="input1">Name</label>
            <div class="controls">
                <input type="text" name="contact_name" id="input1" placeholder="Your name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input2">Email Address</label>
            <div class="controls">
                <input type="text" name="contact_email" id="input2" placeholder="Your email address">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input2">Message Subject</label>
            <div class="controls">
                <input type="text" name="contact_subject" id="input3" placeholder="Your Message Subject">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input3">Message</label>
            <div class="controls">
                <textarea name="contact_message" id="input3" rows="5" class="span8"         placeholder="The message you want to send to us."></textarea>
            </div>
        </div>
        <div class="form-actions">
            <input type="hidden" name="save" value="contact">
            <button type="submit" id="send" name="send" class="btn btn-primary">Send</button>
            <button type="reset" class="btn">Clear</button>
        </div>
    </form>
</div>
</div><!--/span-->
</div><!--/row-->
    </div><!--/file-div-->

    </div><!--span-->

</div>

編集の終わり

フォームが非同期に投稿されることを期待していますが、[送信] ボタンをクリックするとページが再読み込みされ続けます。

何か案が？

4

4 に答える 4

2

リンクのデフォルト アクションをキャンセルする必要があるため、

$('#send').click(function () {});

する必要があります

$('#send').click(function (event) {
  event.preventDefault();
}

これを試して

于 2013-06-05T17:30:32.757 に答える
0

ボタン クリック イベント ハンドラが false を返すことを確認してください。

于 2013-06-05T17:30:21.233 に答える
0

クリックのデフォルトの動作を妨げていないようです。

交換：

$('#send').click(function(){

と：

$('#send').click(function (e) {
    e.preventDefault();

が機能しない場合は、またはe.preventDefault();を追加してみてください。e.stopPropagation();e.stopImmediatePropagation();

于 2013-06-05T17:31:44.570 に答える