diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js index c353e1c7b2835db38817da57148e422417aaab91..7bf09fd57994e4c9e919ff7247c7d8a622f8d55a 100644 --- a/ippisite/ippidb/static/js/ippidb.js +++ b/ippisite/ippidb/static/js/ippidb.js @@ -26,38 +26,38 @@ document.getElementById("Name_"+id).innerHTML = "Compound "+ document.getElement } - - // CompoundForm - Function to hide/show input field according to the chosen type of molecule function showMol(id){ + var newID=id.slice(0, -1); + console.log("Test "+newID); if(document.getElementById(id).value=="smiles"){ - document.getElementById('divSmiles').style.display ='block'; - document.getElementById('divIupac').style.display ='none'; - document.getElementById('divSketch').style.display ='none'; - document.getElementById('in-smiles').required=true; - document.getElementById('in-sketch').required=false; - document.getElementById('in-iupac').required=false; + document.getElementById('divSmiles_'+newID+'0').style.display ='block'; + document.getElementById('divIupac_'+newID+'0').style.display ='none'; + document.getElementById('divSketch_'+newID+'0').style.display ='none'; + document.getElementById('in-smiles_'+newID+'0').required=true; + document.getElementById('in-sketch_'+newID+'0').required=false; + document.getElementById('in-iupac_'+newID+'0').required=false; } else if(document.getElementById(id).value=="iupac"){ - document.getElementById('divSmiles').style.display ='none'; - document.getElementById('divIupac').style.display ='block'; - document.getElementById('divSketch').style.display ='none'; - document.getElementById('in-smiles').required=false; - document.getElementById('in-iupac').required=true; - document.getElementById('in-sketch').required=false; + document.getElementById('divSmiles_'+newID+'0').style.display ='none'; + document.getElementById('divIupac_'+newID+'0').style.display ='block'; + document.getElementById('divSketch_'+newID+'0').style.display ='none'; + document.getElementById('in-smiles_'+newID+'0').required=false; + document.getElementById('in-iupac_'+newID+'0').required=true; + document.getElementById('in-sketch_'+newID+'0').required=false; } else if (document.getElementById(id).value=="sketch"){ - document.getElementById('divSmiles').style.display ='none'; - document.getElementById('divIupac').style.display ='none'; - document.getElementById('divSketch').style.display ='block'; - document.getElementById('in-smiles').required=false; - document.getElementById('in-iupac').required=false; - document.getElementById('in-sketch').required=true; + document.getElementById('divSmiles_'+newID+'0').style.display ='none'; + document.getElementById('divIupac_'+newID+'0').style.display ='none'; + document.getElementById('divSketch_'+newID+'0').style.display ='block'; + document.getElementById('in-smiles_'+newID+'0').required=false; + document.getElementById('in-iupac_'+newID+'0').required=false; + document.getElementById('in-sketch_'+newID+'0').required=true; } else { - document.getElementById('divSmiles').style.display ='none'; - document.getElementById('divIupac').style.display ='none'; - document.getElementById('divSketch').style.display ='none'; - document.getElementById('in-smiles').required=false; - document.getElementById('in-iupac').required=false; - document.getElementById('in-sketch').required=false; + document.getElementById('divSmiles_'+newID+'0').style.display ='none'; + document.getElementById('divIupac_'+newID+'0').style.display ='none'; + document.getElementById('divSketch_'+newID+'0').style.display ='none'; + document.getElementById('in-smiles_'+newID+'0').required=false; + document.getElementById('in-iupac_'+newID+'0').required=false; + document.getElementById('in-sketch_'+newID+'0').required=false; } } diff --git a/ippisite/ippidb/templates/CompoundForm.html b/ippisite/ippidb/templates/CompoundForm.html index bff7f766fdf142fa5d0ab5401b3994b3d3ef4ca8..29361b6bd8490a5c0140169d83b581a6f2368934 100644 --- a/ippisite/ippidb/templates/CompoundForm.html +++ b/ippisite/ippidb/templates/CompoundForm.html @@ -50,14 +50,14 @@ </div> {% endfor %} </div> - <div id="divSmiles"> - <input type="text" name="smiles" id="in-smiles" placeholder="Paste the SMILES of your molecule here" required> + <div id="divSmiles_{{ form.molecule.id_for_label }}"> + <input type="text" name="smiles" id="in-smiles_{{ form.compound_name.id_for_label }}" placeholder="Paste the SMILES of your molecule here" required> </div> - <div id="divIupac" class="hide"> - <input type="text" name="iupac" id="in-iupac" placeholder="Paste the IUPAC of your molecule here"> + <div id="divIupac_{{ form.molecule.id_for_label }}" class="hide"> + <input type="text" name="iupac" id="in-iupac_{{ form.compound_name.id_for_label }}" placeholder="Paste the IUPAC of your molecule here"> </div> - <div id="divSketch" class="hide"> - <input type="text" name="sketch" id="in-sketch" placeholder="Sketch your molecule here"> + <div id="divSketch_{{ form.molecule.id_for_label }}" class="hide"> + <input type="text" name="sketch" id="in-sketch_{{ form.compound_name.id_for_label }}" placeholder="Sketch your molecule here"> </div> <div id="ck-button-long" class="compound_input"> <label>{{ form.is_macrocycle}}<span>{{ form.is_macrocycle.label }}</span></label>