Updating two dynamic text fields simultaneously - javascript

See below code. I am creating 2 text fields at a time. Now how could I type on one text field and make the other twin text field have the same values simultaneously?
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');
$(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
x++;
return false;
});
});
</script>

I created a fiddle that I think does what you want: http://jsfiddle.net/3h1h5j7y/
Here is the code.
HTML
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
JavaScript
I added a data- attribute to the inputs with the tfCont id so that they can operate in pairs as they are added.
Also, I am using the on() method so that objects can be added dynamically. It is filtering on the fTypex class.
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');
$("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');
x++;
return false;
});
$(document).on("click blur keyup", "input.fTypex", function() {
var tfc = $(this).data("tfcount");
$("#tf_" + tfc).val(this.value);
});
});
I had to change $(OuterWrapper) from your example to $("#OuterWrapper") because there was not a variable.

Try something like this :
use onkeyup to call a function which binds the values
HTML
<body>
<input id='ip1' onkeyup='updateOther(this);' type='text'>
<input id='ip2' type='text'>
<script src="script.js"></script>
</body>
JS:
function updateOther(obj){
$('#ip2').val($(obj).val()) ;
}
http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview

Related

How to get image and name of image from the index array in javascript?

I set below codes for the the design. i try to get images and name of image form the index.`
function Link_Generate(event) {
event.preventDefault();
var links = '';
var link = 'www.ski-roller.de/';
var result = document.getElementById('wrapper');
var code_id = document.getElementById("code_id").value;
for (i = 1; i < 6; i++) {
links += ' <div class="input-groups">' +
' <input class="form-input" id="link_' + i + '" type="text" name="link_' + i + '" ' +
' value="' + link + i + '/=' + code_id + '" placeholder="Generated Link "/>' +
' <input class="form-button" type="submit" id="' + i + '" value="Copy" onclick="copyToClipboard(this.id)" "/>' +
' <label>Product Name:'+ i +' ' + '<img src="cr05.jpg" alt="cross prime" width="100" height="100"> '+ ' </label>' +
' </div>';
}
result.innerHTML = links;
}
`

How to get price total of dynamically created rows?

I want to SUM the price of all dynamically created rows and display into total input field..I have tried some things but not working for me.I have posted my script and image that explains how it should works. Everything is working and saving in database just want total amount of all items. Please see image for clear concept. Total of 1st row is saving in total but not working for dynamically created rows.
Image:
It should work like this
Html:
<div class="form-group">
<label>Total</label>
<input readonly type="text" id="total_amount" class="form-control"
name="total_amount">
</div>
Script:
<script>
var counterr = 1;
$(document).ready(function () {
$('#unit_price,#item_quantity').change(function () {
// alert();
var unitPrice = $('#unit_price').val();
// console.log(unitPrice);
var quantity = $('#item_quantity').val();
// console.log(quantity);
var total = (unitPrice * quantity).toFixed(0);
$('#total_price').val(total);
$('#total_amount').val(total);
});
// Input Fields
var maxField = 100; //Input fields increment limitation
var addButton = $('#add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
$(addButton).click(function (e) {
e.preventDefault();
counterr++;
//Check maximum number of input fields
if (counterr < maxField) {
fieldHTML = makeNewRow(counterr);
$(wrapper).append(fieldHTML); //Add field html
// $('#department-'+counterr).select2();
// console.log("Unit price", counterr);
$('.unit_price' + counterr).change(function () {
// console.log("hello");
var unitPrice = $('.unit_price' + counterr).val();
// console.log(unitPrice);
var quantity = $('#item_quantity' + counterr).val();
// console.log(quantity);
var total = (unitPrice * quantity).toFixed(0);
$('#total_price' + counterr).val(total);
$('#total_price').each(function() {
subtotal += parseFloat($(this).val());
console.log('test',subtotal);
});
$('#total_amount').val(subtotal);
});
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('#newrow').remove(); //Remove field html
counterr = counterr--; //Decrement field counter
})
});
function makeNewRow(counterr) {
return '<div class="row" id="newrow">' +
'<div class="col-md-4">' +
'<div class="form-group">' +
'<select onChange="getPurchasePrice(this.value);" style="background-color: #f5f6f9" id="item_name' + counterr + '" class="form-control dep"' +
'placeholder="Enter Item" name="testing[]"' + '>' +
'<option value = "">Select Item</option>' + '>' +
'#foreach($items as $item)' + '>' +
'<option value = "{{$item->id}}">{{$item->item_name}}</option>' + '>' +
'#endforeach' + '>' +
'</select>' +
'</div>' +
'</div>' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'<input style="background-color: #f5f6f9" type="number" id="item_quantity' + counterr + '" class="form-control"' +
'placeholder="Enter.." name="testing[]"' + '>' +
'</div>' +
'</div>' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'<input style="background-color: #f5f6f9" type="number" id="unit_price' + counterr + '" class="unit_price' + counterr + ' form-control"' +
'placeholder="Enter.." name="testing[]"' + '>' +
'</div>' +
'</div>' +
'<div class="col-md-3">' +
'<div class="form-group">' +
'<input value="0" style="background-color: #f5f6f9" disabled type="text" id="total_price' + counterr + '" class="form-control"' +
'placeholder="Total" name="testing[]"' + '>' +
'</div>' +
'</div>' +
'<a style="height:40px;margin-left:25px" href="javascript:void(0);" class="btn btn-danger remove_button">X</a>' +
'</div>'; //New input field html
}
/*function removeDiv(no){
$("#testingrow-"+no).remove();
x--;
}*/
</script>
Add a function to recalculate the grand total 'recalcGrandTotal'
var recalcGrandTotal = function() {
var grandTotal = 0; // Declare a var to hold the grand total
$("[id^=total_price]").each(function() { // Find all elements with an id that starts with 'total_price'
grandTotal += parseInt($(this).val()); // Add the value of the 'total_price*' field to the grand total
})
$('#total_amount').val(grandTotal); // append grand total amount to the total field
}
Then, hook this function up to the 'total price' recalculation function:
Find
$('#total_price' + counterr).val(total);
Add after:
recalcGrandTotal();
To substract from grand total upon removal of an item, hook this function up to the item removal function. Find:
counterr = counterr--; //Decrement field counter
Add after:
recalcGrandTotal();

Select html content from an element

I would like to select the content of this element
<div class="entry-content">
comment.body +
</div>
I want to get that comment.body in the function I call below, more precisely in
var body = parent.find('entry-content');
How can I select the content of a certain div? I tried val() and contents() and none of them worked.
Any suggestion?
$("body").on("click", ".show-textarea", function(){
var answerid = $(this).data('answer');
var type = $(this).data('type');
var questionid = $(this).data('question');
var $commentForm = $(this).parent().find('.comment-form').first();
console.log(answerid);
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid,
questionid : questionid,
type : type
}, function (data) {
$commentForm.find('article').remove();
console.log("AID " + answerid);
console.log("Data" + data.length);
$.each(data, function(i, comment) {
console.log("Comment:" + comment);
$commentForm.append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a>' +
'<div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'<div class="comment-edit-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<button class = "edit-comment btn {if !$isMine}hidden{/if}" type="button">Edit</button>' +
'</form>' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div>' +
'</div></article>');
});
});
$commentForm.show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});
$("body").on("click", ".edit-comment", function(){
console.log("Hello");
var parent = $("body").find('article').last();
var body = parent.find('entry-content');
console.log(body);
var parent_parent = $("body").find('article').parent().last();
parent.remove();
console.log(parent);
var button = $(this),
commentField = $('<div class="comment-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text">' +
body +
'</textarea>' +
'<input type="hidden" name="answerid" value="" />' +
'<input type="hidden" name="questionid" value="" />' +
'<button type="submit" class="textarea-ok">Edit Comment</button>' +
'</form>' +
'</div>'); // create a textarea element
commentField
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function(e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
}).appendTo(parent_parent); // add the textarea to the document
});
Since the binding is on '.edit-comment' which is a child of the '.tweet-data' encapsulating each individual entry (from the looks of your logic) I would suggest doing
$(this).closest('.tweet-data').find('.entry-content').text();
Your current logic is going to the last article for the 'parent' element. So if you tried to click the edit comment option on a tweet data other than the last one, your logic will most likely not work. Doing the lookup contextually by which element was clicked will fix this potential issue.

Hidden Field Value Not Getting Filled JQuery

I have an HTML table append using jQuery as follows which fires on a button click
$("#listadd").click(function() {
if (validateListAdd()) {
var mcode = $("#mcodehidden").val();
if(checkItemDuplicates(mcode)) {
var mname = $("#mnamehidden").val();
var sellprice = $("#sellprice").val();
var cost = $("#cost").val();
var qty = $("#qty").val();
var remark = $("#remark").val();
var subtotal = sellprice * qty;
alert(qty);
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"><input type="hidden" name="tblmcode[]" value="' + mcode + '">' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' ></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
$('[id$=mcode]').val("");
$('[id$=mname]').val("");
$('[id$=sellprice]').val("");
$('[id$=qty]').val("");
$('[id$=mcodehidden]').val("");
$('[id$=mnamehidden]').val("");
calculateTotal();
}else{
alert("Sorry, You have already added this item");
}
} else {
alert("You have entered invalid data, Please check again");
}
});
The problem is the value of the hidden field #hdqty is not getting filled by the var "qty" but which shows up the value correctly in the alert that I have used in here. When I inspected the element(table row) in the browser, it shows the hidden field as
<input id="hdqty" type="hidden" name="tblqty[]" value>
Can anyone point me out the mistake?
You set the value of the #hdqty field in the string you build, however the below line removes the value almost immediately:
$('[id$=qty]').val("");
The selector above matches any element that has an id attribute that ends with qty.
Remove that line, or change the selector to better fit your requirements, and your code will work.
Paste this
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"/><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"/><input type="hidden" name="tblmcode[]" value="' + mcode + '"/>' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' /></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
also paste this line before the above code
$('[id$=qty]').val("");

Better way to use html templete with json response

I am getting json response from my server.
I am getting detail of user like school(name,id),major subject(name,id),start ,end etc.
I want to show this is appropriate text fields inside a form where user can edit this and after editing user should submit it again to server.
I am embadding fetched json code with html code inside the jquery.
I am finding it very difficult to manage html inside jquery is there any better way to this with following code.
$(document).on('click', '.edit-edu', function(event) {
event.preventDefault();
var id = $(this).parents('.row').attr('id');
var id1 = id.split('-');
$.post("SingleEdu", {id: id1[1]}, function(data) {
console.log(data);
$.each(data.educationList, function(key, value) {
$('#' + id).replaceWith('<div id="addNewEdu" class="addorEdit">'
+ '<legend>Edit education details</legend>'
+ '<form action="UpdateEducation" id="UpdateEducation" cssClass="form-horizontal">'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>School/College</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ ' <textfield name="ed.pageBySchoolPid.name" value="' + value.pageBySchoolPid.name + '" id="school2" label="School/College" placeholder="College or School Name" cssClass="form-control">' + '</textfield>'
+ '<input type="hidden" name="ed.pageBySchoolPid.id" value="' + value.pageBySchoolPid.id + '" id="schoolId2" label="School/College" cssClass="form-control">'
+ '</hidden>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Major</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.pageByMajorPid.name" value="' + value.pageByMajorPid.name + '" id="major1" label="Class" placeholder="Major Subject" cssClass="form-control">'
+ '<input type="hidden" name="ed.pageByMajorPid.id" value="' + value.pageByMajorPid.id + '" id="majorId1" label="Class" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Start</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.start" value="' + value.start + '" id="sstart1" label="From" placeholder="eg. Start: July 2007" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>End</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.end" value="' + value.end + '" id="send1" label="To" placeholder="eg. End : May 2011 or Till" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Visibility</label>'
+ ' </div>'
+ '<div class="col-md-6">'
+ '<select label="Visibility" name="ed.visibility" value="' + value.visibility + '" id="svisibility1" value="public" cssClass="form-control">'
+ '<option>Public</option>'
+ '<option>Friends</option>'
+ '<option>Me</option>'
+ '</select>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label class="sr-only">Submit</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="submit" value="add" id="submit_education" cssClass="btn btn-sm btn-success"/>'
+ '</div>'
+ '</div>'
+ '</form>')
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>
<div class="row" id="edu-56">
<div>Specialization</div>
<div>School</div>
<div>start end</div>
<i class="fa fa-edit edit-edu">edit</i>
<i class="fa fa-times delete-edu"></i>
</div>
You could store your code inside another .html file and pull it in using another AJAX call:
var FormHTML = '';
$.get('form.html', function(data) {
FormHTML = data;
});
Then to get your values in you can set up your input HTML with something that can be easily replaced out. I've just wrapped the object name in between some #:
<input type="hidden" name="ed.pageByMajorPid.id" value="##pageByMajorPid.id##" id="majorId1" label="Class" cssClass="form-control">
Then to replace out these values with your actual values, just do a loop:
for (var name in value) {
if (typeof value[name] != 'object') { // If not an object, replace the value
formHTML = formHTML.replace('##' + name + '##', value[name])
} else { // Else if it is an object, loop through it
for (var name2 in value[name]) {
formHTML = formHTML.replace('##' + name + '.' + name2 + '##', value[name][name2])
}
}
}
$('#' + id).replaceWith(formHTML);
Hope that works for you, let me know :)
You can use template engine like Mustache https://mustache.github.io/

Categories

Resources