我对JS世界很新。我所做的是,创建了一个表单,在其中我将表单字段值拉入变量并将它们分配给一个对象(obj),同样我正在分配' obj'反对' param'对象,console.log(param)给了我undefined。任何帮助将不胜感激
<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>
答案 0 :(得分:1)
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一起使用