Question 36843 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Checked Check Progress – Jquery

Here

As you can see above, I have the data I pulled from the database and these are the radio inputs.

Each one has unique database ids and I want to check here with jquery.

For example, if the phone does not select one of the 16GB or 32GB options, I want to give a warning. Since the data coming here comes with a loop, the same thing will enter the loop.

If it is selected, I want to get the values in it.

I would be glad if you could help me.

<form action="" type="POST" onsubmit="return false;">
  <div id="form_step_1">
    <div class="container">
      <div class="row">
        <div class="talepler mb-3">
          <H4>GB</H4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3 titles">
              <input class="inputs" type="radio" id="1" name="1">
              <label class="btn btn-pill" style="display: inline-block;">16 GB</label>
              <input class="inputs" type="radio" id="2" name="1">
              <label class="btn btn-pill" style="display: inline-block;">32 GB</label>
            </div>
          </div>
          <H4>DİSPLAY</H4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3 titles">
              <input class="inputs" type="radio" id="3" name="2">
              <label class="btn btn-pill" style="display: inline-block;">durable</label>
              <input class="inputs" type="radio" id="4" name="2">
              <label class="btn btn-pill" style="display: inline-block;">broken</label>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-success" id="gonder">Gönder</button>
      </div>
    </div>
  </div>
</form>
Tags:

2

Answers


  1. 0

    You can count the checked radios

    I must suggest you give them better names and IDs

    Note I gave the form an ID and removed the return false from the onsubmit

    If you want to submit if ok, then my code will work

    If you want to ajax the result, move the
    e.preventDefault() to the top of the submit event handler

    In this update I run over every title and look in the next div for radios.
    You can add other elements to each

    https://jsfiddle.net/mplungjan/L7nhjo10/

    $(function() {
  $("#myTable").on("submit", function(e) {
    e.preventDefault(); // comment this to submit when ok
    let errors = [],
      ids = [];
    $(".row h4").each(function() {
      let title = $(this).text(),
        $container = $(this).closest("div"), // parent
        $rads = $container.find("[type=radio]");
      if ($rads.length > 0) {
        let $chosen = $container.find("[type=radio]:checked");
        if ($chosen.length === 0) errors.push(title);
        else ids.push($chosen.attr("id"));
      }
    })
    if (errors.length > 0) {
      e.preventDefault();
      alert("Please choose " + errors.join(", "));
    } else console.log(ids);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="myTable" action="" type="POST" onsubmit="if (!window.__cfRLUnblockHandlers) return false; return false;">
  <div id="form_step_1">
    <div class="container">
      <div class="row">
        <div class="talepler mb-3">
          <h4>Telefon Hafızası Seçin</h4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input style="display: none" class="inputs" type="radio" id="1" name="1" value="1">
              <label class="btn btn-pill" style="display: inline-block;" for="1">16GB</label>
            </div>
          </div>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input style="display: none" class="inputs" type="radio" id="2" name="1" value="1">
              <label class="btn btn-pill" style="display: inline-block;" for="2">32GB</label>
            </div>
          </div>
        </div>
        <div class="talepler mb-3">
          <h4>Ekran Durumu Seçin</h4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input style="display: none" class="inputs" type="radio" id="3" name="2" value="1">
              <label class="btn btn-pill" style="display: inline-block;" for="3">Sağlam</label>
            </div>
          </div>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input style="display: none" class="inputs" type="radio" id="4" name="2" value="1">
              <label class="btn btn-pill" style="display: inline-block;" for="4">Kırık</label>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-success" id="gonder">Gönder</button>
      </div>
    </div>
  </div>
</form>
    Login or Signup to reply.
  2. 0

    i will make it simple for you !

    add a class to the inputs for exemple : storage or space

    preview :

    <div class="row mb-3" style="display: inline-block">
        <div class="col-sm-3 col-md-4 col-lg-3 titles">
          <input class="inputs storage" type="radio" id="1" name="1">
          <label class="btn btn-pill" style="display: inline-block;">16 GB</label>
          <input class="inputs storage" type="radio" id="2" name="1">
          <label class="btn btn-pill" style="display: inline-block;">32 GB</label>
        </div>
      </div>

    and then by jquery you can detect selected one:

    $('.storage').on('change',function(){
    let selected  = $('.storage:checked');
    console.log(selected.val());
})

    and for other inputs the same process

    add new class to them exemple : phone-status or somthing else

    and keep going 😀

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search