Блог

Главная - Вопросы по программированию - Извлекать идентификатор и значение для каждого раздела формы

Извлекать идентификатор и значение для каждого раздела формы

#javascript #jquery #asp.net #asp.net-mvc-4

#javascript #jquery #asp.net #asp.net-mvc-4

Вопрос:

У меня есть приведенная ниже форма, и я пытаюсь получить идентификатор и значение и поместить данные в json для передачи моему контроллеру.Ниже приведен код. Я не могу увидеть, чего мне не хватает.Это первый опыт веб-разработки

 <div class="form-section">
    <div class="section-header">
        <span class="collapse-symbol"><i class="fas fa-angle-right"></i></span>
        <span class="section-title">
            Term
        </span>

    </div>
    <div class="content" id="quote-edit-form">

<div class="row-container">

    <div class="row-child">
        <label class="control-label" for="StartDate">StartDate Date</label>

        <input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="Start-date" name="Terms.StartDate" type="datetime" value="" />

        <label class="control-label" for="Terms_Date">Terms Date</label>

        <input class="form-control text-box single-line" data-val="true" data-val-date="The field Terms Date must be a date." id="continuity-date" name="Terms.ContinuityDate" type="datetime" value="" />

        <label class="control-label" for="Terms Period">Extension Period</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.ExtensionPeriod" type="text" value="" />
    </div>

    <div class="row-child">
        <label class="control-label" for="Terms.Choice">Choice</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.Law" type="text" value="" />

        <label class="control-label" for="Terms_C">C</label>

        <input class="form-control text-box single-line" data-val="true" data-val-number="The field Commission must be a number." id="expiry-date" name="Terms.C" type="text" value="" />

        <label class="control-label" for="Terms_P">P</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.P" type="text" value="" />


    </div>
</div>

Я попробовал приведенный ниже способ захвата данных из моего html

  var items = {};
    $('.form-control text-box single-line').each(function () { 
        var obj = {
            id: $(this).find('.id').val(), 
            value: $(this).find('.value').val() 
        };
        o.items.push(obj); 
    });

Ответ №1:

Здесь это приведет к созданию объекта с использованием идентификатора / значения. ПРИМЕЧАНИЕ: Я добавил заданный интервал, чтобы вы могли вводить и видеть заполняемый объект.

 const buildItems = () => {
  let items = {};
  document.querySelectorAll('input').forEach(element => {
    items[element.id] = element.value;
  });
  return items;
};

// check every 5secs (just to demo working)
setInterval(() => console.log(buildItems()), 5000);  
 <div class="form-section">
    <div class="section-header">
        <span class="collapse-symbol"><i class="fas fa-angle-right"></i></span>
        <span class="section-title">
            Term
        </span>

    </div>
    <div class="content" id="quote-edit-form">

<div class="row-container">

    <div class="row-child">
        <label class="control-label" for="StartDate">StartDate Date</label>

        <input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="Start-date" name="Terms.StartDate" type="datetime" value="" />

        <label class="control-label" for="Terms_Date">Terms Date</label>

        <input class="form-control text-box single-line" data-val="true" data-val-date="The field Terms Date must be a date." id="continuity-date" name="Terms.ContinuityDate" type="datetime" value="" />

        <label class="control-label" for="Terms Period">Extension Period</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.ExtensionPeriod" type="text" value="" />
    </div>

    <div class="row-child">
        <label class="control-label" for="Terms.Choice">Choice</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.Law" type="text" value="" />

        <label class="control-label" for="Terms_C">C</label>

        <input class="form-control text-box single-line" data-val="true" data-val-number="The field Commission must be a number." id="expiry-date" name="Terms.C" type="text" value="" />

        <label class="control-label" for="Terms_P">P</label>

        <input class="form-control text-box single-line" id="expiry-date" name="Terms.P" type="text" value="" />


    </div>
</div>

Ответ №2:

  • $('.form-control text-box single-line') должно быть $('.form-control.text-box.single-line')

  • Для получения идентификатора используйте .attr('id')

  • Чтобы получить значение, используйте $(this).val()
  • Для получения данных используйте data('val') или .attr('data-val')
  • items = {}; должно быть items = [];
  • Идентификатор должен быть уникальным. Поэтому не используйте один и тот же идентификатор более чем для одного элемента

 var items = [];
$('.form-control.text-box.single-line').each(function () { 
    var obj = {
        id: $(this).attr('id'),
        dataVal : $(this).attr('data-val'),
        value: $(this).val() 
    };
    items.push(obj); 
});
console.log(items);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control text-box single-line" id="expiry-date1" name="Terms.Law" data-val="dataVal1" type="text" value="1" />
<input class="form-control text-box single-line" id="expiry-date2" name="Terms.Law" data-val="dataVal2" type="text" value="2" />
<input class="form-control text-box single-line" id="expiry-date3" name="Terms.Law" data-val="dataVal3" type="text" value="3" />

Чтобы добавить ключ для каждого obj .. используйте { [key] : .... } 

 var items = [];
$('.form-control.text-box.single-line').each(function () { 
    var obj = { 
      [$(this).attr('data-val')] : {
        id: $(this).attr('id'),
        dataVal : $(this).attr('data-val'),
        value: $(this).val() 
      }
    }
    items.push(obj); 
});
console.log(items);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control text-box single-line" id="expiry-date1" name="Terms.Law" data-val="dataVal1" type="text" value="1" />
<input class="form-control text-box single-line" id="expiry-date2" name="Terms.Law" data-val="dataVal2" type="text" value="2" />
<input class="form-control text-box single-line" id="expiry-date3" name="Terms.Law" data-val="dataVal3" type="text" value="3" />