2012-02-20 125 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