Question

我有很多按钮，它的值包含用户名（jason，chan，brad等...），用户点击按钮，这个按钮附加到特定的div。例如：

<input type="button" onClick="nano();" id="name1" class="names"  name="jason" value="jason" />

并将其转换为

<div id="name_selected"><input type="button" id="name1" class="added_name"  name="jason" value="jason" /></div>

当用户点击按钮时，纳米功能正在运行

function nano(){
$("#name1").click(function(){
$(this).appendTo("div#name_selected").removeClass("names");
$(this).addClass("added_name");
var name_value=$(this).attr("value");

});
}

真正的问题是我希望获得所选按钮的值并使用ajax保存到数据库，如何定义name_value变量来运行ajaxSubmit（）？

Uncaught ReferenceError: name_value is not defined

发生错误

function ajaxSubmit(){
            $.ajax({
                type:"POST",
                url:"z.php",
                cache:false,
                data:name_value,
                success:function(data) {
                    window.location.href="show.php";
                }
            });

        }

Answer 1

在函数nano之外声明name_value，它将充当全局变量并由其他javascript / jquery函数访问。喜欢这个

var name_value;

function nano(){
...
name_value=$(this).attr("value");
...
}

您可以直接在您的ajax中直接使用name_value。它将解决您的问题/错误。

Answer 2

在所有函数之外和之上声明var name_value;，然后通过调用name_value更改name_value = $(this).attr("value");的值

最终代码：

var name_value;

function nano(){
$("#name1").click(function(){
$(this).appendTo("div#name_selected").removeClass("names");
$(this).addClass("added_name");
name_value=$(this).attr("value");

});
}

function ajaxSubmit(){
            $.ajax({
                type:"POST",
                url:"z.php",
                cache:false,
                data:name_value,
                success:function(data) {
                    window.location.href="show.php";
                }
            });

        }

Answer 3

首先，您不需要onclick功能，因为您已经绑定了nano功能内部的点击。在ajaxSubmit函数中，获取＃name1的值，如此。

function ajaxSubmit(){
    $.ajax({
        type: "POST",
        url: "z.php",
        cache: false,
        data: {
            name_value: $('#name1').val()
        },
        success: function(data) {
            window.location.href = "show.php";
        }
    });
}

Answer 4

确保在调用函数时传递您要发送的任何数据。

function nano(){
    $("#name1").click(function(){
       $(this).appendTo("div#name_selected").removeClass("names");
       $(this).addClass("added_name");
       var name_value=$(this).attr("value");
       ajaxSubmit(name_value);
    });
}

function ajaxSubmit(userVal){
            $.ajax({
                type:"POST",
                url:"z.php",
                cache:false,
                data:{name_value:userVal},
                success:function(data) {
                    window.location.href="show.php";
                }
            });

}

Answer 5

首先声明一个将在按钮点击时调用的函数：

/**
*   Function that performs various operations on button click
*   @param btn {jQuery object}: The button that triggered the click event
*/
function nano(btn) {   
   // Do your stuff here...       
   btn.appendTo("div#name_selected")
      .removeClass("names")
      .addClass("added_name");

   // Get the value attribute
   var name_value = btn.attr("value");

   // Make ajax call
   if (name_value) {
      ajaxSubmit(name_value);
   }       
}

声明要执行ajax调用的函数：

function ajaxSubmit(val) {
    // Check if 'val' is not undefined
    if (val) {
       $.ajax({
          type:"POST",
          url:"z.php",
          cache:false,
          data: { val: val },
          success:function(data) {
             window.location.href="show.php";
          },
          error:function() {
             // error handling here...
          }
       });
    }
}

在所需元素上添加事件侦听器：

$(document).on('click', '.button-class', function() {
   // Call nano passing the clicked button as parameter
   // this --> the javascript object that triggered the click event
   // $(this) --> the jQuery object of 'this' 
   nano($(this));
});

重要：

从所有按钮中删除onClick属性！（不要使用，而是使用on()函数添加事件侦听器）

将函数的变量定义为另一个函数

5 个答案: