Using just Javascript, how can I prevent a disabled form element from output?

Question

I am trying to take my form which outputs to a text area on the same page and have it only show any enabled fields. You can see it at my JSFiddle here, Right now, when you click the "Combine" button it outputs all 4 categories even though two are disabled by default.

So it will output:

Optional Detail: 
Default Detail: 
Optional Selection: 
Default Selection:

But I want it to look like this if the details toggles are unchecked:

Default Detail: 
Default Selection:

Here's my script:

function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;

var output = "";

output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}

function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : 
toggle.disabled=true;
}

function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}

And the HTML:

<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>

<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea" 
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea" 
name="detailsgiven"  onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne" 
disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo" 
required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>

</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>

<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" 
required></textarea><br>
</td></tr>

<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()" 
id="combine3">Combine</button>
</div>
<br>

<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset 
form</button> <br> 
</div>
</form>

</td></tr></table>

I am still new to Javascript, I am guessing there is some variable to insert, but am not sure what it is. Any help is appreciated.

Store the output rows in an array, and iterate through the array, and check, if the corresponding element is disabled. If it is, exclude the row from the final output. — Teemu
– Teemu, Commented Sep 8, 2017 at 5:06
You can check the disabled property of html element by element.disabled. It will return true and false. If it is true then don't include it in your textarea code. — Lalit
– Lalit, Commented Sep 8, 2017 at 5:07
Here you are directly printing the statement you have to write some if condition and validate if it is disabled=true then print null. — Mehraj Khan
– Mehraj Khan, Commented Sep 8, 2017 at 5:29

Kunvar Singh · Accepted Answer · 2017-09-08 05:16:16Z

2

You May Try For This:

Here I just check the disabled property of the element, if element is not disabled then i added text to output,

function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
debugger;
var output = "";
if(!document.getElementById("detailToggle").disabled){
output += "Optional Detail: " + detailToggle + "\n";
}
if(!document.getElementById("basicDetail").disabled){
output += "Default Detail: " + basicDetail + "\n";
}
 if(!document.getElementById("selectOne").disabled){
    output += "Optional Selection: " + selectOne + "\n";
}
 if(!document.getElementById("selectTwo").disabled){
    output += "Default Selection: " + selectTwo + "";
}



document.getElementById("output3").value = output;
}

function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}

function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}

For More info visit me on: https://jsfiddle.net/66qpfyhh/8/

answered Sep 8, 2017 at 5:16

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ty H Over a year ago

Perfect that works great, exactly what I was looking for, thanks man :)

jdgregson · Accepted Answer · 2017-09-08 07:40:41Z

2

Use below javascript to check element is disabled first then append in variable

Check updated fiddle : https://jsfiddle.net/yogesh078/66qpfyhh/1/

function convertForm() {
    var detailToggle = document.getElementById("detailToggle");
    var basicDetail = document.getElementById("basicDetail");
    var selectOne = document.getElementById("selectOne");
    var selectTwo = document.getElementById("selectTwo");

    var output = "";

    if (!detailToggle.disabled) {
        output += "Optional Detail: " + detailToggle.value + "\n";
    }
    if (!basicDetail.disabled) {
        output += "Default Detail: " + basicDetail.value + "\n";
    }
    if (!selectOne.disabled) {
        output += "Optional Selection: " + selectOne.value + "\n";
    }
    if (!selectTwo.disabled) {
        output += "Default Selection: " + selectTwo.value + "";
    }

    document.getElementById("output3").value = output;

}

function toggle(checkboxID, toggleID) {
    var checkbox = document.getElementById(checkboxID);
    var toggle = document.getElementById(toggleID);
    updateToggle = checkbox.checked ? toggle.disabled = false : toggle.disabled = true;
}

function ResetForm() {
    document.getElementById("detailToggle").disabled = true;
    document.getElementById("selectOne").disabled = true;
}

edited Sep 8, 2017 at 7:40

jdgregson

1,6472 gold badges19 silver badges42 bronze badges

answered Sep 8, 2017 at 5:07

Yogesh

6855 silver badges13 bronze badges

1 Comment

Ty H Over a year ago

Thanks man, this works great as well, I was surprised to see three answers to quickly, Appreciate everyone taking a few minutes to help :)

Jino Shaji · Accepted Answer · 2017-09-08 05:14:09Z

This code snippet can solve your problem.

function convertForm() {
    var detailToggle = document.getElementById("detailToggle").value;
    var basicDetail = document.getElementById("basicDetail").value;
    var selectOne = document.getElementById("selectOne").value;
    var selectTwo = document.getElementById("selectTwo").value;
  
    if(document.getElementById("detailToggle").disabled)
     detailToggle='';
    if(document.getElementById("selectOne").disabled)
     selectOne='';
    var output = "";
    
    output += "Optional Detail: " + detailToggle + "\n";
    output += "Default Detail: " + basicDetail + "\n";
    output += "Optional Selection: " + selectOne + "\n";
    output += "Default Selection: " + selectTwo + "";
    document.getElementById("output3").value = output;
    }
    
    function toggle(checkboxID, toggleID) {
    var checkbox = document.getElementById(checkboxID);
    var toggle = document.getElementById(toggleID);
    updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
    }

    function ResetForm() {
    document.getElementById("detailToggle").disabled = true;
    document.getElementById("selectOne").disabled = true;
    }

<table width="100%" height=" " border="0"><tr>
    <td width=550 valign=top>

    <form name="Form3" onsubmit="return false;" action="">
    Toggle detail:
    <input type="checkbox" id="ChecktoggleDetail" class="formArea" 
    name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
    <input type="text" class="formArea" name="details"
    id="detailToggle" placeholder="Toggle field" disabled required>
    <br>
    Detail:
    <br>
    <input type="text" class="formArea" name="Basicdetail" id="basicDetail"
    placeholder="Some detail" maxlength="25" required>
    <br>
    Selection 1:
    <input type="checkbox" id="CheckselectOne" class="formArea" 
    name="detailsgiven"  onClick="toggle('CheckselectOne', 'selectOne')">
    <br>
    <select type="drop" class="formArea" name="Selectone" id="selectOne" disabled               required>
    <option value="" disabled selected>...</option>
    <option value="Option One">Option 1</option>
    <option value="Option Two">Option 2</option>
    </select>
    <br>
    Selection 2:
    <br>
    <select type="drop" class="formArea" name="Selecttwo" id="selectTwo" required>
    <option value="" disabled selected>...</option>
    <option value="Option One">Option 1</option>
    <option value="Option two">Option 2</option>
    </select>
    <br>

    </td>
    <td valign="top">
    <table border="0" height="200" ><tr><td valign="top" height=200>

    <textarea type="textarea" class="formArea" name="form3output" id="output3"
    onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" required>           </textarea><br>
    </td></tr>

    <tr><td valign=top>
    <div class="btn-group">
    <button value="Combine" onclick="convertForm()" id="combine3">Combine</button>
    </div>
    <br>

    <div class="btn-group2">
    <button type="reset" value="Reset form" onclick="ResetForm();">Reset form</button> <br> 
    </div>
    </form>

    </td></tr></table>

Thanks man, that works too, the only thing I noticed as an issue was that with this method, if one of the fields is enabled, and the others still disabled, it will still output all 4 categories instead of just 3. Still, it gets me closer than I was before.
It's all good man, like I said, it was still getting me closer than not. :)

Collectives™ on Stack Overflow

Using just Javascript, how can I prevent a disabled form element from output?

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related