在不同的文件中使用Javascript获取表单数据

Get Form Data using Javascript in different file

本文关键字:Javascript 获取 表单 数据 文件      更新时间:2023-09-26

我有一个HTML文件和一个JavaScript文件来捕获数据,我曾试图捕获数据,但它不起作用,函数没有运行。

这是我的代码

HTML文件:

<form class="form-newsletter">
      <div class="form-group">
        <span><input type="text" name="name" value="" class="input-type" placeholder="Masukkan Email Anda"></span>
        <input type="submit" class="btn btn-yellow" value="SUBMIT" onclick="newsletterFormFunctions()"/>
       </div>
 </form>

JS文件:

function newsletterFormFunctions() {
NewsletterConfig.email = '';
NewsletterConfig.name = 'Test';
console.log('Enter Here');
$('form.form-newsletter input[type="submit"]').click(function (evt) {
    validateForm();
});
function validateForm() {
    $('form.form-newsletter input[type="submit"]').prop('disabled', true);
    $('form.form-newsletter input[type="submit"]').val('LOADING');
    NewsletterConfig.email = $('form.form-newsletter input.input-type').val();
  }
}

您应该将事件绑定放在'newsletterFormFunctions'函数之外,比如放在文档就绪事件处理程序中。

function newsletterFormFunctions() {
  NewsletterConfig.email = '';
  NewsletterConfig.name = 'Test';
  console.log('Enter Here');
}
$(document).ready(function() {
  $('form.form-newsletter input[type="submit"]').click(function(evt) {
    validateForm();
  });
  function validateForm() {
    $('form.form-newsletter input[type="submit"]').prop('disabled', true);
    $('form.form-newsletter input[type="submit"]').val('LOADING');
    NewsletterConfig.email = $('form.form-newsletter input.input-type').val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-newsletter">
  <div class="form-group">
    <span><input type="text" name="name" value="" class="input-type" placeholder="Masukkan Email Anda"></span>
    <input type="submit" class="btn btn-yellow" value="SUBMIT" onclick="newsletterFormFunctions()" />
  </div>
</form>