[英]Short cut way of collecting form input values using javascript
I have a form that collects information from a user. 我有一个从用户收集信息的表单。 The form is composed of 10 input text field. 表单由10个输入文本字段组成。 The individual value of input text field is accessed via var first_name = $("#fname").val()
as an example and passed to var postdata = {'fname':first_name};
输入文本字段的单个值通过var first_name = $("#fname").val()
作为示例访问并传递给var postdata = {'fname':first_name};
and then passed to ajax with url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata
then the controller function again will collect it. 然后用url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata
传递给ajax url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata
然后控制器函数再次收集它。 If I have 30 input text field and then used this way, it would take me a lot of time. 如果我有30个输入文本字段然后以这种方式使用,那将花费我很多时间。 What is the best way to pass numerous input field values using javascript in miniature way? 使用javascript以微缩方式传递众多输入字段值的最佳方法是什么? Is there a shortcut for this? 这有什么捷径吗? Thanks a lot. 非常感谢。 I have a sample code below. 我在下面有一个示例代码。
Views: 浏览次数:
<input class="input input-large" type="text" name="fname" id="fname" value=""/>
<input class="input input-large" type="text" name="lname" id="lname" value=""/>
<input class="input input-large" type="text" name="address" id="address" value=""/>
<input class="input input-large" type="text" name="age" id="age" value=""/>
<input class="input input-large" type="text" name="height" id="height" value=""/>
<input class="input input-large" type="text" name="gender" id="gender" value=""/>
<input class="input input-large" type="text" name="school" id="school" value=""/>
<input class="input input-large" type="text" name="course" id="course" value=""/>
<input class="input input-large" type="text" name="year" id="year" value=""/>
<input class="input input-large" type="text" name="date_of_birth" id="date_of_birth"
value=""/>
<button class="btn btn-success" id="save" name="save">Save</button>
<script type="text/javascript">
$("#save").click(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var address = $("#address").val();
var age = $("#age").val();
var height = $("#height").val();
var gender = $("#gender").val();
var school = $("#school").val();
var course = $("#course").val();
var year = $("#year").val();
var date_of_birth = $("#date_of_birth").val();
var postdata = {
'fname': fname,
'lname': lname,
'address': address,
'age': age,
'height': height,
'gender': gender,
'school': school,
'course': course,
'year': year,
'date_of_birth': date_of_birth
};
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>main_controller/save_data",
data: postdata,
success: function (data) {
if (data.notify) {
alert('success');
} else {
alert('Failed');
}
}
});
});
</script>
Controller: 控制器:
function save_data(){
$fname = $this->input->post('fname');
$lname = $this->input->post('lname');
$address = $this->input->post('address');
$age = $this->input->post('age');
$height = $this->input->post('height');
$gender = $this->input->post('gender');
$school = $this->input->post('school');
$course = $this->input->post('course');
$year = $this->input->post('year');
$date_of_birth = $this->input->post('date_of_birth');
$this->insert_model->save_data($fname,$lname,$address,$age,$height,$gender,$school,$course,$year,$date_of_birth);
}
Indeed there is: 确实有:
$("#save").click(function () {
var postData = $("#idOfYourForm").serialize();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>main_controller/save_data",
data: postdata,
// it is perhaps better to specify the dataType
// of the data expected back from the server
// for readability
dataType: 'json',
success: function (data) {
if (data.notify) {
alert('success');
} else {
alert('Failed');
}
}
});
// maybe you need this
return false;
});
http://api.jquery.com/serialize/ http://api.jquery.com/serialize/
Use JQuery serialize()
method It effectively turns the form values(input/select..) into a valid querystring. 使用JQuery serialize()
方法它有效地将表单值(input / select ..)转换为有效的查询字符串。
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>main_controller/save_data",
data:$('form').serialize(),
success: function(data){
if(data.notify){
alert('success');
}
else{
alert('Failed');
}
}
});
var formelements = {}
$(input).each()
{
formelements[$(this).attr('name')] = $(this).val();
}
now all your values are stored inside the formelements, you can even send this element instead of manually sending all form elements: 现在你的所有值都存储在formelements中,你甚至可以发送这个元素而不是手动发送所有表单元素:
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>main_controller/save_data",
data:formelements,
dataType:"json",
success: function(data){
if(data.notify=="Success"){
alert('success');
}
else{
alert('Failed');
}
}
});
Non-serialization alternative: 非序列化替代方案:
If you need an array of form fields somewhere else in your script (for example, for client-side validation purposes) you can use the following alternative of .serialize()
: 如果在脚本中的其他位置需要一组表单字段(例如,出于客户端验证目的),可以使用以下替代的.serialize()
:
var postdata = {};
$(".input").each(function () {
postdata[$(this).attr("name")] = $(this).val();
});
Now postdata
contains the array of values (like in your initial code snippet) instead of querystring. 现在postdata
包含值数组(比如在初始代码片段中)而不是querystring。
PS: Add some special class attribute to your form fields instead of input
which I have used just for example. PS:在表单字段中添加一些特殊的类属性,而不是我刚才使用的input
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.