Jquery Post's response rendering click events in jsp page on submit. How to stop them
Hello Users,
I am using Jquery tabs and populating tab content dynamically. I have a huge form with bunch of user input fields. One of the requirement is i have to dynamically add the controls when the user click add more button
( eg: adding user technical skills/ proficiency level in drop down and adding multiple of the same rows). This one i am doing on click event appending controls to existing div.
At entire page level I have save and submit options. When the user click save/submit request goes to server and performs validation and return back to the same tab. I am using Jquery Post method and on success i am filling the tab content.
When i submit page, In the page response I am getting dynamically added row with the input controls along with my other controls with out me performing click before submit.
Here is the sample code I was doing
jQuery(document).ready(function() {
$(".btnclick").click(function() {
$.post(contextPath + "/web/XXX", $("#FormVO").serialize(), function(responseText) {
$('#acrfDocumentTab').contents().remove();
$("#acrfDocumentTab").html(responseText);
}
}
In Jsp
<script>
function addDiv(){
$('#hivQuanTestsDivContainer').append('<div> <span class="normalFont"> Skill Type </span><select name="" class=""> <option value="Java">Java</option> <option value="J2ee"> J2ee</option> </select> <span class="normalFont"> Proficiency Level </span><select name="" class=""> <option value="1">1</option> <option value="2"> 2</option> </select></div> ');
}
</script>
<div style="float:right; margin-right:20px;">
<span><img class="hNTyp" src="../../images/plus.png"
onclick="javascript:addDiv()"/> </span>
</div>
After I submit page with/without errors in function response of $.post , the above 2 fields are automatically getting added to my div, it is happening every time that I submit like 1,2,3,4 ... going on
Please give any thoughts where I am missing. Thank you for your time.
I am using Jquery tabs and populating tab content dynamically. I have a huge form with bunch of user input fields. One of the requirement is i have to dynamically add the controls when the user click add more button
( eg: adding user technical skills/ proficiency level in drop down and adding multiple of the same rows). This one i am doing on click event appending controls to existing div.
At entire page level I have save and submit options. When the user click save/submit request goes to server and performs validation and return back to the same tab. I am using Jquery Post method and on success i am filling the tab content.
When i submit page, In the page response I am getting dynamically added row with the input controls along with my other controls with out me performing click before submit.
Here is the sample code I was doing
jQuery(document).ready(function() {
$(".btnclick").click(function() {
$.post(contextPath + "/web/XXX", $("#FormVO").serialize(), function(responseText) {
$('#acrfDocumentTab').contents().remove();
$("#acrfDocumentTab").html(responseText);
}
}
In Jsp
<script>
function addDiv(){
$('#hivQuanTestsDivContainer').append('<div> <span class="normalFont"> Skill Type </span><select name="" class=""> <option value="Java">Java</option> <option value="J2ee"> J2ee</option> </select> <span class="normalFont"> Proficiency Level </span><select name="" class=""> <option value="1">1</option> <option value="2"> 2</option> </select></div> ');
}
</script>
<div style="float:right; margin-right:20px;">
<span><img class="hNTyp" src="../../images/plus.png"
onclick="javascript:addDiv()"/> </span>
</div>
After I submit page with/without errors in function response of $.post , the above 2 fields are automatically getting added to my div, it is happening every time that I submit like 1,2,3,4 ... going on
Please give any thoughts where I am missing. Thank you for your time.