Disable all field inside of div with jQuery

Question

I happen to disable a div that has some form fields inside of it. I have other fields out of that div. When I submit the form, the fields inside the disabled div are sent empty to the database.How can I prevent all the fields inside the disabled div to submit since they are disabled. My purpose is to save the fields inside the disable div into a table if disabled is false. The fields out of the div will be saved in another table.

I had tried to put readonly, but this can't prevent them form from submit.

<form>
  <div id="disable_texarea">
    <textarea class="form-control" id="textarea1"  disabled ></textarea>
    <textarea class="form-control" id="textarea2"   disabled></textarea>
    <!--there are many  inside  the disabled div-->
  </div>

  <input type="text" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
</form>

js

$(document).ready(function() {
  $("#disable_texarea *").prop('disabled', true);
});

Sounds VERY suspect. https://stackoverflow.com/questions/1355728/values-of-disabled-inputs-will-not-be-submitted - also your ID is not in your code — mplungjan, Nov 23 '17 at 21:57
Your link is different from my question because my disabled fields are submitted. — Diasline, Nov 23 '17 at 22:00
So you're trying to submit only the enabled values? The disabled values should just be discounted? — Obsidian Age, Nov 23 '17 at 22:00
Browsers should NOT send disabled fields - so there is something else going on, like your server code THINKING it is getting empty fields? — mplungjan, Nov 23 '17 at 22:01
You do not have anz `deactivate_antecedante` ID in your html — mplungjan, Nov 23 '17 at 22:01

score 1 · Answer 1 · 2017-11-24T10:56:51.307

If i understand your question you can do this, insert an id in the form, like this

<form id="myForm">
<div id="disable_texarea">
   <textarea class="form-control" id="textarea1"  disabled > </textarea>
  <textarea class="form-control" id="textarea2"   disabled> </textarea>
   <!--there are many  inside  the disabled div-->
</div>

   <input type="text" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
</form>

After you will have the submit button you can do

  array=[];
  $('#submitButton').submit(function(event){
     $('#myForm textarea').each(function(k,w){
        disabledText = $(w).is(':disabled'));
        if (disabledText == true){
           idOfTheDisabledTextarea = w.id;
           array.push(idOfTheDisabledTextarea);//<--insert id disabled in an array
           console.log(idOfTheDisabledTextarea); //<--These are the id of the disabled textarea 
        }

     });
  });
  console.log(array);

if you want the name to get in the server side insert the name on the html and in the if you will write

     nameOfTheDisabledTextarea = w.name;

And after with these names you can do what you want when do the insert on the DB. You have your array of named disabled this i suppose, from the server you can do if the name is in array disabled then save in table A otherwise in table B...in this way...I think use arrays is best solution but you can do how you want when you have the name of the textare or input disabled but you need a discriminating factor, i think the array is the best if the name is in array after is disabled..For sure i prefer to use an Ajax call in this breaker instead that a submit button because with the ajax you can manipulate the DOM and after attach the array at the ajax data, IMHO is better do an ajax call instead that a submit button but you can do also in the submit event of jquery but there you must append the array to the datas submitted. If i understand the question.....Bye....

thanks for your explanations. I solved my problem on sever side instead. However your response is relevant. — Diasline, Nov 24 '17 at 13:11

score 0 · Answer 2 · answered Nov 23 '17 at 22:11

Give the fields a name - if no name, nothing is sent

See this, only one field is found - the disabled named textarea is also not found

$(function() {
  $("#disable_texarea *").prop('disabled', true);
  $("#but").on("click", function() {
    console.log($(this).closest("form").serialize())
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="disable_texarea">
    <textarea class="form-control" name="textarea1" id="textarea1" disabled></textarea>
    <textarea class="form-control" id="textarea2" disabled></textarea>
    <!--there are many  inside  the disabled div-->
  </div>

  <input type="text" name="input1" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
  <input type="button" id="but" value="click" />
</form>

Still not working how? What do you see? You did not post the server code — mplungjan, Nov 24 '17 at 04:52

score 0 · Answer 3 · edited Nov 24 '17 at 02:50

0

Try to access to all children of your div with jQuery, just like this.

$("#disable_textarea").children().prop("disabled", true);

Or

$("#disable_textarea").children().attr("disabled", true);

edited Nov 24 '17 at 02:50

Shiladitya

12,003
15
25
38

answered Nov 23 '17 at 22:33

Jordy García

141
1
8

Disable all field inside of div with jQuery

3 Answers3