codeigniter 使用javascript收集表单输入值的快捷方式

1bqhqjot 于 2022-12-07 发布在 Java

关注(0)|答案(6)|浏览(116)

我有一个从用户那里收集信息的表单。表单由10个输入文本字段组成。输入文本字段的单个值通过var first_name = $("#fname").val()访问，作为示例，并传递给var postdata = {'fname':first_name};，然后通过url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata传递给 AJAX ，然后控制器函数再次收集它。如果我有30个输入文本字段，然后以这种方式使用，这会花我很多时间。2用javascript以一种微型的方式传递大量的输入域值的最好方法是什么？3有没有一个快捷的方法？4非常感谢。5我有一个下面的示例代码。
浏览次数：

<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>

控制器：

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);
 }

codeigniter

来源：https://stackoverflow.com/questions/18160146/short-cut-way-of-collecting-form-input-values-using-javascript

6条答案

按热度按时间

4uqofj5v1#

的确有：

$("#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;
});

赞(0）回复(0）举报 2022-12-07

ax6ht2ek2#

您可以这样做：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// get inputs[index] element.
}

您可以从NodeList参考中获得更多信息。

赞(0）回复(0）举报 2022-12-07

jmo0nnb33#

使用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');
  }
 }
});

serialize（）文档：link

赞(0）回复(0）举报 2022-12-07

rxztt3cl4#

var formelements = {}
$(input).each()
{
formelements[$(this).attr('name')] = $(this).val();
}

现在所有的值都存储在表单元素中，你甚至可以发送这个元素，而不是手动发送所有的表单元素：

$.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');
  }
 }
});

赞(0）回复(0）举报 2022-12-07

tvmytwxo5#

非序列化替代项：

如果脚本中的其他位置需要表单域数组（例如，用于客户端验证），可以使用.serialize()的以下替代方法：

var postdata = {};
$(".input").each(function () {
  postdata[$(this).attr("name")] = $(this).val();
});

现在postdata包含值数组（就像在初始代码片段中一样），而不是querystring。

**P.S.：**在表单字段中添加一些特殊的类属性，而不是我仅作为示例使用的input。

赞(0）回复(0）举报 2022-12-07

carvr3hs6#

var fname=fname.value;
var lname=lname.value;
var address=address.value;
var age=age.value;
var height=height.value;
var date_of_birth=date_of_birth.value;

赞(0）回复(0）举报 2022-12-07

我来回答

codeigniter 使用javascript收集表单输入值的快捷方式

6条答案

相关问题

热门标签

最新问答