Making all form inputs to be in readonly mode while clicking submit button

Question

I have a form when the submit button is clicked form's all inputs needs to be in read-only mode and hide submit button and also displays submitting text. For this I coded:

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").prop('readonly', true); //Making all inputs to readonly

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

When I click the submit button it hides the submit button and shows submitting text. But it doesn't change the input property to read-only mode.

Mamun · Accepted Answer · 2020-05-31T12:40:57.243

For radio button use disabled property:

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").prop('disabled', true); //Making all inputs to disabled

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

If you want send the selected value to the server then probably you can set the pointer-events to none which will indicate that the element is not the target of pointer events:

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text
    $("#testform :input").css({'pointer-events':'none', 'opacity':'.5'});
    $('.option_div p').css({'opacity':'.5'});
    $('.option_div p').click(false);
    console.log($("form").serialize());
  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

Will that submit the true checked values to the server? As per [this](https://stackoverflow.com/a/7730719/12912453) it will not. — jagu2020, May 31 '20 at 11:00
@jagu2020, please check the second answer to handle the issue:) — Mamun, May 31 '20 at 11:57
I guess, we also have to set `pointer-events` to `none` to labels. As it is checking the radio if we click the label. — jagu2020, May 31 '20 at 12:10
For the label I added: `$(".label_pointer_event").css({'pointer-events':'none', 'opacity':'.5'});` — jagu2020, May 31 '20 at 12:30
@jagu2020, I think that will not work as you expect, please check the updated answer with the possible solution:) — Mamun, May 31 '20 at 12:45

score 0 · Answer 2 · answered May 31 '20 at 11:06

Readonly does not work on radio buttons, you can use disabled: true, however...

See this answer to understand the difference between disabled and readonly: What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").attr('disabled', true); //Making all inputs to readonly

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

Will that submit the true checked values to the server? As per [this](https://stackoverflow.com/a/7730719/12912453) it will not — jagu2020, May 31 '20 at 11:09
It will not, however, you could use css to disable pointer events and send your data via ajax... define a class in css, adjust opacity and then addClass('disabledPointerClass'), problem is you would also have to use e.preventDefault() so the page would not refresh which means sending your form data via ajax/json — dale landry, May 31 '20 at 12:30

Making all form inputs to be in readonly mode while clicking submit button

2 Answers2