Forums

hi,

i'm really new to chronoforms......i just created a form which consist of a grid with 2 buttons: "add row" and "delete row" which i set onlick event function to them. after those i have an Input type=submit that i used to send the information to another page. the problem is that everytime i press the "add row" button, it does what i set in the JS function but then the form reloads and goes to the action page that i set for the submit button. the same happens with the "delete row" button. it looks like all buttons in a form submit. after the form reloads, it has a "task=send" which i dont know what is. pls i'll be glad if someone help me with this. the form code below:

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Test Grid Form</h1>
  </div>
  <div class="cfclear"> </div>
</div>



 <div id="mygrid_container" style="width:650px;height:200px;"></div>
 
  <button onclick="addRow()">Agregar Producto/Servicio</button>  
  <button onclick="removeRow()">Eliminar</button>
   <button onclick="myDataProcessor.sendData();">Guardar</button>


<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_1" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Hi ccruz,

What is the JavaScript that you are using with this form? It looks as though the code in there is submitting the form.

The &task=send parameter is added by ChronoForms to the form action URL so that ChronoForms knows to process the results.

Bob

this is the java script code of the form:

<script>
      
	  var mygrid;
	  
	  
function doInitGrid(){

mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("./dhtmlxGrid/codebase/imgs/");
mygrid.setHeader("Producto/Servicio,Unidad,Cantidad,Fecha Entrega,Comentario");
mygrid.setInitWidths("150,150,150,150,150");
mygrid.setColAlign("left,right,right,left");
mygrid.setColTypes("ed,coro,ed,dhxCalendar,ed");
mygrid.setSkin("dhx_skyblue");
mygrid.init();

myDataProcessor = new dataProcessor("procesar.php");
myDataProcessor.setTransactionMode("POST", true);
myDataProcessor.setUpdateMode("off");


myDataProcessor.init(mygrid);



}

function addRow(){
    var newId = (new Date()).valueOf()
    mygrid.addRow(newId,"",mygrid.getRowsNum())
    mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
}
function removeRow(){
    var selId = mygrid.getSelectedId()
    mygrid.deleteRow(selId);
}
function not_empty(value, id, ind) {
    if (value == "");
    return "Value at (" + id + ", " + ind + ") can't be empty";
    return true;
}
function greater_0(value) {
    return value > 0;
}
	  
	  
     </script>

i understand that the form has to be submited if i press the submit button. the problem is that the form gets submitted even if i press one of the other buttons (the ones that add or deletes rows in the grid) that have actions based on JS functions, im not telling those buttons to submit, i want those buttons to do their actions and stay on the page without reloding or submiting. hope i make myself clear. TY!

Hi ccruz,

Thanks,

Please try adding type='button' to your button tags - in some browsers the default type is 'submit' and I think this is causing your problem. You might also make sure that the script functions return 'false'.

Bob

WOW thanks a lot dude. you saved my day🙂