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

我的要求：

用户在搜索框中输入产品名称。我需要通过调用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>

window.jQuery | | document.write（“”）
window.onload=函数（）{
document.getElementById（'butval'）。onclick=function（）{
var product=document.getElementById（'valbox'）。值；
初始比较（“手机”、“产品”、“saibrpwx”、“HGYMDNVKJGSPFQCP”）；
}
}; 

---

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

表单正在提交。您可以在这样的表单中使用提交

$("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；”

搜寻
$（“#cf form”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var乘积=$（'#valbox'）.val（）；
//警报（$（'#valbox'）.val（））；
初始比较（“手机”、“产品”、“saibrpwx”、“HGYMDNVKJGSPFQCP”）；
});

首先，您希望防止表单的默认行为，默认情况下，表单是submit

如果希望在用户按enter键时搜索工作，请使用表单提交事件而不是单击事件

---

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

<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>

设x=0；
设n=1；
var list1=[]；
var list2=[]；
var list3=[]；
var list4=[]；
//创建函数
函数AddRow（）{
var AddRow=document.getElementById（“显示”）；
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（“年龄”）.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++；
}

实际上没有错误，代码按原样工作。如果不需要提交表单，为什么要使用

input type=“submit”

？改为使用

type=“button”

进行更正，添加

返回false在单击事件函数的末尾。@Teemu是一个搜索框，用户在其中输入产品名称并单击搜索按钮。然后需要显示不工作的表。如果你能和我分享你的知识来解决这个问题，那就太好了this@user2603466我没有分享我的知识吗？@skobaljic:谢谢你的意见，当我按照建议添加return false时。数据正在显示。但如果我在搜索框中输入另一个产品名称而不刷新页面，则会显示新数据和旧数据。如何解决这个问题？@Mayank Gupta valbox应该作为输入传递给initComparison函数，如上所述。请告诉我在哪里调用该函数以及如何调用@Mayank Gupta非常感谢您的帮助感谢您的支持请不要只是粘贴代码，还要解释代码。
<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>