We Keep Coding

Prevent reload page with code added afterwards and after clicking a button

first of all I'm trying to create a form where is needed to duplicate some blocks of fields and fields as the user want.
So I have a page where there is a button that after clicking on it duplicates a certain block. The first button works fine!, it duplicates a block without reloading the page when is clicked.
But in that block there are some input fields that I need to duplicate as well.
So when the block is duplicated a new button is added to duplicate fields inside that block.
The problem is that when I click on the second button it reloads the page, instead of just duplicate an input field.
To do this I'm using jquery, code to duplicate the block, this is the code to add the block, that is working fine:
$('#add-block').click(function(e) {
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
event.preventDefault();
});
code to duplicate the field (here is where the page reloads):
$('#we2_add_test').click(function(e) {
event.preventDefault();
$(".we2_test-input").append("<input type=\"text\" placeholder=\"Your Test\" class=\"form-control\" name=\"we3_test\" id=\"we3_test\">");
return false;
});
I already tried this, but it didn't work

1.id="we2_test" need to be class="we2_test" and id=we2_add_test need to be class="we2_add_test",because multiple same id for different HTML element is wrong when you are going to deal them with jQuery
2.Use event delegation:-
Now both code need to be:-
$('#add-block').click(function(e) {
e.preventDefault();
var html_to_add = '<input type="text" placeholder="Your Test we2_test" class="form-control" name="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test we2_add_test">+</button>';
$(".block-input").append(html_to_add);
});
$(document).on('click','.we2_add_test',function(e) {
e.preventDefault();
$(".we2_test-input").append("<input type='text' placeholder='Your Test' class='form-control we3_test' name='we3_test'>");
});

The first function has event as the function argument, but later on you try to use e.preventDefault(). That doesn't match.
Maybe
$('#add-block').click(function(e) {
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test">';
html_to_add += '<div class="we2_test-input col-md-12 no-pad"></div>';
html_to_add += '<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
e.preventDefault();
});
will work? Difficult to say without the complete code though ...
Below is a somehow working version...
This is a little working snippet where I took care of the identity problem and the event delegation as mentioned/solved by #Alive to Die:
$(function(){
$('#add-block').click(function(e) {
var i=$('[name=we2_test]',".block-input").length;
var html_to_add = '<input type="text" placeholder="Your Test" class="form-control" name="we2_test" id="we2_test'+i+'">'
+'<div class="we2_test-input col-md-12 no-pad"></div>'
+'<button class="btn btn-default btn-add-test" id="we2_add_test">+</button>';
$(".block-input").append(html_to_add);
e.stopPropagation();
return false;
});
$('.block-input')
.on('click','#we2_add_test',function(e) {
e.preventDefault();
var j=$('[name=we3_test]',".we2_test-input").length;
$(this).prev().append('<input type="text" placeholder="Your Test" class="form-control" name="we3_test" id="we3_test'+j+'">');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
add block
<div class="block-input"></div>
Edit:
I replaced $(".we2_test-input").append(...) by $(this).prev().append(...) to ensure that only the div before the button gets added to.

Get Values of multiple input fields from within parent element AngularJS

Firstly apologies if this has been asked before, but I have the following HTML which is generated dynamically by an angular directive (I.E When the user clicks a button, a new element is added to the page), all these entries are within a container div.
<div class="entry"><tr><td><input type="text" name="firstname"/></td>' +
'<td><input type="text" name="surname" /></td></tr></div>
Once the user submits, I want to be able to get the data from both the inputs within each entry.
Does anybody have any suggestions on how to do this?
Thank You!

It is suggested that you use ng-model and ng-submit in the directive.
<script>
angular.module('MyApp', []).directive('myDirective', function () {
return {
template: '<form ng-submit="submit()">' +
'<div class="entry">' +
'<tr>' +
'<td><input type="text" ng-model="firstname" /></td>' +
'<td><input type="text" ng-model="surname" /></td>' +
'<td><input type="submit" value="Submit" /></td>' +
'</tr>' +
'</div>' +
'</form>',
link: function (scope, element) {
scope.submit = function() {
console.log("scope.firstname", scope.firstname);
console.log("scope.surname", scope.surname);
};
}
};
});
</script>
<div ng-app="MyApp">
<div my-directive></div>
</div>
Then, you can do anything else in the submit function with firstname and surname.

Not able to propagate event listener (submit for form) for element generated by(later) javascript

I have html code like -
<div class = "setup_eda_class" id = "Setup_eda">
<p>
<a> <span id="calendar_eda_form_top_x"> x </span> </a>
<br> </br>
<div id="insert_calendar_eda_form"> </div>
</p>
</div>
The div 'insert_calendar_eda_form' is inserted initially.
Javascript code
calendar_eda_add_form = function (clicked_id, arraylength){
htmlstr = "";
htmlstr += '<a> Add Events for - </a>' ;
htmlstr += '<form id="calendar_eda_add_form" action="/setupaddcalendarevent" method="POST">'
htmlstr += '<label for="start_date">Start Date</label>'
htmlstr += '<input type="text" name="start_date" />'
htmlstr += '<label for="end_date">End Date</label>'
htmlstr += '<input type="text" name="end_date" />'
htmlstr += '<br> </br>'
htmlstr += '<input type="submit" value="Add Event" />'
htmlstr += '</form>'
$("#insert_calendar_eda_form").html(htmlstr);
The form 'calendar_eda_add_form' html is created dynamically by Javascript.
HTML code for event listener
<script type="text/javascript">
$(document).ready(function(){
$('#insert_calendar_eda_form').on('submit', 'calendar_eda_add_form', function(event){
alert ('clicked add event');
event.preventDefault();
somefunction();
});
});
Calendar_eda_add_form is generated dynamically by JS. I am trying to propagate the "submit" event, but does not seem to work. Can you please help?

Missing the hash tag on the selector inside the .on()
$(document).ready(function(){
$('#insert_calendar_eda_form').on('submit', '#calendar_eda_add_form', function(event){
alert ('clicked add event');
event.preventDefault();
somefunction();
});
});
Here's a fiddle showing it working http://jsfiddle.net/ja3kaa4b/ - are you seeing any console errors in the browser?

You may be experiencing the effects of duplicate IDs. In the function calendar_eda_add_form change the ID of the form to a class and use the following code instead:
$(document).ready(function(){
$('#insert_calendar_eda_form').on('submit', '.calendar_eda_add_form', function(event){
alert ('clicked add event');
event.preventDefault();
somefunction();
});
});
UPDATE
Per the comments under the question, the above is unlikely as the form is added to the DOM only once. However, the HTML being used is not valid:
<div class = "setup_eda_class" id = "Setup_eda">
<p>
<a> <span id="calendar_eda_form_top_x"> x </span> </a>
<br> </br>
<div id="insert_calendar_eda_form"> </div>
</p>
</div>
Per the HTML spec P elements can only contain inline elements; div - the target div - is not an inline element.
Why <p> tag can't contain <div> tag inside it?
http://www.w3.org/TR/html4/sgml/dtd.html

If I understand your question, this should work:
calendar_eda_add_form = function (clicked_id, arraylength){
htmlstr = "";
htmlstr += '<a> Add Events for - </a>' ;
htmlstr += '<form id="calendar_eda_add_form" action="/setupaddcalendarevent" method="POST">'
htmlstr += '<label for="start_date">Start Date</label>'
htmlstr += '<input type="text" name="start_date" />'
htmlstr += '<label for="end_date">End Date</label>'
htmlstr += '<input type="text" name="end_date" />'
htmlstr += '<br> </br>'
htmlstr += '<input type="submit" value="Add Event" />'
htmlstr += '</form>'
return htmlstr;
// in your code I dont see where you ever do anything with `htmlstr `.
// Since you made `calendar_eda_add_form` a function, I'm assuming you meant to return `htmlstr`
// and insert the created html into your `insert_calendar_eda_form` div
// im assuming you have a reason for `clicked_id, arraylength` here but not sure what they are for
}
$(document).ready(function(){
//change this line to add the `#` and bind to `document`
$(document).on('submit','#calendar_eda_add_form',function(event){
event.preventDefault();
somefunction();
});
//put here to simulate adding form later
$('#create').click(function(){
//insert the created html into your `insert_calendar_eda_form` div
$('#insert_calendar_eda_form').html(calendar_eda_add_form);
});
});
function somefunction(){
alert ('clicked add event');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="create" value="create form"/>
<div class = "setup_eda_class" id = "Setup_eda">
<p>
<a> <span id="calendar_eda_form_top_x"> x </span> </a>
<br> </br>
<div id="insert_calendar_eda_form"> </div>
</p>
</div>

replace a <p> element with an input element

I have a p element which I want to replace with an input element when user clicks on it. The might not be present during page load so I use delegate to catch the click event.
html(after <p> was loaded)
<div class="phrases">
<div class="predefined-phrase>
<p id="1">A predefined phrase"</p>
</div>
</div>
I want it to be like this
<div class="phrases">
<div class="predefined-phrase">
<input type="text" id="1" class="form-control input-sm" value="A predefined phrase">
</div>
</div>
My js file has the following code:
$(".phrases").on('click', ".predefined-phrase", function (event){
event.preventDefault();
var phrase = $(this).children().text();
var id = $(this).children().attr('id');
var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
$(this).children().remove();
$(this).append(input);
});
<p> is replaced normally by input but i cannot type anything. I can only type if left click is pressed on input box continiously. I also want to catch a keypress event on the new input so to edit or to delete the specific phrase. But I cannot even type on the input box. Why is this happening? Can i normally catch the keypress event after I have appended the input (and works as it should) inside the click event callback? The point is that after user presses the phrase is edited with ajax and the input box dissappears and p is loaded back with the new edited phrase or fully deleted.

$(function(){
$('.predefined-phrase p').click(function() {
var id = $(this).attr('id');
var phrase = $(this).text();
var newInput="<input type='text' id='"+id+"' value='"+phrase+"' />";
$(this).replaceWith(newInput);
});
});
DEMO FIDDLE

Just check the target. If it is a input, do nothing :
$(".phrases").on('click', ".predefined-phrase", function (event){
if($(event.target).is('input')) return;
event.preventDefault();
var phrase = $(this).children().text();
var id = $(this).children().attr('id');
var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
$(this).children().remove();
$(this).append(input);
});

Well, this is a native JS solution, but hopefully it will point you in the right direction, or if you an use it instead of jQuery, that works too. Not that I've changed your ID to not start with a number, as mentioned by C-link, as that is not allowed.
document.getElementById("n1").addEventListener("click", function filler(){
this.outerHTML = '<input type="text" id="' + this.id + '" class="form-control input-sm" value="' + this.innerHTML + '" />
this.removeEventListener("click" filler)'
});

I would suggest the next changes:
<div class="predefined-phrase">
<input type="text" data-id="1" class="form-control input-sm" value="A predefined phrase">
</div>
jQuery script:
$('.predefined-phrase').click(function() {
var id = $('p', this).attr('data-id');
var value = $('p', this).text();
$('p', this).replaceWith('<input type="text" data-id="' + id + '" class="form-control input-sm" value="' + value + '" />')
});

First of all, don't use id starting from number.
And for your solution you can use replaceWith method like below:
$('#your_id').replaceWith('<input type="text" id="your_id" class="form-control input-sm" value="A predefined phrase" />');

JQuery Append Html onclick function

Im trying to remove the text box evenly. I mean for each textbox i want the remove button.If i click the remove button i want to delete the textbox
Html for adding multiple text box
<pre><div id="TextBoxDiv1">
<label style="float: none;"> Bus Model
<input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
<img src="images/india_rupess.png" style="margin-left:18px;"> :</label>
<input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
<label style="float: none;margin-left: 16px;"><span class="font-dollar">﹩</span> :</label>
<input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
Add Remove
</div></pre>
This is my script
<pre>var counter = 2;
$("#addButton").click(function () {
$("#TextBoxesGroup").append('<div id="TextBoxDiv' + counter + '" class="textadd""><label style="float: none;"> Bus Model <input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="bus' + counter + '" id="numsValid"><img src="images/india_rupess.png" style="margin-left:21px;"> :</label><input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="rs' + counter + '" id="numsValid"><label style="float: none;margin-left: 19px;"><span class="font-dollar">﹩</span> :</label><input style="width: 150px;margin-left:2px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="dollar' + counter + '" id="numsValid"> <a href="javascript:;" onClick="javascript:alert("test");" >Remove</a></div>');
counter++;;
});
Click to view http://jsfiddle.net/b8DRT/

You may add a class on your delete button and use .on() on your $("#TextBoxesGroup")
to add the remove event. Like this
$("#TextBoxesGroup").on('click', '.removeButton', function(){
$(this).closest('div').remove();
});
And here's the updated fiddle..

id is unique for an HTML element in complete document. You are giving same id to multiple elements. Secondly when you attach event handlers using click, they are bound to elements that are already present in the DOM and not the ones which are to be added later. If you want to attach click event handlers you should use the on method like below:
$(document).on('click', '.removeButton', function(e){
// your logic here...
});