Firstly sorry for my weak English.
I'm working on a question form in TYPO3 template and I'm using the method getElementeryById() and onclick() inside the template, but in the output, every question between div /div does not show.
I tried to remove: (style.display="none") it works, but not in the right way, I wanted that the question appears when I choose yes or no, not always appear
I don't know why I can't put the code here, it's my first day with stuck overflow! And I don't know a lot about it.
<ul>
question 1 ? <br>
<f:form.textfield name="fonc" value="" placeholder="entre fonc name" /> <br>
question 2 ? <br>
oui<f:form.radio name="featureExists" value="1" onclick="featureExists()" id="featureExists" />
non<f:form.radio name="featureExists" value="0" onclick="featureExists()" id="featureDoesnotExists" />
<br>
<div id="ifFeatureExists" >
question 3 ? <br>
oui<f:form.radio name="tjrUtilise" value="1" onclick="javascript:tjrUtilise();" id="tjrUtilise" />
non<f:form.radio name="tjrUtilise" value="0" onclick="javascript:tjrUtilise();" id="pasUtilise" />
</div>
<div id="ifFeatureDoesnotExists" >
<f:flashMessages result 1 />
</div>
<div id="ifTjrUtilise">
question 4? <br>
oui<f:form.radio name="TER" value="1" onclick="javascript:ter();" id="ter" />
non<f:form.radio name="TER" value="0" onclick="javascript:ter();" id="nonTer" />
</div>
<div id="ifPasUtilise" >
<f:flashMessages result 2 />
</div>
<div id="ifTer" >
question 5? <br>
oui<f:form.radio name="compatible" value="1" onclick="javascript:compatible();" id="Compatible" />
non<f:form.radio name="compatible" value="0" onclick="javascript:compatible();" id="pasCompatible" />
</div>
<div id="ifNonTer" >
question 6? <br>
oui<f:form.radio name="emag" value="1" onclick="javascript:emag();" id="Emag" />
non<f:form.radio name="emag" value="0" onclick="javascript:emag();" id="pasEmag" />
</div>
<div id="ifCompatible" >
<f:flashMessages result 3 />
</div>
<div id="ifNonCompatible" >
<f:flashMessages result 4 />
</div>
<div id="ifEmag" style="display:none" >
question 7 ? <br>
oui<f:form.radio name="extVerCompatible" value="1" onclick="javascript:extVerCompatible();" id="extVerCompatible" />
non<f:form.radio name="extVerCompatible" value="0" onclick="javascript:extVerCompatible();" id="extVerNonCompatible" />
</div>
<div id="ifNonEmag" style="display:none" ><br>
question 8?<br>
<f:form.textfield name="extename" value="" placeholder="Enter extension" /> <br>
</div>
</ul>
<f:form.submit value="send" />
JavaScript to use
window.onload = function() {
document.getElementById('ifFeatureExists').style.display = 'none';
document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
}
function featureExists() {
if (document.getElementById('featureExists').checked) {
document.getElementById('ifFeatureExists').style.display = 'block';
document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
}
if(document.getElementById('featureDoesnotExists').checked) {
document.getElementById('ifFeatureDoesnotExists').style.display = 'block';
document.getElementById('ifFeatureExists').style.display = 'none';
}
}
function tjrUtilise() {
if(document.getElementById('tjrUtilise').checked) {
document.getElementById('ifTjrUtilise').style.display = 'block';
document.getElementById('ifPasUtilise').style.display = 'none';
}
if(document.getElementById('pasUtilise').checked) {
document.getElementById('ifPasUtilise').style.display = 'block';
document.getElementById('ifTjrUtilise').style.display = 'none';
}
}
function ter() {
if(document.getElementById('Ter').checked) {
document.getElementById('ifTer').style.display = 'block';
document.getElementById('ifNonTer').style.display = 'none';
}
if(document.getElementById('nonTer').checked) {
document.getElementById('ifNonTer').style.display = 'block';
document.getElementById('ifTer').style.display = 'none';
}
}
function compatible() {
if(document.getElementById('Compatible').checked) {
document.getElementById('ifCompatible').style.display = 'block';
document.getElementById('ifNonCompatible').style.display = 'none';
}
if(document.getElementById('pasCompatible').checked) {
document.getElementById('ifNonCompatible').style.display = 'block';
document.getElementById('ifCompatible').style.display = 'none';
}
}
function emag() {
if(document.getElementById('Emag').checked) {
document.getElementById('ifEmag').style.display = 'block';
document.getElementById('ifNonEmag').style.display = 'none';
}
if(document.getElementById('pasEmag').checked) {
document.getElementById('ifNonEmag').style.display = 'block';
document.getElementById('ifEmag').style.display = 'none';
}
}
function extVerCompatible() {
if(document.getElementById('extVerCompatible').checked) {
document.getElementById('ifextVerCompatible').style.display = 'block';
document.getElementById('ifextVerNonCompatible').style.display = 'none';
}
if(document.getElementById('extVerNonCompatible').checked) {
document.getElementById('ifextVerNonCompatible').style.display = 'block';
document.getElementById('ifextVerCompatible').style.display = 'none';
}
}
First of all, use some code inspection to verify if your JS is rendered properly. Remember that because of using curly brackets in JS and Fluid sometimes it will be hard or even impossible to implement because of conflicts in the syntax of both solutions. Instead, what you can do is NOT TO place any inline JavaScript within your Fluid template, instead, place it in separate *.js file and include in head or bottom of the page with TypoScript.
Optionally if you really need to place JavaScript inline then create your own ViewHelper which will just render the JS code into your Fluid template.
Anyway after the more detailed question you don't need to use ViewHelper for this.
Edit:
According to this answer https://stackoverflow.com/a/22038893/1066240 within the form, you should not use the same name for id and name of the onclick function, instead use unique name, i.e. by adding Func suffix to all function names :
function featureExistsFunc() {
console.log('FE');
if (document.getElementById('featureExists').checked) {
document.getElementById('ifFeatureExists').style.display = 'block';
document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
}
if(document.getElementById('featureDoesnotExists').checked) {
document.getElementById('ifFeatureDoesnotExists').style.display = 'block';
document.getElementById('ifFeatureExists').style.display = 'none';
}
}
And in your form use it as:
question 2 ? <br>
<label>oui<input id="featureExists" onclick="featureExistsFunc()" type="radio" name="featureExists" value="1"/></label>
<label>non<input id="featureDoesnotExists" onclick="featureExistsFunc()" type="radio" name="featureExists" value="0"/></label> <br>
<div id="ifFeatureExists" >
question 3 ? <br>
oui<input id="tjrUtilise" onclick="javascript:tjrUtiliseFunc();" type="radio" name="tjrUtilise" value="1" />
non<input id="pasUtilise" onclick="javascript:tjrUtiliseFunc();" type="radio" name="tjrUtilise" value="0" />
</div>
Do the same change for other functions.
I tested it locally and it works as excepted.