使用外部 JS 文件捕获 HTML 表单数据答案

【问题标题】：Capture HTML form data with external JS file使用外部 JS 文件捕获 HTML 表单数据
【发布时间】：2014-06-21 03:33:59
【问题描述】：

我正在尝试在 HTML 页面（也有引导代码）上创建一个表单，当用户单击提交按钮时，我希望数据被同一目录中的外部 javascript 文件捕获和处理。但是，我认为我没有正确执行此操作，因为当我单击提交按钮时，页面会重新加载，并且添加的结果不会显示在下方。

这是文件的链接：https://gist.github.com/anonymous/2dc8c07d87469716f9d2

提前致谢！

【问题讨论】：

尝试将onclick="process()"更改为onclick="process(); return false;"
阅读stackoverflow.com/questions/13064179/…
抱歉，这对我不起作用。我试过 onclick 和 onsubmit

标签： javascript html twitter-bootstrap

【解决方案1】：

你必须改变

<button type="submit" class="btn btn-default" method="POST" onclick="process()">Submit</button>

到

<button type="button" class="btn btn-default" onclick="process()">Submit</button>

还有

function process(){
var q1 = document.getElementById("firstquartergrade").value;
var q2 = document.getElementById("secondquartergrade").value;
var result = q1+q2;
document.getElementById("result").innerHTML = result;
}

到

function process(){
var q1 = parseInt(jQuery("#firstquartergrade").val());
var q2 = parseInt(jQuery("#secondquartergrade").val()); 
var result = q1+q2; 
jQuery('#result').html(result);
}

【讨论】：

我试过了，还是不行。然后我尝试将其从 jQuery('#result').html(result) 更改为 jQuery('#result').text(result) 并在页面上打印出“NaN”
@user2411857 这个答案是错误的。你不能做一个 DOM 对象的parseInt()。你需要这样做：parseInt($("#firstquartergrade").val());

【解决方案2】：

你可以使用ajax来实现它。

这是你可以参考的小演示：

注意：根据您的要求更改 actionUrl

test.Html:

    <form action='actionUrl' class='ajax' method='post'>
         <input type='text' name='name' placeholder='Enter Name'/>
         <input type='submit' value='submit'/>
    </form>
    <div id='somediv'></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src='main.js'></script>

这里是 ajax 的全局方法。你可以使用它。

Main.js：

    $('form.ajax').on('submit',function(){

    var vForm=$(this),
        url=vForm.attr('action'),
        type=vForm.attr('method'),
        data={};

    vForm.find('[name]').each(function(){
       var vInput=$(this),
       name=vInput.attr('name'),
       value=vInput.attr('value');
       data[name] = value;
     });

     $.ajax({
        url:url,
        type:type,
        data:data,
        success:function(response){
            $('#somediv').html(response);
          } 
     });
     return false;
    });

【讨论】：