Question

我的要求：

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

我在显示数据方面遇到问题，因为它的消失速度如此之快。请告诉我错误在哪里以及如何解决。

Answer 1

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

$("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;”在表格标签上

Answer 2

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


});

首先，您要防止由preventDefault提交的表单的默认行为。
如果您希望在用户按下输入时进行搜索，请使用表单提交事件而不是点击事件。

Answer 3

我使用 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>

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

3 个答案: