javascript - Jquery 不从表单字段获取值

Question

我正在尝试使用 Jquery 在 click 事件之后操作表单字段中的值，但由于某种原因，我似乎无法让它从表单中获取任何内容，并且我不要认为这是 jQuery 语法，因为我在程序的其他地方成功地使用了它。

HTML:

<form class="centered formula-form">
  <input type="text" id="project" name="project" placeholder="Name your project"  maxlength="20" required />
  <input type="text" id="description" name="description" placeholder="Give it a brief description"  maxlength="35" required /> <br /> <br />
  <input type="text" id="name" placeholder="Ingredient Name" required  />
  <input type="number" id="amount" placeholder="0" min="0" step="0.1" required />
  <input type="text" id="notes" placeholder="form, supplier, etc" />
  <input type="submit" value="Add Ingredient" class="pure-button" />
</form>

<table class="centered-block pure-table pure-table-striped formula-table">
  <thead class="thead-styled">
    <tr class="centered">
        <th>Ingredient</th>
        <th>Amount</th>
        <th>Notes</th>
        <th></th>
    </tr>
  </thead>
  <tbody class="formula-body">
  </tbody>
</table>
<button type="submit" value="Submit" class="pure-button pure-button-primary formula-submit" >Submit</button>

当单击 button class="formula-submit" 时，我尝试保存表单值，如下所示:

JQuery:

$('.formula-submit').click(function(){
  //declare variables
  var projectName = $('#project').val();
  var description = $('#description').val();
});

但这并没有奏效。我也尝试过:

$('input:text[name=project]').val()

但是没有骰子。

据我所知，这些选择器应该可以工作，对我来说更奇怪的是，在同一个文件中，我使用 $('#project ').val() 约定并且它工作得很好，所以我不确定我的代码结构是什么阻止了我获取这些值。

我已经完成了 console.log 来验证 jQuery 是否确实记录了单击事件，而且确实如此。

Answer 1

我不确定您遇到的问题是什么。我并没有真正更改您的代码，但如果您运行下面的代码片段，在 #projectName 和 #description 字段中添加一些文本，然后单击提交，它会在 console.logs 中显示他们出去。这就是你想要做的吗？

$('.formula-submit').click(function(){
  var projectName = $('#project').val();
  var description = $('#description').val(); 
  console.log( `Your projectName is ${projectName}` );
  console.log( `Your description is ${description}` );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="centered formula-form">
  <input type="text" id="project" name="project" placeholder="Name your project"  maxlength="20" required />
  <input type="text" id="description" name="description" placeholder="Give it a brief description"  maxlength="35" required /> <br /> <br />
  <input type="text" id="name" placeholder="Ingredient Name" required  />
  <input type="number" id="amount" placeholder="0" min="0" step="0.1" required />
  <input type="text" id="notes" placeholder="form, supplier, etc" />
  <input type="submit" value="Add Ingredient" class="pure-button" />
</form>
<button type="submit" value="Submit" class="pure-button pure-button-primary formula-submit" >Submit</button>