如何从选择表单中获取选项的值并将其提交到firebase

时间:2017-08-25 14:09:59

标签: javascript html5 web firebase-realtime-database

我想获取所选选项的值并插入我的firebase数据库。

var config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxx"
  };
  firebase.initializeApp(config);

var messagesRef = firebase.database().ref('choices');

document.getElementById('select').addEventListener('submit',submitForm);

function submitForm(e){
    e.preventDefault();  
    //get input values
    var name = getInputVal('name');
    
    var x  = document.getElementById('career');
    const career = x.options[x.selectedIndex].text;
   saveMessage(name,career);
    document.getElementById('select').reset(); 
}

 function getInputVal(id){
     return document.getElementById(id).value;
}

function saveMessage(name, career){
    var newMessageRef = messagesRef.push();
    newMessageRef.set({
      name: name,
      career:career
    });
  }
<form id="select">
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input is-primary" type="text" placeholder="" id="name">
    </div>
  </div>
  <div class="field">
    <label class="label">Career</label>
    <div class="control">
      <div class="select is-primary">
        <select id="career">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
      </div>
    </div>
  </div>
  <button class="button is-primary is-outlined" type="submit">Ajouter</button>
</form>

当我删除选择字段时,它可以正常工作,但是当使用select字段的submite时不显示任何内容。

提前感谢您的帮助

2 个答案:

答案 0 :(得分:0)

<appSettings>
          <add key="uName" value="myValue" />
</appSettings>

您的表单已命名 - &gt;选择。当我把它改为:

document.getElementById('personForm').addEventListener('submit',submitForm)

工作正常!您可以选择select - &gt;的值选项,x.value。

答案 1 :(得分:0)

它很奇怪,但它的工作我只需要在const career = x.options[x.selectedIndex].text;中将const更改为var

我不知道为什么在这种情况下我不能使用常量