getElementById 返回空值，因此发布空值。

huangapple
go评论83阅读模式
英文:

getElementById return empty values so post empty values

问题

以下是您要翻译的内容：

I'm working with DOM and web API to POST some information about the company like name, worker's name.

But when I write something in the input DOM can't reach the value and return empty so I post an empty object.

That looks like :

  1. adress: ""
  2. companyName: ""
  3. contactName: ""
  4. contactTitle: ""

My form block:

  1. <form>
  2.         <div class="form-group">
  3.           <label for="">Company Name</label>
  4.           <input
  5.             type="text"
  6.             class="form-control"
  7.             id="companyName"
  8.             placeholder="Company Name!"
  9.           />
  10.         </div>
  11.         <div class="form-group">
  12.           <label for="">Contact Name</label>
  13.           <input
  14.             type="text"
  15.             class="form-control"
  16.             id="contactName"
  17.             placeholder="Contact Name!"
  18.             value=""
  19.           />
  20.         </div>
  21.         <div class="form-group">
  22.           <label for="">Contact Title</label>
  23.           <input
  24.             type="text"
  25.             class="form-control"
  26.             id="contactTitle"
  27.             placeholder="Contact Title!"
  28.           />
  29.         </div>
  30.         <div class="form-group">
  31.           <label for="">Country</label>
  32.           <input
  33.             type="text"
  34.             class="form-control"
  35.             id="inputCountry"
  36.             placeholder="Country!"
  37.           />
  38.         </div>
  39.       </form>

And my JS code:

  1. 'use strict';
  3. let inputCompanyName = document.getElementById('companyName');
  4. let inputContactName = document.getElementById('contactName');
  5. let inputContactTitle = document.getElementById('contactTitle');
  6. let country = document.getElementById('inputCountry');
  8. const btnSubmit = document.getElementById('submit');
  10. let newCompany = {
  11.   companyName: inputCompanyName.value,
  12.   contactName: inputContactName.value,
  13.   contactTitle: inputContactTitle.value,
  14.   adress: country.value,
  15. };
  17. btnSubmit.addEventListener('click', e => {
  18.   e.preventDefault();
  19.   axios
  20.     .post('https://northwind.vercel.app/api/suppliers', newCompany)
  21.     .then(res => {
  22.       console.log('Response', res.data);
  23.       alert('Success!');
  24.     });
  25. });

I tried innerHTML and innerText and form method but I cant solve this problem.

英文:

I'm working with DOM and web API to POST some information about the company like name, worker's name.

But when I write something in the input DOM can't reach the value and return empty so I post an empty object.

That looks like :

  1. adress: ""

  2. companyName: ""

  3. contactName: ""

  4. contactTitle: ""

My form block:

  1. &lt;form&gt;
  2.         &lt;div class=&quot;form-group&quot;&gt;
  3.           &lt;label for=&quot;&quot;&gt;Company Name&lt;/label&gt;
  4.           &lt;input
  5.             type=&quot;text&quot;
  6.             class=&quot;form-control&quot;
  7.             id=&quot;companyName&quot;
  8.             placeholder=&quot;Company Name!&quot;
  9.           /&gt;
  10.         &lt;/div&gt;
  11.         &lt;div class=&quot;form-group&quot;&gt;
  12.           &lt;label for=&quot;&quot;&gt;Contact Name&lt;/label&gt;
  13.           &lt;input
  14.             type=&quot;text&quot;
  15.             class=&quot;form-control&quot;
  16.             id=&quot;contactName&quot;
  17.             placeholder=&quot;Contact Name!&quot;
  18.             value=&quot;&quot;
  19.           /&gt;
  20.         &lt;/div&gt;
  21.         &lt;div class=&quot;form-group&quot;&gt;
  22.           &lt;label for=&quot;&quot;&gt;Contact Title&lt;/label&gt;
  23.           &lt;input
  24.             type=&quot;text&quot;
  25.             class=&quot;form-control&quot;
  26.             id=&quot;contactTitle&quot;
  27.             placeholder=&quot;Contact Title!&quot;
  28.           /&gt;
  29.         &lt;/div&gt;
  30.         &lt;div class=&quot;form-group&quot;&gt;
  31.           &lt;label for=&quot;&quot;&gt;Country&lt;/label&gt;
  32.           &lt;input
  33.             type=&quot;text&quot;
  34.             class=&quot;form-control&quot;
  35.             id=&quot;inputCountry&quot;
  36.             placeholder=&quot;Country!&quot;
  37.           /&gt;
  38.         &lt;/div&gt;
  39.       &lt;/form&gt;

And my JS code:

  1. &#39;use strict&#39;;
  3. let inputCompanyName = document.getElementById(&#39;companyName&#39;);
  4. let inputContactName = document.getElementById(&#39;contactName&#39;);
  5. let inputContactTitle = document.getElementById(&#39;contactTitle&#39;);
  6. let country = document.getElementById(&#39;inputCountry&#39;);
  8. const btnSubmit = document.getElementById(&#39;submit&#39;);
  10. let newCompany = {
  11.   companyName: inputCompanyName.value,
  12.   contactName: inputContactName.value,
  13.   contactTitle: inputContactTitle.value,
  14.   adress: country.value,
  15. };
  17. btnSubmit.addEventListener(&#39;click&#39;, e =&gt; {
  18.   e.preventDefault();
  19.   axios
  20.     .post(&#39;https://northwind.vercel.app/api/suppliers&#39;, newCompany)
  21.     .then(res =&gt; {
  22.       console.log(&#39;Response&#39;, res.data);
  23.       alert(&#39;Success!&#39;);
  24.     });
  25. });

I tried innerHTML and innerText and form method but I cant solve this problem.

答案1

得分: 3

你正在加载页面时立即读取值，远在用户有机会输入任何值之前。

而是在单击事件中读取这些值：

  1. btnSubmit.addEventListener('click', e => {
  2.   let newCompany = {
  3.     companyName: inputCompanyName.value,
  4.     contactName: inputContactName.value,
  5.     contactTitle: inputContactTitle.value,
  6.     address: country.value,
  7.   };
  8.   // 其余的点击处理逻辑...
  9. });
英文:

You're reading the values immediately upon loading the page, long before the user has had a chance to enter any values.

Instead, read the values in the click event:

  1. btnSubmit.addEventListener(&#39;click&#39;, e =&gt; {
  2.   let newCompany = {
  3.     companyName: inputCompanyName.value,
  4.     contactName: inputContactName.value,
  5.     contactTitle: inputContactTitle.value,
  6.     adress: country.value,
  7.   };
  8.   // the rest of the click handler logic...
  9. });

huangapple
  • 本文由 发表于 2023年2月14日 05:43:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/75441476.html
  • axios
  • dom
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定