点击提交按钮Javascript HTML后显示表格数据

Display table data after clicking on submit button Javascript HTML

本文关键字：显示 表格 数据 HTML Javascript 提交 按钮      更新时间：2023-09-26

我的需求：

用户在搜索框中输入产品名称。我需要通过调用java脚本函数来显示该产品的价格。

我的HTML:

<form class="form-wrapper cf">
                            <input type="text" id="valbox" placeholder="Search here..." required>
                            <button type="submit" id="butval">Search</button>
                        </form>

我的Java脚本函数：

<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><'/script>')
                window.onload = function(){
                document.getElementById('butval').onclick = function(){
                    var product= document.getElementById('valbox').value;   
                    initComparison('mobile_phones',product,'saibrpwx','HGYMDNVKJGSPFQCP');
                }
}; 
    </script>
    </script>

我在显示数据时遇到了问题，因为它消失得太快了。请告诉我错误在哪里以及如何修复。

http://jsfiddle.net/jfs5j67h/

 <form class="form-wrapper cf" id="cf-form">
  <input type="text" id="valbox" placeholder="Search here..." required>
  <button type="submit" id="butval">Search</button>
</form>
$("#cf-form").on('submit',function(e){
    e.preventDefault();
    var product=$('#valbox').val();
   // alert($('#valbox').val());
    initComparison('mobile_phones',product,'saibrpwx','HGYMDNVKJGSPFQCP');

});
  1. 首先，您希望防止preventDefault提交的表单的默认行为
  2. 如果您希望在用户按下回车键时也能进行搜索，请使用表单提交事件而不是单击事件

表单正在提交，您可以在类似的表单中使用提交

$("form").submit(function(){
     if(comparehere){
          return true; //send the form to the server
     }else{
         return false; //not send the form because is invalid
      }
})

很抱歉，如果这不是你的answare，但你需要在用javascript验证之前不提交表单，你也可以在表单标签

上添加onsubmit="return false；"

我已经使用DOM模型与浏览器进行交互。之后，我分配了变量和数组来存储每列的数据"AddRow"；是一个当我们按下"；提交"；按钮然后使用"；。getElementById"；方法，它将返回具有指定值的ID属性的元素。增加用于添加新行的变量。确保连接给定的函数"；Addrow"，至"；提交"；按钮使用样式标记。

<script>
    let x=0;
    let n=1;
    var list1=[];
    var list2=[];
    var list3=[];
    var list4=[];
    //creating function
    function AddRow(){
        var AddRow = document.getElementById("show");
        var NewRow = AddRow.insertRow(n);
        list1[x] = document.getElementById("fname").value;
        list2[x] = document.getElementById("lname").value;
        list3[x] = document.getElementById("email").value;
        list4[x] = document.getElementById("age").value;
        var cel1=NewRow.insertCell(0);
        var cel2=NewRow.insertCell(1);
        var cel3=NewRow.insertCell(2);
        var cel4=NewRow.insertCell(3);
        cel1.innerHTML=list1[x];
        cel2.innerHTML=list2[x];
        cel3.innerHTML=list3[x];
        cel4.innerHTML=list4[x];
        x++;
        n++;
    }
</script>
相关文章：