Question

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

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

提前致谢！

Answer 1

您可以使用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;
    });

Answer 2

你必须改变

<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);
}

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

2 个答案: