CODEWITHSUNDEEP
javascripthtml
Kalev Kalm
Kalev Kalm

Reputation: 39

Checking that at least one textarea is filled

I need help with adding a controll that checks that atleast one on the textareas is filled so that people wouldnt save blank forms. so it should controll that at least on element is checked and filled, otherwise it should give an error and wouldnt save. If anyone would have an idea how to do so, I would greatly appreciate it. The code that Im working with is down below (actually have more textareas but they are the same only with another names).

<tr>
<td valign="top" style='width: 300px;'>Family members help</td>
<%
elemText = xml.getElementFromXPath("//nursing_care/family_help/tekst");
%>
<td valign="top"><input <%=(elemText==null?"checked=\"checked\"":"") %> value="0" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio" checked="checked">Valimata
<input <%=(elemText!=null?"checked=\"checked\"":"") %> value="1" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio">Määratud</td>
<td>
<textarea style='width: 350px' style="display:<%=(elemText==null?"none":"block") %>" id="//nursing_care/family_help/tekst" name="//nursing_care/family_help/tekst"><%=(elemText!=null?elemText.getText():"") %></textarea>
</td>
<td><input style="display:<%=(elemText==null?"none":"block") %>" type="text" class="txt_left" id="//nursing_care/family_help/date" name="//nursing_care/family_help/date" value="<%=xml.getText("//nursing_care/family_help/date")%>" maxlength="10" size="10" 
onchange="gnlDateValid(this,event); if(event.returnValue != false);" onfocus="gnlGotFocus(getCurrentDate(),this); inputChanged(this);" onkeydown="gnlKeyDown('00.00.0000',this,event);" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" class="button_save button" value="Salvesta" />
<input type="button" class="button" value="Sulge" onclick="window.close()" /></td>
</tr>
</tfoot>

And here is the function that shows/hides the textareas (just in case)

function showText(obj){
    var elements = document.getElementsByName(obj.name);
    var element = getNode(obj.name + "/tekst");
    if (elements[0].checked)
        element.style.display="none";
    else
        element.style.display="block";


         var element = getNode(obj.name + "/date");
            if (elements[0].checked)
                element.style.display="none";
            else
                element.style.display="block";


}

Upvotes: 0

Views: 300

Answers (1)

Praind
Praind

Reputation: 1581

Something like this should work.

Extend the submit button like this.

<input type="submit" class="button_save button" value="Salvesta" onclick="return submitCheck()"/>

and implement this function in your javascript file.

function submitCheck(){
    var form = document.forms[0];
    var textareas = form.getElementsByTagName("textarea");

    for(var textarea in textareas){
        if(textarea.value !== ""){
            return true;
        }
    }

    return false;
}

BTW i would recommend you to use jQuery when working with the HTML DOM ;-)

Upvotes: 1

Related Questions