Databases
StackOverflow2013
Postsdbo
POForm submit / Jquery Event problem
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm submit / Jquery Event problem
    primarykey
    data
    text
    <p>Ok: i have a dynamic form like this:</p> <pre><code>&lt;div id="container"&gt; &lt;div id="autosuggest"&gt;...&lt;/div&gt; &lt;form action="" method="post" id="inputForm"&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;amount&lt;/th&gt; &lt;th&gt;name&lt;/th&gt; &lt;th&gt;discount&lt;/th&gt; &lt;th&gt;vat&lt;/th&gt; &lt;th&gt;price&lt;/th&gt; &lt;th&gt;comment&lt;/th&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr id="row1"&gt; &lt;td&gt;&lt;input type="text" name="amountRow1" id="amountRow1" value=""/&gt;&lt;/td&gt; &lt;td&gt;Product name 1 &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="discountRow1" id="discountRow1" value=""/&gt;&lt;/td&gt; &lt;td&gt; &lt;select id="vatRow1" name="vatRow1"&gt; &lt;option value="10"&gt;10%&lt;/option&gt; &lt;option value="20"&gt;20%&lt;/option&gt; &lt;option value="30"&gt;30%&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="priceRow1" id="priceRow1" value=""/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="commentRow1" id="commentRow1" value=""/&gt;&lt;/td&gt; &lt;td&gt;&lt;button class="trashButton"&gt;&lt;/button&gt; &lt;/tr&gt; &lt;tr id="row2"&gt; &lt;td&gt;&lt;input type="text" name="amountRow2" id="amountRow2" value=""/&gt;&lt;/td&gt; &lt;td&gt;Product name 2 &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="discountRow2" id="discountRow2" value=""/&gt;&lt;/td&gt; &lt;td&gt; &lt;select id="vatRow2" name="vatRow2"&gt; &lt;option value="10"&gt;10%&lt;/option&gt; &lt;option value="20"&gt;20%&lt;/option&gt; &lt;option value="30"&gt;30%&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="priceRow2" id="priceRow2" value=""/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="commentRow2" id="commentRow2" value=""/&gt;&lt;/td&gt; &lt;td&gt;&lt;button class="trashButton"&gt;&lt;/button&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;input type="submit" id="submitForm" name="submitForm" value="submit"&gt; &lt;/form&gt; </code></pre> <p></p> <p>some things to clarify:</p> <ol> <li>Each row is different from another by a unique timestamp, in this example simplified as row1, row2, etc...</li> <li>The container div is actually a div which is placed in a jquery-ui-dialog</li> <li>The autosuggest div has some other stuff in it needed for a simple autosuggest</li> <li>Each row is dynamically added using the autosuggest, keeping each row unique using the timestamp</li> <li>Each row has a button with class='trashButton' which is a jquery-ui-button, the obvious purpose of the button is to remove the row from the table.</li> <li>There is no action value specified for the form since the form is handled with an ajaxcall</li> </ol> <p>The button eventhandler: </p> <pre><code> $(document).ready(function(){ $(".trashButton").live('click', function(){ removeProduct(this); return false }); }) </code></pre> <p>Now the issue is the following:</p> <p>When my cursor is in any input field in the table, and i press the enter button. The first row gets removed from the table. No matter where the focus/cursor is at the time, its always the first row that gets removed.<br> The fact is, there shouldnt be ANY row removed on pressing the enter button. Instead if anything should happen at all, the form should try to submit.<br> On the other hand, when my cursor/focus is in the autosuggest inputfield and i press enter: nothing happens, which is exactly what i wanted. When i click the 'trashButton' the correct row DOES get removed: also how it's supposed to work. </p> <p>I've debugged all i could think of which could cause the problem concerning the autosuggest plugin or wrong closing tags or anything simple and alike (what i mean is, i've debugged most obvious things i could think of). </p> <p>So in short: i have no idea as to why my removeProduct() get's triggered at all, or,even worse, having it delete the first row all the time instead of the actually focussed row(which would make more sense). I'm not really sure how to capture the triggered eventhandler when i press the enter button so i have no clue how to debug this.</p> <p>All help or suggestions would be much appreciated,</p> <p>Cheers,</p> <p>Bodybag</p> <p>edit: </p> <p>@Ed Fryed: Thank you for the quick reply. Problem solved! Changed the button into an anchor which made the enterpress trigger the formsubmit. Cancelled the form submit using preventDefault(). But now i got the submit function cancelled for every form using the following: <code><pre> $("#inputForm").keypress(function(event){ if(event.which===13){ event.preventDefault(); } }) </pre></code></p> <p>Vote would be granted if i had more rep xD<br> Btw help on the new issue would be more then lovely,</p> <p>cheers bodybag</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBodybag
    1. USBodybag
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COSorry could you clarify. Do you want the form to submit on enter? and it doesnt? or other forms on the page arnt submitting and you want them to?
      singulars
      1. POForm submit / Jquery Event problem
      1. USEd Fryed
    2. COFor the form in question i wanted to cancel out the submit when pressing enter(which works using the code above) But when i press enter being in another form now also no longer triggers the form submit which i dont want to happen. so i only want to cancel out the submit on my form from the above question, not the others on the same page
      singulars
      1. POForm submit / Jquery Event problem
      1. USBodybag
    3. COProbably a silly question but do the other forms have the id #inputForm?
      singulars
      1. POForm submit / Jquery Event problem
      1. USEd Fryed
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload