javascript - Disabling All Form Elements In Selected Div (edited) - Stack Overflow

admin管理员组

文章数量:1335371

I have one large form that is separated into different sections with divs. Each section is within the same form (bigform) and I need to make sure only one section is enabled/editable at a time. And if the user changes sections after entering data into one section, all data would be cleared from the old section before disabling it. The ideal way for me is to have something like this:

<form>
    <select name="selector">
        <option>Choose Which Div To Enable</option>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
    </select>
</form>


<form name="bigform">
    <div id="1">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="2">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="3">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>
</form>

When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. I've searched the web for hours but I cannot find a solution. What's the best method to achieve this?

I found this code online that does "almost" what I want but not quite. It 'toggles' the form elements in the given element (el). What I'm trying to do is sort of the opposite of this.

    <form>
        <select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))>
            <option>Choose Which Div To Enable</option>
            <option value='1'>One</option>
            <option value='2'>Two</option>
            <option value='3'>Three</option>
        </select>
    </form>
<script>
function toggleDisabled(el){
    try {
        el.disabled = el.disabled ? false : true;
    }
    catch(E){}

    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            toggleDisabled(el.childNodes[x]);
        }
    }
}
</script>

I have one large form that is separated into different sections with divs. Each section is within the same form (bigform) and I need to make sure only one section is enabled/editable at a time. And if the user changes sections after entering data into one section, all data would be cleared from the old section before disabling it. The ideal way for me is to have something like this:

<form>
    <select name="selector">
        <option>Choose Which Div To Enable</option>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
    </select>
</form>


<form name="bigform">
    <div id="1">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="2">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="3">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>
</form>

When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. I've searched the web for hours but I cannot find a solution. What's the best method to achieve this?

I found this code online that does "almost" what I want but not quite. It 'toggles' the form elements in the given element (el). What I'm trying to do is sort of the opposite of this.

    <form>
        <select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))>
            <option>Choose Which Div To Enable</option>
            <option value='1'>One</option>
            <option value='2'>Two</option>
            <option value='3'>Three</option>
        </select>
    </form>
<script>
function toggleDisabled(el){
    try {
        el.disabled = el.disabled ? false : true;
    }
    catch(E){}

    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            toggleDisabled(el.childNodes[x]);
        }
    }
}
</script>

• javascript

Share Improve this question Follow edited Feb 22, 2010 at 13:05 Chad asked Feb 22, 2010 at 12:33 ChadChad 2,45566 gold badges2727 silver badges3838 bronze badges 4

• i don't realy understand.. do you want to Disable All Element in the selected Div? – jjj Commented Feb 22, 2010 at 12:44
• I've edited the form to make it more clear that I'm NOT looking prevent some input elements from being submitted but to make only one section at a time availabe to the user. – Chad Commented Feb 22, 2010 at 12:45
• you mean if he finish filling and selecting on Div1 it will be disabled and Div2 will be enabled..and etc? – jjj Commented Feb 22, 2010 at 12:52
• please take a look. I've tried to clarify. – Chad Commented Feb 22, 2010 at 13:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

A way to solve it without using a scripting library such as jQuery:

function disableFormFields(container, isDisabled) {
  var tagNames = ["INPUT", "SELECT", "TEXTAREA"];
  for (var i = 0; i < tagNames.length; i++) {
    var elems = container.getElementsByTagName(tagNames[i]);
    for (var j = 0; j < elems.length; j++) {
      elems[j].disabled = isDisabled;
    }
  }
}

---

<select name="selector" onchange="partiallyDisableForm(this)">
  <!-- give every option a numeric value! -->
  <option value='0'>Choose Which Div To Enable</option>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

---

function partiallyDisableForm(selector) {
  // don't forget to give your form the ID "bigform"
  var form = document.getElementById("bigform");
  var parts = form.getElementsByTagName("DIV");

  for (var i = 0; i < parts.length; i++) {
    var part = parts[i];
    // give your form parts the ID "formpart_1" through "formpart_3"
    if (part.id.match(/^formpart_\d+$/)) {
      // you must implement what to do if selector.value is 0
      var isDisabled = (part.id != "formpart_" + selector.value);
      disableFormFields(part, isDisabled);
    }
  }
}

When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. So when user submits "bigform", only the values inside div 2 would be submitted.

No. the form will always be submitted as a whole, regardless of what elements were disabled in UI.

If you want to submit only one set of form items, create a separate form for each set.

Its not possible to prevent some input elements from submittng, and it might be safer/easier to do the selective saving on the server side, as it would stop erroneous results being saved if JS broke/was promised.

You could disable the elements not being submitted and maybe change their name attributes to ensure the values weren't used by the server.

You could also assign a name/value to a submit button, and parse this on the server-side. It would be trivial to use Javascript to set a value n the submit button to tell the server side to only the the required buttons.

So you have N sections with id's 1..N, and you want only section i to be active?

If you put it in that wording, I would code it somewhat like this - mind: my jQuery is not that strong, I'm merely pseudo-jQuerying:

function enable( element, sensitive ) {
   //recursively disable this node and it's children       
   element.disabled = !sensitive;
   if( element.childNodes ) {
      for( var i = 0; i != element.childNodes.length; ++i ) {          
       enable( element.childNodes[i], sensitive );
      }
   }
}

// this function should rely on the structure of your document
// it ought to visit all sections that need to be enabled/disabled
function enableSection( i ) {
   $("#bigform > div").each( function( index, element ) {
       enable( element, index==i );
   });
}

$("#sectionselector").change( function( ) {
   // find value of active section
   var activesection = $("#sectionselector").value; // or the like
   enableSection( activesection );
} ); 

本文标签： javascriptDisabling All Form Elements In Selected Div (edited)Stack Overflow