2012-02-20 119 views
1

嘿傢伙和GAL我有一些重大問題試圖讓我的應用程序工作。我一直試圖通過這個破解,我錯過了發送正確的輸入值(按鈕值)讓球滾動的第一部分,我敢肯定這是簡單的,但我一直有一個問題得到它工作。如果有人能挑出錯誤來幫助我,我會很感激。JQuery POST按鈕的值,返回輸入?

這是非常簡單的PHP做的,但由於這是一個獨立的離線 應用程序我不能使用PHP =(我需要做我的所有抓取和JQuery的 或JavaScript解析....

我們先從一些按鈕,具有獨特的價值一個非常基本的形式。

<form> 

<fieldset> 
<legend>Select Orders</legend> 

<table id='master'></table> 

    </div> <!-- end input1 --> 
    <div> 
    <button name="select" type="submit" id="btnLoad" value="load">Refresh</button> 
    <button name="select" type="submit" id="btnJson" value="down">Download JSON</button> 
    <button name="select" type="submit" id="btnView" value="view">View/Enter</button> 
    </div> 
</fieldset> 

</form> 

觸發該功能

$(function() { 
    $("form").submit(function() { 

     /* what obj are we recieving? 
     $.each($(this), function(index, obj) { 
      console.log('Index: ' + index + ' Obj: '+ obj); 
      // returns this B/S: Index: 0 Obj: [object HTMLFormElement] 
     }); 
     */ 

     // $this.button.val() never makes it through? 
     queryJsonServer($(this), "class/"); 
     return false; 
    }); 
}); 

var button = $(this).attr("value"); 
var button = $('button').attr("value"); // ends up with the first buttons value, 
             // but never the selected or $(this).val() 

$('button').click(function() {   // which WILL console.log the buttons val, 
    console.log($(this).val());   // but will not let me turn it into a var? 
    return false;       // ALSO this looks like it only reads the 
});          // value the SECOND click? 

使命這裏我試過的東西是發送按鈕值作爲$ _POST輸入到解析器將返回相應的JSON數組解析,或者存儲在一個本地SQLite數據庫。

無論哪種方式,這裏是頁面的完整代碼,有人可以給我一個手,或者如果我需要澄清,請讓我知道。

<?php 
    ini_set('display_errors', 1); 
    error_reporting(E_ERROR | E_PARSE); 
    var_export($_POST); 
?> 

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <title> </title> 

    <script src='http://www.google.com/jsapi'></script> 
    <script> google.load('jquery', '1.7.1'); </script> 

    <script> 
     $(function(){ 
      $("form").submit(function() 
      { 

       /* what obj are we recieving? 
       $.each($(this), function(index, obj) { 
        console.log('Index: ' + index + ' Obj: '+ obj); 
        // returns this B/S: Index: 0 Obj: [object HTMLFormElement] 
       }); 
       */ 

       $('button').click(function() { 
        var state = $(this).val(); 
        return true; 
       }); 

       // state is undefined. L29 
       console.log(state); 

       // $this.button.val() never makes it through? 
       queryJsonServer($(this), state, "class/"); 
       return false; 
      }); 

      // query json server for 
      function queryJsonServer(form, state, path) 
      { 

       // on first return or refresh inputs will be returrned 
       var view = $('input[name="orders"]:checked').val(); 
       var url  = path + "json.php?" + state; // status = button.val() 
       var state = $(this).attr("value"); // ends up class/json.php?undefined 

       // we have data, lets post to json parser and 
       $.getJSON(url, view, function(data) 
       { 
        $('form').unbind('submit').trigger('submit'); 

        var items = []; 

         switch(state) 
         { 
          case 'load' : 

           $.each(data, function(index, obj) { 
            items.push('<tr>'); 
            $.each(obj, function(key, val) { 
             items.push((key == "report_number") 
             ? '<td class="check" ><input type="checkbox" name="' + val + '" /></td><td><label class="caps" for="'+ key +'">'+ key.replace("_", " ") +'</label><input disabled="disabled" type="text" id="' + key + '" value="' + val + '" /></td>' 
             : '<td><label class="caps" for="'+ key +'">'+ key.replace("_", " ") +'</label><input disabled="disabled" type="text" id="' + key + '" value="' + val + '" /></td>') 
            }); 
            items.push('</tr>'); 
           }); 

           $('<div/>', { 
            'class': 'jsonOutput', 
            html: items.join('') 
            }).appendTo('#master'); 

           break; 

          case 'down' : 
           // populate SQLite Database 
           break; 

          case 'view' : 

           $.each(data, function(index, obj) { 
            items.push('<tr>'); 
            $.each(obj, function(key, val) { 
             items.push('<td><label class="caps" for="'+ key +'">'+ key.replace("_", " ") +'</label><input disabled="disabled" type="text" id="' + key + '" value="' + val + '" /></td>') 
            }); 
            items.push('</tr>'); 
           }); 

           $('<div/>', { 
            'class': 'jsonOutput', 
            html: items.join('') 
            }).appendTo('#master'); 

           break; 

          default: 
           return false; 
           break; 
         } 

       }); 
      } 
     }); 
    </script> 

    <style type="text/css"> 
    p, ul {width:100%; text-align:left;font-size:80%;} 
    .reports_box {width:auto; padding:25px 20px 20px 20px;border:1px solid #91bce6;background-color:#eff5fb;} 
    .inputs {width:300px; font-size:15px;padding:5px;} 
    .check input {padding:0 !important;} 
    .caps {text-transform:capitalize;} 
    #reports_list td, #reports_list tr {padding:10px 0 10px 2px;color:#34567b;} 
    </style> 

    </head> 

<body> 


<div class="reports_box"> 
    <form id='submit'> 

    <fieldset> 
    <legend>Select Orders</legend> 

    <table id='master'></table> 

     </div> <!-- end input1 --> 
     <div> 
     <button name="select" type="submit" id="btnLoad" value="load">Refresh</button> 
     <button name="select" type="submit" id="btnJson" value="down">Download JSON</button> 
     <button name="select" type="submit" id="btnView" value="view">View/Enter</button> 
     </div> 
    </fieldset> 

    </form> 
</div> <!-- end reports_box --> 

    </body> 
</html> 
+1

你的問題的範圍。你的狀態變量是本地的,並且在點擊功能之外什麼都不做。 – adeneo 2012-02-20 19:46:42

回答

2

阻止表單提交,除非被按鈕觸發。

當表單提交一個按鈕觸發:

  1. 使用$(形式)。 serialize()連載的形式
  2. 添加「&選擇= ButtonValue」的序列化的字符串
  3. 使用$.getJSON發送GET請求到服務器頁面,並得到一個JSON對象返回。

最後編輯:在這裏我用正確的序列化工作小提琴:http://jsfiddle.net/YYZGG/5/

(當使用代碼更改表單動作爲您正確的頁面)

+0

我有這個起源,但永遠不會得到它的工作?http://pastie.org/3422632 – ehime 2012-02-20 20:03:39

+0

是啊,這不是如何擴展作品...看到我的編輯。 – Dave 2012-02-20 20:07:28

+0

我試圖在你的代碼大衛,但我無法得到它的工作的錯誤,你能看一下吧?http://pastie.org/3422710 – ehime 2012-02-20 20:17:10

0
$(function(){ 
     $("form").submit(function() 
     { 
      var state; 

      /* what obj are we recieving? 
      $.each($(this), function(index, obj) { 
       console.log('Index: ' + index + ' Obj: '+ obj); 
       // returns this B/S: Index: 0 Obj: [object HTMLFormElement] 
      }); 
      */ 

      $('button').click(function() { 
       state = $(this).val(); 
       return true; 
      }); 

      // state is NOW DEFINED 
      console.log(state); 

      // $this.button.val() never makes it through? 
      queryJsonServer($(this), state, "class/"); 
      return false; 

      ....................... 

此外,如果無法得到正確的價值觀,嘗試:

$('button').on('click', function(e) { 
    console.log(e.target.value); 
}); 

編輯:

你肯定should'nt只是:

$("form").submit(function(e) { 
      var state = e.target.value; 
      console.log(state); 
--------- 
+0

'state'仍然返回'undefined' =( – ehime 2012-02-20 19:51:45

+0

你確定你在做一個按鈕的點擊處理程序時做的是正確的事情,期望在submit函數中獲取值嗎?看起來很奇怪。 – adeneo 2012-02-20 19:56:47

+0

不,綁定()處理程序中的按鈕的點擊處理程序將不會執行任何操作 – Dave 2012-02-20 20:10:18

0

爲什麼您的提交內容中不包含帖子?您使用的方法是GET這就是爲什麼它不是一個POST,要麼使用.submit().post()在一起,或只是使用整個不同的方式工作全部採用相聚和.click()功能,但這裏的使用.post()什麼樣子的例子:

<script> 
    /* attach a submit handler to the form */ 
    $("#searchForm").submit(function(event) { 

/* stop form from submitting normally */ 
event.preventDefault(); 

/* get some values from elements on the page: */ 
var $form = $(this), 
    term = $form.find('input[name="s"]').val(), 
    url = $form.attr('action'); 

/* Send the data using post and put the results in a div */ 
$.post(url, { s: term }, 
    function(data) { 
     var content = $(data).find('#content'); 
     $("#result").empty().append(content); 
     } 
    ); 
    }); 
</script> 

http://api.jquery.com/jQuery.post/

+0

使用serialize()後,他需要使用$ .extend()將相應的{select:「buttonValue」}對象添加到序列化表單中。 – Dave 2012-02-20 19:51:38

+0

您能否詳細說明一下?我不確定我是否瞭解您的方法,非常感謝。 – ehime 2012-02-20 19:53:32

+0

#1我不知道爲什麼'.post()'在這裏沒有被使用,如果這是什麼試圖完成 – 2012-02-20 19:55:14