Ajax h:commandButton'；s onclick JavaScript方法dosen'；在提交表单之前，请不要运行

大家好。我是jsf新手。
现在我知道，要设置托管Bean属性，我可以使用表单，但我在jsf页面中使用JavaScript。
我想要的是在提交表单之前执行javascript方法eonclickAdd（），这样用户就可以看到突尼斯的anychart地图在表格中发生了什么变化。 我的jsf页面有一个下拉列表

   <h:form>
    Gouvernorats &#160; Temperature (C°) <br/>
     <h:selectOneMenu id="list" value="#{GouvBean.name}" >
         <f:selectItem itemValue="Tunis" itemLabel="Tunis" />
         <f:selectItem itemValue="Médenine" itemLabel="Medenine"/>
         <f:selectItem itemValue="Gabès" itemLabel="Gabès"/>
         <f:selectItem itemValue="Sfax" itemLabel="Sfax"/>
         <f:selectItem itemValue="Sidi Bou Zid" itemLabel="Sidi Bou Zid"/>
         <f:selectItem itemValue="Kassérine" itemLabel="Kassérine"/>
         <f:selectItem itemValue="Mahdia" itemLabel="Mahdia"/>
         <f:selectItem itemValue="Sousse" itemLabel="Sousse"/>
         <f:selectItem itemValue="Monastir" itemLabel="Monastir"/>
         <f:selectItem itemValue="Tataouine" itemLabel="Tataouine"/>
         <f:selectItem itemValue="Kebili" itemLabel="Kebili"/>
         <f:selectItem itemValue="Tozeur" itemLabel="Tozeur"/>
         <f:selectItem itemValue="Bèja" itemLabel="Bèja"/>
         <f:selectItem itemValue="Jendouba" itemLabel="Jendouba"/>
         <f:selectItem itemValue="Bizerte" itemLabel="Bizerte"/>
         <f:selectItem itemValue="Manubah" itemLabel="Manubah"/>
         <f:selectItem itemValue="Ben Arous" itemLabel="Ben Arous"/>
         <f:selectItem itemValue="Zaghouan" itemLabel="Zaghouan"/>
         <f:selectItem itemValue="Siliana" itemLabel="Siliana"/>
         <f:selectItem itemValue="Le Kef" itemLabel="Le Kef"/>
         <f:selectItem itemValue="Gafsa" itemLabel="Gafsa"/>
         <f:selectItem itemValue="Kairaouan" itemLabel="Kairaouan"/>
         <f:selectItem itemValue="Nabeul" itemLabel="Nabeul"/> 


     </h:selectOneMenu>

     <h:inputText id="Temperature" value="#{GouvBean.temperature}" ><f:ajax listener="#{GouvBean.inchange}"/></h:inputText>


     <h:commandButton value="+"onclick="onClickAdd();" >
        <f:ajax execute="@form"/>
    </h:commandButton>
  </h:form>

Gouvernorats和#160；温度（摄氏度）

javascript方法更改表和AnyChart映射：
这是表格：

     <table id="myTable">
         <thead><tr><th>Gouvernorats</th><th>Temperature</th>   </tr></thead>
         <tbody></tbody>

     </table>

高温诺温度

这是JavaScript方法：

     //Define a JavaScript method
        function onClickAdd(){

            //saving the value of the list
         var Gov = document.getElementById("list");
         var Gid=Gov.options[Gov.selectedIndex];
         //deleting  the current valye(added value) from the list
                Gov.remove(Gov.selectedIndex)
         var C°=document.getElementById('Temperature');

            //Getting refrence to tbody
            var tbodyRef=document.getElementById("myTable").getElementsByTagName("tbody")[0];
            //appending a row to tbody
            var row=tbodyRef.insertRow(tbodyRef.rows.length);

            var cell1=row.insertCell(0);
            var cell2=row.insertCell(1);
            var cell3=row.insertCell(2);

            //Creation of delete button
            var del=document.createElement("BUTTON");
            var t=document.createTextNode("-");

            //Giving value to the cells 
            cell1.innerHTML=Gid.value;
            cell2.innerHTML=C°.value;
            cell3.appendChild(del);



            //adding a listener to the button   
            del.appendChild(t);
            //OnAddChangeValue(cell1.innerHTML,cell2.innerHTML);




            del.addEventListener("click",function(){

            //1)knowing the row where the button is(index)
            var x=del.parentNode.parentNode.rowIndex;
                x=x-1;

            //2)moving the value of the first cell back to the list
            var l=document.getElementById("list");

              //create option node
            var node=document.createElement("option");

              //create attribute value
            var attr1=document.createAttribute("value");

               //creation of label
            var label=document.createTextNode(tbodyRef.rows[x].cells[0].innerHTML);

                 //setting a value to the attribute
                 attr1.value=tbodyRef.rows[x].cells[0].innerHTML;

                  //linking...
                  node.setAttributeNode(attr1);
                  node.appendChild(label);
                  l.appendChild(node);
            //3)deleting the row from the tbody

                    tbodyRef.deleteRow(x);

            //  OnDeleteChangeValue(cell1.innerHTML);

            });

            }

     </script>

//定义一个JavaScript方法
函数onClickAdd（）{
//保存列表的值
var Gov=document.getElementById（“列表”）；
var Gid=Gov.options[Gov.selectedIndex]；
//从列表中删除当前值（增值）
Gov.remove（Gov.selectedIndex）
var C°=document.getElementById（“温度”）；
//获得对tbody的引用
var tbodyRef=document.getElementById（“myTable”）.getElementsByTagName（“tbody”）[0]；
//将行追加到tbody
var row=tbodyRef.insertRow（tbodyRef.rows.length）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
//创建删除按钮
var del=document.createElement（“按钮”）；
var t=document.createTextNode（“-”）；
//赋予细胞价值
cell1.innerHTML=Gid.value；
cell2.innerHTML=C°.值；
第3单元：追加子女（del）；
//向按钮添加侦听器
del.appendChild（t）；
//OnAddChangeValue（cell1.innerHTML，cell2.innerHTML）；
del.addEventListener（“单击”，函数（）{
//1） 知道按钮所在的行（索引）
var x=del.parentNode.parentNode.rowIndex；
x=x-1；
//2） 将第一个单元格的值移回列表
var l=document.getElementById（“列表”）；
//创建选项节点
var节点=document.createElement（“选项”）；
//创建属性值
var attr1=document.createAttribute（“值”）；
//创建标签
var label=document.createTextNode（tbodyRef.rows[x].cells[0].innerHTML）；
//设置属性的值
attr1.value=tbodyRef.rows[x]。单元格[0]。innerHTML；
//链接。。。
node.setAttributeNode（attr1）；
子节点（标签）；
l、 追加子节点；
//3） 从tbody中删除该行
tbodyRef.deleteRow（x）；
//OnDeleteChangeValue（cell1.innerHTML）；
});
}

这是h:head

<h:head><title>Hello world-JSF-Input Form</title>

</h:head>

Hello world JSF输入表单

请帮帮我

---

NB：当我在前面添加h:form时，它会起作用，但在这种情况下javascript不起作用

您可以在

h:selectOneMenu

和

h:inputText

中使用ajax，如果值位于

h:form

（如您所发现的）中，则会将其发送到服务器/bean。但是，与其问我如何在没有表单的情况下发送数据（这使得commandButton“工作”），问题应该是

如何防止

h:commandButton

刷新页面。

答案如下：

但是，由于您似乎不需要（甚至不想）在单击（命令）按钮时向服务器发送任何内容，因此一个带有onClick的普通非提交html按钮就足够了。这可以通过在

h:commandButton

中添加

type=“button”

来实现（或者使用普通的html副本，这也是合法的）

一些更一般的知识：

---

在google chrome浏览器中调试页面后，我发现我需要：

1） 包括

2） 我意识到jsf中的id值在html中发生了变化： 如果一个元素的id在jsf中是“list”，那么它在html中会变成“j_idt6:list”。
所以在getElmentbyid中，我需要这样做：document.getElementById（“j_idt6:list”）而不是document.getElementById（“list”）

---

现在一切都正常了。

我没有看到任何javascript。javascript方法是h:commandButton的属性“onclick”中的“onclick add”。我没有发布javascript代码，但它也可以被命名为“bla”。。。这和“onClickAdd”一样有用。。。和“必需”表格。。。请创建一个。我认为你缺乏一些基本的jsf知识。你想让我发布javascript脚本吗？要完成吗？我希望您发布一个…不，我希望将bean发送到ManagedBean类，但在此之前，我希望在之前执行javascript方法。我已经按照您建议的使用f:ajax更改了我的h:commandButton。但问题并没有再次得到解决。javascript方法在提交表单之前不起作用。然后你的问题不清楚（同样不是a），我已经花了很多时间回答了这个问题。。。祝你好运…我真的很抱歉。我很感谢你的帮助很好，对你很有用，但是。。。。1：完全不能用你原来的问题来解释。2：只与纯javascript部分相关，而不是更一般的问题。那么关系呢