试图为JS对象分配一个变量

时间:2014-05-22 04:04:55

标签: javascript jquery

我对JS世界很新。我所做的是,创建了一个表单,在其中我将表单字段值拉入变量并将它们分配给一个对象(obj),同样我正在分配' obj'反对' param'对象,console.log(param)给了我undefined。任何帮助将不胜感激

I have put my code here

  <form accept-charset="UTF-8" id="user-profile-form" method="post" action=""   enctype="multipart/form-data" autocomplete="off" novalidate="novalidate"><div><div class="bd-section bd-section-user-profile">
     <fieldset data-user-email="" class="fs-email-name">
     <h3>Name and Email</h3>
     <div id="edit-field-first-name" class="field-type-text field-name-field-first-name field-widget-text-textfield form-wrapper">
     <div id="field-first-name-add-more-wrapper">
     <div class="form-item form-type-textfield form-item-field-first-name-und-0-value">
     <label for="edit-field-first-name-und-0-value">First Name <span title="This field is     required." class="form-required">*</span></label>
     <input type="textbox" maxlength="14" size="60" value="" name="field_first_name" id="edit-field-first-name-und-0-value" class="text-full form-text required">
      <div class="faux-label" style="display: none;">First Name</div>
      </div>
      </div></div>       
       <div id="edit-field-last-name" class="field-type-text field-name-field-last-name field-widget-text-textfield form-wrapper">
      <div id="field-last-name-add-more-wrapper"><div class="form-item form-type-textfield form-item-field-last-name-und-0-value">
       <label for="edit-field-last-name-und-0-value">Last Name <span title="This field is required." class="form-required">*</span></label>
       <input type="text" maxlength="14" size="60" value="" name="field_last_name[und][0][value]" id="edit-field-last-name-und-0-value" class="text-full form-text required">
      <div class="faux-label" style="display: none;">Last Name</div>
      </div>
     </div></div>       
    <div class="form-item form-type-textfield form-item-mail">
       <label for="edit-mail">E-mail address <span title="This field is required." class="form-required">*</span></label>
       <input type="text" class="form-text required email" maxlength="254" size="60" value="" name="mail" id="edit-mail">
       <div class="faux-label" style="display: none;">email@email.com</div>
    </div>
   </fieldset>
</div>

    <div id="edit-actions--2" class="form-actions form-wrapper">
      <input type="submit" class="form-submit" value="Save Changes" name="op" id="edit-submit-ca">
     <input type="submit" class="form-submit" value="Delete your account" name="op" id="edit-cancel"><a href="/" class="edit-cancel-changes">Cancel</a></div></div>
   </form>        </div><!-- .col-left -->


    </div>
   <script>

     function user_pref_data(){
      var FirstName;
      var LastName;
      var email;
      var param={};
      var obj = {};


$("#edit-field-first-name-und-0-value").focusout(function(){
   FirstName = this.value;
   console.log(FirstName)
});
$("#edit-field-last-name-und-0-value").focusout(function(){
   LastName = this.value;
 });
 $("#edit-mail").focusout(function(){
  email = this.value;
});
  obj.frstnam = FirstName;
  obj.lstnam = LastName;
  obj.eml = email;
  param.param = obj;
  console.log(param);
}
 $("input#edit-submit-ca").on('click', function(event){
//alert("hi")

 user_pref_data();
 return false;

});

});
</script>

5 个答案:

答案 0 :(得分:1)

以下是DEMO JS BIN code

var obj = {};
function user_pref_data(){
   var param={};

   var FirstName;
   var LastName;
   var email;

   param.param = obj;
   console.log(param);
}
$("input#edit-submit-ca").on('click', function(event){
  //alert("hi")

  user_pref_data();
  return false;

});
$("#edit-field-first-name-und-0-value").focusout(function(){
       FirstName = this.value;
      obj.frstnam = FirstName;
       console.log(FirstName);
});
$("#edit-field-last-name-und-0-value").focusout(function(){
      LastName = this.value;
      obj.lstnam = LastName;
});
$("#edit-mail").focusout(function(){
      email = this.value;
      obj.eml = email;
});

对您的代码进行了一些更改。加上这个。 聚焦事件函数不能在另一个函数中定义,以便它们发生。

由于您的函数user_pref_data()仅在提交操作时被调用,因此这些焦点事件从未发生过。

答案 1 :(得分:0)

您可以访问focusout事件的值,甚至您在提交页面时绑定了该事件处理程序,这是不好的做法。通常所有事件处理程序都必须在开头绑定。检查下面的解决方案。

function user_pref_data(){
  var param={};
  var obj = {};
  var FirstName;
  var LastName;
  var email;

  FirstName = $("#edit-field-first-name-und-0-value").val();
  LastName = $("#edit-field-last-name-und-0-value").val();
  email = $("#edit-mail").val();

   obj.frstnam = FirstName;
   obj.lstnam = LastName;
   obj.eml = email;
   param.param = obj;
   console.log(param);
}

答案 2 :(得分:0)

您想获取focusout上的表单字段值吗?

试试这个:

var FirstName;
  var LastName;
  var email;  
$("#edit-field-first-name-und-0-value").focusout(function(){
       FirstName = this.value;
       console.log(FirstName);
    });
  $("#edit-field-last-name-und-0-value").focusout(function(){
      LastName = this.value;
    });
  $("#edit-mail").focusout(function(){
      email = this.value;
    });

function user_pref_data(){
  var param={};
  var obj = {};  

   obj.frstnam = FirstName;
   obj.lstnam = LastName;
   obj.eml = email;
   param.param = obj;
   console.log(param);
}
$("input#edit-submit-ca").on('click', function(event){
  //alert("hi")

  user_pref_data();
  return false;

});

Working Example - Check your console

当Jquery .focusout()事件或其中的任何元素失去焦点时,会向该元素发送该事件。

因为,在您的代码中,当函数user_pref_data()正在执行时,您绑定.focusout()事件,并且没有触发foucs-out事件。

答案 3 :(得分:0)

非常奇怪,但我修正了$("#id")更改为document.getElementById()。 改变这一行:

$("#edit-field-first-name-und-0-value").focusout(function(){
      FirstName = this.value;
    });

到此:

FirstName = document.getElementById("edit-field-first-name-und-0-value").value;

也许你忘了包含jQuery库? 哦,我看到你把它们包括在内。

答案 4 :(得分:0)

Rashim Javiya的例子很完美,但只是添加到那个以及为什么你的代码不起作用是因为javascript基于事件循环。函数user_pref_data()在调用焦点输出已经过去的事件的提交事件上被调用(我个人不会在焦点输出事件上获取输入数据 - 请参阅上面的Rashims代码但是下面是一个相同的示例//很少修改//代码工作,因为我启动你的函数而不将它附加到事件。

(function user_data_function() {
var param;
var obj = {};
var FirstName;
var LastName;
var email;

$("#edit-field-first-name-und-0-value").focusout(function(){
   FirstName = this.value;
   console.log(FirstName);
});
$("#edit-field-last-name-und-0-value").focusout(function(){
  LastName = this.value;
});
$("#edit-mail").focusout(function(){
  email = this.value;
});


$("input#edit-submit-ca").on('click', function(event){
//alert("hi")

obj.frstnam = FirstName;
obj.lstnam = LastName;
obj.eml = email;
param = $.param( obj );
console.log(param);
event.preventDefault(); // works same as 'return false' in your code but this is best practice

});
})(); // initilize and call function at same time

再次不是我编写此代码的方式,但出于演示目的,我希望这可以清除事件循环如何与javascript一起使用