CODEWITHSUNDEEP
jqueryhtml
Diasline
Diasline

Reputation: 635

Disable all field inside of div with jQuery

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);
});

Upvotes: 0

Views: 177

Answers (3)

user6306748
user6306748

Reputation:

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....

Upvotes: 1

Jordy Garc&#237;a
Jordy Garc&#237;a

Reputation: 141

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);

Upvotes: 0

mplungjan
mplungjan

Reputation: 178255

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>

Upvotes: 0

Related Questions