如何使用jQuery中的每个循环将所有表单元素推入包含无线电元素的数组中

时间:2017-10-22 07:55:38

标签: javascript jquery html arrays

这是我正在执行的jQuery代码:

var fieldCheck = [], proceedNext = true;
$("form#form1 [id^=patient_]").each(function() {
  if(!$.trim($(this).val())) {
    proceedNext = false;
    fieldCheck.push(" "+$('label[for="' + this.id + '"]').html());
  }
});

if(!$("form#form1 input[name='patient_gender']:checked").val()) {
  proceedNext = false;
  fieldCheck.push(" "+"Gender");
}

if(!$("form#form1 input[name='patient_alcoholic']:checked").val()) {
  proceedNext = false;
  fieldCheck.push(" "+"Alcoholic Status");
}

if(!$("form#form1 input[name='patient_tobacco']:checked").val()) {
  proceedNext = false;
  fieldCheck.push(" "+"Tobacco Status");
}

if(proceedNext) {
  var inpDataArray = [];
  $("form#form1").each(function() {
    var _inputDataArray = [];
    $(this).find("input[type='text'], textarea, select").each(function(index, value) {
      _inputDataArray.push($(this).val());
    }); 
    inpDataArray.push(_inputDataArray);
  }); 

  inpDataArray.push($('input[name=patient_gender]:checked').val());            
  inpDataArray.push($('input[name=patient_alcoholic]:checked').val());           
  inpDataArray.push($('input[name=patient_tobacco]:checked').val());
  console.log(inpDataArray);
  return false;
}

这是我的HTML代码:

<form id="form1" enctype="multipart/form-data">
        <div class="form-body">
              <div class="row"> 
                    {{-- Reg id --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_HospitalUid" name="patient_HospitalUid">
                                <label for="patient_HospitalUid">Hospital UID / MRD Number</label> <span class="help-block">Hospital UID / MRD Number</span>
                          </div>
                    </div> 
                    {{-- First Name --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_firstname" name="patient_patient_firstname">
                                <label for="patient_firstname">First Name</label> <span class="help-block">Patient's First Name</span>
                          </div>
                    </div> 
                    {{-- Last Name --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_lastname" name="patient_patient_lastname">
                                <label for="patient_lastname">Last Name</label> <span class="help-block">Patient's Last Name</span>
                          </div>
                    </div>
                    {{-- Date of Birth --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input class="form-control date-picker" size="16" type="text" value="" id="patient_dob" name="patient_patient_dob" data-date-format="dd-mm-yyyy" onblur="this.className += ' edited'" />
                                <label for="patient_dob">Date of Birth</label> <span class="help-block"> Select Date of Birth </span>
                          </div>
                    </div> 
                    {{-- Age --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_age" name="patient_age">
                                <label for="patient_age">Age</label> <span class="help-block">Patient's Age</span>
                          </div>
                    </div> 
                    {{-- Gender --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-radios">
                                <label>Gender</label>
                                <div class="md-radio-inline">
                                      <div class="md-radio">
                                            <input type="radio" id="patient_genderMale" name="patient_gender" data-value="Gender" value="male" class="md-radiobtn">
                                            <label for="patient_genderMale"> <span></span> <span class="check"></span> <span class="box"></span> Male </label>
                                      </div>
                                      <div class="md-radio">
                                            <input type="radio" id="patient_genderFemale" name="patient_gender" value="female" class="md-radiobtn">
                                            <label for="patient_genderFemale"> <span></span> <span class="check"></span> <span class="box"></span> Female </label>
                                      </div>
                                      <div class="md-radio">
                                            <input type="radio" id="patient_genderSkip" name="patient_gender" value="other" class="md-radiobtn">
                                            <label for="patient_genderSkip"> <span></span> <span class="check"></span> <span class="box"></span> Other </label>
                                      </div>
                                </div>
                          </div>
                    </div>
                    {{-- Mobile No --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_mobile" name="patient_mobile">
                                <label for="patient_mobile">Mobile No</label> <span class="help-block">Patient's Mobile No</span>
                          </div>
                    </div>
                    {{-- Landline No --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patientopt_landline" name="patientopt_landline">
                                <label for="patientopt_landline">Landline No.</label> <span class="help-block">Patient's Landline No.</span>
                          </div>
                    </div>
                    {{-- Email-ID --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patientopt_email" name="patientopt_email">
                                <label for="patientopt_email">E-mail address</label> <span class="help-block">Patient's E-mail address</span>
                          </div>
                    </div>
                    {{-- Reffered By --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_ReferredBy" name="patient_ReferredBy">
                                <label for="patient_ReferredBy">Referred By</label> <span class="help-block">Patient's Referred By</span>
                          </div>
                    </div>
                    {{-- Address --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <textarea class="form-control" id="patient_address" rows="2" cols="2" name="patient_address"></textarea>
                                <label for="patient_address">Address</label> <span class="help-block">Patient's Address</span>
                          </div>
                    </div>
                    {{-- State --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input">
                                <select class="form-control" id="patient_state" name="patient_state">
                                      <option selected disabled value="">Select State</option> @if(!empty($states)) @foreach($states as $state)
                                      <option value="{{ $state['name'] }}"> {{ $state['name'] }}</option> @endforeach @else
                                      <option value="">No data found</option>
                                      <option value="maharashtra">Maharashtra</option> @endif </select>
                                <label for="patient_state">State</label>
                          </div>
                    </div>
                    {{-- City --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input">
                                <select class="form-control" id="patient_city" name="patient_city">
                                      <option selected disabled value="">Select City</option>
                                      <option value="amravati">Amravati</option>
                                </select>
                                <label for="patient_city">City</label>
                          </div>
                    </div>
                    {{-- Pincode --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_pincode" name="patient_pincode">
                                <label for="patient_pincode">Pincode</label> <span class="help-block">Patient's Pincode</span>
                          </div>
                    </div>
                    {{-- BloodGroup --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input has-success">
                                <select class="form-control" id="patient_bloodgroup" name="patient_bloodgroup">
                                      <option selected disabled value=""> Select Bloodgroup</option>
                                      <option value="bloodGrpId_1">AB+ve</option>
                                </select>
                                <label for="patient_bloodgroup">Bloodgroup</label>
                          </div>
                    </div>
                    {{-- Weight --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_weight" name="patient_weight">
                                <label for="patient_weight">Weight (In Kgs)</label> <span class="help-block">Patient's Weight (In Kgs)</span>
                          </div>
                    </div>
                    {{-- Height --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_height" name="patient_height">
                                <label for="patient_height">Height</label> <span class="help-block">Patient's Height</span>
                          </div>
                    </div>
                    {{-- BMI --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-line-input form-md-floating-label">
                                <input type="text" class="form-control" id="patient_bmi" name="patient_bmi">
                                <label for="patient_bmi">BMI</label> <span class="help-block">Patient's BMI</span>
                          </div>
                    </div>
                    {{-- Alcoholic --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-radios">
                                <label>Alcoholic?</label>
                                <div class="md-radio-inline">
                                      <div class="md-radio">
                                            <input type="radio" id="patient_alcoholicYes" data-value="Alcoholic Staus" name="patient_alcoholic" value="yes" class="md-radiobtn">
                                            <label for="patient_alcoholicYes"> <span></span> <span class="check"></span> <span class="box"></span> Yes </label>
                                      </div>
                                      <div class="md-radio">
                                            <input type="radio" id="patient_alcoholicNo" name="patient_alcoholic" class="md-radiobtn" value="no">
                                            <label for="patient_alcoholicNo"> <span></span> <span class="check"></span> <span class="box"></span> No </label>
                                      </div>
                                </div>
                          </div>
                    </div>
                    {{-- Tobacco --}}
                    <div class="col-md-4 col-md-offset-4">
                          <div class="form-group form-md-radios">
                                <label>Tobacco?</label>
                                <div class="md-radio-inline">
                                      <div class="md-radio">
                                            <input type="radio" id="patient_tobaccoYes" data-value="Tobacco Status" name="patient_tobacco" value="yes" class="md-radiobtn">
                                            <label for="patient_tobaccoYes"> <span></span> <span class="check"></span> <span class="box"></span> Yes </label>
                                      </div>
                                      <div class="md-radio">
                                            <input type="radio" id="tobacco_no" name="patient_tobacco" class="md-radiobtn" value="no">
                                            <label for="tobacco_no"> <span></span> <span class="check"></span> <span class="box"></span> No </label>
                                      </div>
                                </div>
                          </div>
                    </div>
              </div>
        </div>
  </form>

我想要实现的是我有一个表单并且它有text-area, text, radio, select我想要实现的东西当我在JQuery中迭代循环时我想要存储在一个数组中的所有内容当前我不能在同一个循环中交互单选按钮,所以我使用外部方法来实现它,但它创建的是另一个数组。我正在尝试实现的是,当推送值时,我也希望获得标签的值,例如gender is clicked on female,然后我想实现像gender: male,{{1 }} 等等。怎么实现呢?我无法实现。

0 个答案:

没有答案