CODEWITHSUNDEEP
javascripthtml
Timo
Timo

Reputation: 35

inputs preventing submit form

so i'm working on a script that looks like this 

<html>

CODE HTML WITH FORM ACTION POST

<script>
function chide() {
	document.getElementById("ccin").style.display = 'none';
    document.getElementById("naiss").style.display = 'none';
    		document.getElementById("account").style.display = 'none';


}
function ccheck(x) {
	chide();
	if(x == "variable1") {
		document.getElementById("account").style.display = '';
		document.getElementById("naiss").style.display = '';	}
		if(x == "variable2") {
		document.getElementById("account").style.display = '';

	}


</script>

<div>
                                        <td>
<tr><td width="560"><label> <font face="tahoma"> Your infos : </font></label></td>
                      <td width="">
                        <select style="width: 180px;" class="r_ddc_select" name="infos" onchange="ccheck(this.options[this.selectedIndex].value);" required="required">
                    <option value="">Select</option>
                    <option value="variable1">XXX</option>
                    <option value="variable1">YYY</option>
                    <option value="variable2">ZZZ</option>
                   

<input type="text" name="bithdate" required="" >

<input type="text" name="account" required="" >

<input type="text" name="ccin" required="" >

the problem is that when an input is not showing like for example variable2 only shows the input account, i can't submit the form because apparently the other inputs are preventing it even if they're not showing on the page and i need all the inputs with the required option

Upvotes: 0

Views: 54

Answers (1)

hawi
hawi

Reputation: 211

The required attribute will always prevent the form from being submitted when the input is not filled no matter if visible or not as long as it's part of the DOM. As an easy fix I would suggest you to disable required with document.getElementById("account").required = false; when hiding it and enable it again when showing it.

EDIT: improved functions suggestion

function chide() {
    document.getElementById("ccin").style.display = 'none';
    document.getElementById("naiss").style.display = 'none';
    document.getElementById("account").style.display = 'none';


    document.getElementById("ccin").required = false;
    document.getElementById("naiss").required = false;
    document.getElementById("account").required = false;
}
function ccheck(x) {
    chide();
    if(x == "variable1") {
        document.getElementById("account").style.display = '';
        document.getElementById("naiss").style.display = '';

        document.getElementById("account").required = true;
        document.getElementById("naiss").required = true;
    } else if(x == "variable2") {
        document.getElementById("account").style.display = '';
        document.getElementById("account").required = true;
    }

}

Upvotes: 1

Related Questions