не может передать переменную через форму JavaScript - PullRequest
0 голосов
/ 08 ноября 2018

У меня есть эта форма в HTML-файле.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link href='https://fonts.googleapis.com/css? 
    family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' 
    type='text/css'>
    <TITLE>Test Input</TITLE>
    </head>
    <body>  
       <form name="compoundSearchForm" id="compoundSearchForm" action="#" 
       method="POST"  onsubmit="return validateForm(this.form)">
       <h1 id="header1"></h1>
       <section>
       <fieldset>
       <div><label for="CAS">CAS NO</label>
       <input type="RADIO" id="CAS" name="identifier" value="CAS" checked></div>
       <div><label for="inchikey">InChiKeys</label>
       <input type="RADIO" id="inchikey" name="identifier" value="inchikey"> 
       </div>
       <div><label for="smiles">SMILES</label>
       <input type="RADIO" id="smiles" name="identifier" value="smiles"></div>
       <div><label for="keyword">Keyword</label>
       <input type="RADIO" id="keyword" name="identifier" value="name"></div>
       <textarea id='userInput' type='textarea' name="userInput" Enter your 
       rows="15" cols="60" wrap="virtual">Enter your search here...</textarea> 
       <br/>
       <button type="reset">RESET</button>
       <button type="submit" name="compoundSearchButton" 
       id="compoundSearchButton" value="SEARCH" style="margin-right: 15px;" 
       >Search</button>
       </fieldset>
       </section>
    </form>
    <script type="text/javascript" src="bundle.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </body>
    </html>   

main.js содержит мой код JavaScript. bundle.js предназначен для просмотра. Вот содержимое файла main.js

//for radio buttons, get checked value
function identifierChecked(fieldName) {
  console.log(fieldName);
  var checkedValue;
  for(var x=0;x<fieldName.length;x++) {
    if(fieldName[x].checked) {
      checkedValue=fieldName[x].value;
      //console.log(checkedValue);
    }
   }
  return checkedValue;
}
let selectedIdentifier;
document.getElementById('compoundSearchForm').onclick = function (){
  selectedIdentifier=identifierChecked(document.getElementsByName('identifier'));
  console.log(selectedIdentifier); 
}

var inputValue=document.getElementById('userInput').value;
console.log(inputValue);
function validateForm (){ //enter code here }
validateForm();

Я не могу передать точные значения переменных для текстовой области (inputValue) и переключателей (selectedIdentifier) ​​после отправки формы. чего не хватает или что я делаю не так?

обратите внимание, все мои js-файлы выполняются на сервере nodejs. благодарю вас.

1 Ответ

0 голосов
/ 08 ноября 2018

В приведенном ниже примере показано, как вы можете получить значения из своих переключателей и текстовой области. Он помещает значения в div ниже формы, чтобы показать результаты:

function validateForm() {
  var identifier = document.getElementsByName("identifier");
  for (var x = 0; x < identifier.length; x++) {
    if (identifier[x].checked) {
      formResults.innerHTML = identifier[x].value;
    }
  }
  formResults.innerHTML = formResults.innerHTML + " , " + userInput.value;
  return false;
}
<form name="compoundSearchForm" id="compoundSearchForm" action="#" method="POST" onsubmit="return validateForm(this.form)">
  <h1 id="header1"></h1>
  <section>
    <fieldset>
      <div><label for="CAS">CAS NO</label>
        <input type="RADIO" id="CAS" name="identifier" value="CAS" checked></div>
      <div><label for="inchikey">InChiKeys</label>
        <input type="RADIO" id="inchikey" name="identifier" value="inchikey">
      </div>
      <div><label for="smiles">SMILES</label>
        <input type="RADIO" id="smiles" name="identifier" value="smiles"></div>
      <div><label for="keyword">Keyword</label>
        <input type="RADIO" id="keyword" name="identifier" value="name"></div>
      <textarea id="userInput" type="textarea" name="userInput" rows="15" cols="60" wrap="virtual">Enter your search here...</textarea>
      <br/>
      <button type="submit" name="compoundSearchButton" id="compoundSearchButton" value="SEARCH" style="margin-right: 15px;">Search</button>
    </fieldset>
  </section>
</form>
<div id="formResults" style="background-color: coral"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...