[Arshan]

Hello,

On a website there is going to be a form that the user can fill out. However this form is also going to function as a search form as well. Certian conditions may disable changing of what is in the field. I know how to enable or disable each one indivually, but my question is, is there a way to have all of them enable or disabled based on some settings? It would save a lot of time being able to do that, rather than going to each individual one, checking the settings and disabling or enabling there.

This is how I disable them:

disable="disabled" onfocus="this.blur();" style="background: #e2e2e2"

Just to try something I put that in my style.css with a div assigned to it, but it didn't work (I didn't think it would, but hey it was worth a shot). I'm not sure if it can be done with just using html, or if javascript or php will be needed, but they are html items so I'll start with this section of the forums. If it needs to be moved that's fine

Thanks.

[Kruithne]

Can you please post your style.css and HTML page these are on.

[Arshan]

Sure here is the css that I tried to use

p.titlepage {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: black;
}
p.lowerpage {
        font-size: 12px;
        font-style: italic;
        color: black; 
        
}
.TableData {
	font-style: normal;
	color: #000000 ;
	text-align: left;
	
}

.DisItem{
    
	border: 1px solid #999;
	background-color: #ddd;



}

That only works on the table though. From what I read CSS isn't able to disable items

This is a small quick part of the HTML page (I don't want to add the entire html page since it's pretty big)

 <td>           
            First Name:
        </td>
        <td>
            <input type ="text" name ="UserFirstName" disable="disabled" onfocus="this.blur();" style="background: #e2e2e2" value ="<?php echo ($userVO->UserFirstName); ?> ">
        </td>
    </tr>
    <tr>
        <td>
            Last Name:
        </td>
        <td>
            <input type ="text" name ="UserLastName" disable="disabled" onfocus="this.blur();" style="background: #e2e2e2"  value ="<?php echo ($userVO->UserLastName);?>">
        </td>
    </tr>
    <tr>

[Kruithne]

I know it's big but can you post the entire HTML, or at least all of the form so I can see the DIVs you are trying to disable the content inside.

[Kruithne]

Right - never mind about posting the entire HTML at the moment. Spent the last half hour or so making this little proto type script for you to take a look at.

<style>

    div { margin: 30px; }

</style>

<script>

    function disableDiv(toDisable)
    {
        elements = document.myForm.elements;
        for(var i = 0; i < elements.length; i++) {
            var elementName = elements[i].parentNode.getAttribute('name');
            if(elementName == toDisable)
            {
                elements[i].disabled = true;
                elements[i].parentNode.style.color = '#999999';
            }
        }
    }
    
    function enableDiv(toEnable)
    {
        elements = document.myForm.elements;
        for(var i = 0; i < elements.length; i++) {
            var elementName = elements[i].parentNode.getAttribute('name');
            if(elementName == toEnable)
            {
                elements[i].disabled = false;
                elements[i].parentNode.style.color = '#000000';
            }
        }
    }

</script>

<form name="myForm">

    <div name="section1">
         This div is section 1<br/><input type ="text" name="firstName" value =""/><input type ="text" name="lastName" value =""/>
    </div>

    <div name="section2">
        This div is section 2<br/><input type ="text" id="emailAddress" value =""/><input type ="text" id="somethingElseImportant" value =""/>
    </div>

</form>

<button onclick="disableDiv('section1')">Disable section 1</button><button onclick="enableDiv('section1')">Enable section 1</button><br/>
<button onclick="disableDiv('section2')">Disable section 1</button><button onclick="enableDiv('section2')">Enable section 2</button><br/>

Basically, it's two Javascript functions, a disable and an enable. You feed the function the NAME of the div (for example) you want to disable, and it will disable/enable all of the input elements inside of it. I've also added in a line to change the font colour of the element to grey. You can customize the functions to do other things with the elements as you can see.

If you need any more help with it or this is not what you were looking just say and I will do my best to help you.

[Arshan]

Hello,

Thank you for the script, that's pretty much what I am looking for, I just need to modify it to work in my page. I should be able to figure it out from here. Thanks again

[Kruithne]

No problem, glad it works for you. If you need further help feel free to ask.