JSON Form.append - javascript

What is wrong with my code?
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">');
form.append('<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})
})( jQuery );
It keeps throwing errors, should it be???
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">
<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})
})( jQuery );
I'm not sure. Please help!

If type is hidden then you can't test. i changed type as text to see if it is working or not. has to check your datum object also once for sure.
$(function(){
var form = $('#actor-form');
var datum = {};
datum.id = 1001;
datum.email = "welcome#gmail.com";
form.append('<input name="actor-id" type="text" value="' + datum.id + '">');
form.append('<input name="actor-email" type="text" value="' + datum.email + '">');
});

(function($) {
// here initialize datum variable
var form = $('#actor-form');
form.append('<input name ="actor-id" type="hidden" value="' + datum.id + '">');
form.append('<input name ="actor-email" type="hidden" value="' + datum.email + '">');
})( jQuery );

Related

I want to append indexes of an array into a <td> where select options are indexes of the array

I want a situation where I can append the indexes of an array as options in a select. The code below fails.
<?php
$str4 = "select * from fee_names where status = '1' ";
$res4 = mysql_query($str4) or die(mysql_error());
while ($r4 = mysql_fetch_assoc($res4)){
$name = $r4['NAME'];
array_push($fee_nameArray,$name);
}
>?
<input type="text" name="fee_name" id="fee_name" value="<?php echo $fee_nameArray; ?>">
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
//alert(arrayNAme.length); return false;
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
$('#table_mile35').prepend('<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>'
for (i = 0; i < arrayNAme.length; i++) {
'<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>'
}
'</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>');
});
if arrayNAme is an array, Use like this:
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
arrayNAme = arrayNAme.split(',');
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
var html = '<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>';
for (i = 0; i < arrayNAme.length; i++) {
html += '<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>';
}
html += '</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>';
$('#table_mile35').prepend(html);
});
I am supposing value of arrayNAme is comma seperated (for example: Tuition Fee,Book Fee,Registration Fee)

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("");

jQuery on(change) doesn't work second time

I have cascading dropdown menus as below. I am listing selections dynamically on second and third dropdowns. While the first on change function works without problem (i am getting project list), the second on change ( $("#pro").on('change', function(e) ) simply doesn't sense any change on selection of projects. Chrome console shows no problem. What can be the problem?
<div class="form-group">
<label for="projectfamily">Proje Grubu</label>
<select class="form-control" name="projectfamily" id="projectfam">
<option value="">Seçiniz</option>
#foreach($projectfamilies as $projectfamily)
<option value= "{{$projectfamily->id}}">{{$projectfamily->projectfamily}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="project">Proje Adı</label>
<select class="form-control" name="project" id="pro">
<option value= "" disabled></option>
</select>
</div>
<div class="form-group">
<label for="version">Versiyon</label>
<select class="form-control" name="version" id="version">
<option value="" disabled></option>
</select>
</div>
JQuery
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
It appears to work as expected in chrome. See this fiddle with the ajax calls replaced. Is it a problem with the ajax call? Or perhaps an html syntax error? Check the validity of your entire HTML page. Since you only posted a fragment I can't diagnose further.
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
var data = ['a', 'b', 'c'];
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
var data = ['x', 'y', 'z'];
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
I would do it like this, I had a similar problem before, the onchange events need to be assigned after the elements are loaded:
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
addOnChangeThingy(); // load onclick functions
});
});
function addOnChangeThingy(){
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
}

Updating two dynamic text fields simultaneously

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

Using GUID in id for HTML element doesn't work

I have the following code which adds an element to the DOM:
//if (params[i].UIControlType == "Textbox") {
// $("#parameters").append('<li><label for="' + RemoveIllegalCharacters(params[i].Name) +
// '" class="form-field">' + params[i].Name + unitofmeasure + '</label>' +
// '<input type="text" id="' + RemoveIllegalCharacters(params[i].Name) +
// '" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field parameter" /></li>');
// $("#" + RemoveIllegalCharacters(params[i].Name)).val(params[i].FloatValue);
//}
if (params[i].UIControlType == "Textbox") {
$("#parameters").append('<li><label for="ID_' + params[i].Id) + '" class="form-field">' + params[i].Name + unitofmeasure + '</label>' + '<input type="text" id="ID_' + params[i].Id + '" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field parameter" /></li>';
$("#ID_" + params[i].Id).val(params[i].FloatValue);
}
The first set of code (commented out) works. It appends the element using a value such as "ValveIR" for the id, but the second block of code (not commented out) uses a Guid as the id. Attached to the ID_ (needed to have the id start with a alpha character) will be like this: ID_db72d0ba-aebd-4a98-8a1b-7042936dff49.
Why would this not work? I need the ID and not the name for other code to work.
Any help appreciated.

Categories

Resources