Отображение значения нескольких выбранных флажков и формы, связанной с ними, в формате JSON - PullRequest
Новая
       6

Отображение значения нескольких выбранных флажков и формы, связанной с ними, в формате JSON

0 голосов
/ 06 ноября 2019

Я довольно новичок в javascript и также пытаюсь получить api для взаимодействия с бэкендом. Я сделал несколько флажков, значение которых я хочу сохранить в массиве (в формате json), если они выбраны, а также значения, которые будут введены в поля ввода, а затем отправлены этот массив в бэкэнд с помощью извлечения API, чтобы он могбыть использованы для обработки. Может кто-нибудь, пожалуйста, помогите мне здесь. 

$("#step1").click(function() {
  $("#checked1").css("display", "initial");
  $("#checked1").toggle($(this).prop("checked"));
});
      
$("#step2").click(function() {
  $("#checked2").css("display", "initial");
  $("#checked2").toggle($(this).prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p> Ready to start </p>
<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="Yes" name="demo" id="Yes">
  <label class="form-check-label" for="Yes">Yes</label>
</div>

<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="step1" name="demo" id="step1">
  <label class="form-check-label" for="step1">Check to start step1</label>

   <div id ="checked1" style="padding-left:20px; display: none;" class="custom-control-inline">

    <input type="text" id="inputValue" class="form-control form-centrol-sm" style="width: 60%; display: inherit;" placeholder="Enter your name">
      <hr style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;">
    </div>
</div>

<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="step2" name="demo" id="step2">
   <label class="form-check-label" for="step2">Check to start step2</label>

     <div id ="checked2" style="padding-left:20px; display: none;" class="custom-control-inline">
     <input type="text" id="inputValue" class="form-control form-centrol-sm" style="width: 60%; display: inherit;" placeholder="Enter your age">
      <hr style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;">
     </div>
</div>

1 Ответ

0 голосов
/ 06 ноября 2019

Хорошо, вот как вы получаете значения в массив. Если вы обновите свой вопрос, чтобы также показать, как вы планируете использовать API выборки, я обновлю свой ответ, чтобы включить его.

У меня есть такой массив, как ваш вопрос, но я бы хотелрекомендую использовать объект вместо этого, потому что это то, что JSON - JavaScript Object Notation. 

$("#step1").click(function() {
  $("#checked1").css("display", "initial");
  $("#checked1").toggle($(this).prop("checked"));
});
      
$("#step2").click(function() {
  $("#checked2").css("display", "initial");
  $("#checked2").toggle($(this).prop("checked"));
});

$('input').on('input', () =>{
  let dataArray = [ 
    "Yes checked: " + ($("#Yes").is(':checked')),
    "step1 checked: " + ($("#step1").is(':checked')),
    "step1 value: " + ($("#checked1Input").val() === "" ? "Not entered" : $("#checked1Input").val()),
    "step2 checked: " + ($("#step2").is(':checked')),    
    "step2 value: " + ($("#checked2Input").val() === "" ? "Not entered" : $("#checked2Input").val())
  ];
  
  let dataObject = {
  "Yes checked" : ($("#Yes").is(':checked')),
    "step1 checked" : ($("#step1").is(':checked')),
    "step1 value" : ($("#checked1Input").val() === "" ? "Not entered" : $("#checked1Input").val()),
    "step2 checked" : ($("#step2").is(':checked')),    
    "step2 value" : ($("#checked2Input").val() === "" ? "Not entered" : $("#checked2Input").val())  
  };
  
  let jsonArrayString = JSON.stringify(dataArray);
  let jsonObjectString = JSON.stringify(dataObject);
  console.clear();
  console.log("As an array: ", jsonArrayString);
  console.log("As an object: ", jsonObjectString);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p> Ready to start </p>
<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="Yes" name="demo" id="Yes">
  <label class="form-check-label" for="Yes">Yes</label>
</div>

<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="step1" name="demo" id="step1">
  <label class="form-check-label" for="step1">Check to start step1</label>

   <div id ="checked1" style="padding-left:20px; display: none;" class="custom-control-inline">

    <input type="text" id="checked1Input" class="form-control form-centrol-sm" style="width: 60%; display: inherit;" placeholder="Enter your name">
      <hr style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;">
    </div>
</div>

<div class="form-check checkbox-rounded checkbox-filled">
 <input type="checkbox" class="form-check-input filled-in" value="step2" name="demo" id="step2">
   <label class="form-check-label" for="step2">Check to start step2</label>

     <div id ="checked2" style="padding-left:20px; display: none;" class="custom-control-inline">
     <input type="text" id="checked2Input" class="form-control form-centrol-sm" style="width: 60%; display: inherit;" placeholder="Enter your age">
      <hr style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;">
     </div>
</div>
...