I'm strugglin to make a PHP Form with Dynamic Fields with Auto Fill other fields in JQuery, so far I can add new fields and the autofill works just fine but only for the first field.
The autofill drop down only appears on the first input.
How can I make all dynamic form input work with the autofill?
For example I have 2 fields. Items_name and Total_stock in dynamic form. I want to if I select Items_name. Autofill for field total_stock.
Here is my ajax code :
<script language="javascript">
function AddMasterDetail() {
var idf = document.getElementById("idf").value;
stre="<div class='form-group' id='srow" + idf + "'><div class='controls'>";
stre=stre+" <div class='col-xs-2'>";
stre=stre+"<select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'>"
+"<option value='' disabled selected>Please Select</option>"
+"<?php foreach($v_items_stock as $row){ echo "<option value='$row->items_id'>$row->items_name</option>"; } ?></select>";
stre=stre+"</div>";
stre=stre+"<div class='col-xs-2'>";
stre=stre+"<input class='form-control input-sm' id='total_stock' placeholder='Total Stock' name='total_stock[]' />";
stre=stre+"</div>";
stre=stre+"<div class='col-xs-1'> <button type='button' class='btn btn-danger btn-sm' title='Hapus Rincian !' onclick='removeFormField(\"#srow" + idf + "\"); return false;'><i class='glyphicon glyphicon-remove'></i></button></div>";
$("#divItems").append(stre);
idf = (idf-1) + 2;
document.getElementById("idf").value = idf;
}
function removeFormField(idf) {
$(idf).remove();
}
function autofill(){
var items_id = document.getElementById('items_id').value;
$.ajax({
url:"<?php echo base_url();?>transaction_sending/cari",
data:'&items_id='+items_id,
success:function(data){
var hasil = JSON.parse(data);
$.each(hasil, function(key,val){
document.getElementById('items_id').value=val.items_id;
document.getElementById('total_stock').value=val.total_stock;
});
}
});
}
</script>
The problem is that you're re-using "items_id" as the ID for lots of elements. But IDs must be unique. When you run document.getElementById('items_id') (which can only return one element) the code has no way to know which of the multiple elements with that ID you're actually referring to.
Now, as I understand it you want to have a relationship between the select and the input box next to it. The value of the select must affect the value of the input box, it seems. Therefore you a way need to identify the correct input box which relates to the select whose value has been changed.
There are many ways you could do this, but one simple way way is to set a data-attribute on the <select containing the unique identifier of the row (you can use idf for this). You then set the same value as the id of the related input box. Then when the "change" event happens, you can get the data-attribute from the select which triggered the event, and use it to select the correct input ID to update.
I've also used more jQuery syntax for this, since you get unobtrusive event handling, and also the syntax is a bit briefer - it works nicely for this scenario.
First, change
stre=stre+"<select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'>"
to
stre=stre+"<select placeholder='Items Name' class='form-control input-sm autofill' name='items_id[]' id='items_id_" + idf + "' data-idf='" + idf + "' >"
Next, change
stre=stre+"<input class='form-control input-sm' id='total_stock' placeholder='Total Stock' name='total_stock[]' />";
to
stre=stre+"<input class='form-control input-sm' id='total_stock_" + idf + "' placeholder='Total Stock' name='total_stock[]' />";
And then replace the whole "autofill()" function with this event handler:
$(document).on("change", ".autofill", function(e) {
var select = $(this);
var item_id = select.val();
var idf = select.data("idf");
$.ajax({
url:"<?php echo base_url();?>transaction_sending/cari",
method: "GET",
data: { items_id: item_id },
dataType: "json"
}).done(function(hasil) {
$("#total_stock_" + idf).val(hasil[0].total_stock);
});
});
I have made the assumption here (pending a comment from you) that we only ever want to use the stock value from first item of data in the hasil array (and/or that it only ever returns one item, despite being an array). If that's not correct then please clarify the situation with this data - it seems odd for the server to return an array if, in reality, you are only asking for information about one item. It would be more logical for it to just return a single object instead.
P.S. as a minor, unrelated point, you can also simplify this line
idf = (idf-1) + 2;
to
idf++;
Related
I have a dynamically created table named "jobTable" based on some text inputs and a button and also save the data into an array at the same time. Each row of the table contains a button which is used to remove the entire row and update the array. Whenever a user tries to delete a row, the row will be correctly deleted but the array will be completely flushed and I lose all of the data. I guess it must be because of that all of the dynamically generated buttons share the same 'id' so the button's selector's function will be invoked more than one time, but it works fine on the table itself! Why is this happening?
var workExperience = [];
$("#jobTable").on('click', '#DeleteRow', function () {
$removeditem = $(this).closest('tr').parent().index();
$(this).closest('tr').remove();
delData($removeditem);
});
function delData($x) {
workExperience.splice($x - 1, 1);
console.log(workExperience); //the array will be flushed in a few steps!
}
$("#save").click( function () {
//Save the data into an array inorder to send it to the server later.
workExperience.push($("#companyName").val());
//Append data into some table in order to make the user able to see or remove each row he/she enters
$("#jobtable").append(
"<tbody>" +
"<tr>" +
"<td>" +
"<button type='button' id='DeleteRow'>"+
"</td>" +
"<td>" +
$("#companyName").val() +
"</td>" +
"</tr>" +
"</tbody>");
});
I lack the reputation to make this a comment, but could you please provide some more information on your HTML?
Alternatively if you don't mind adding a library. Knockout.js could handle this. See this tutorial.
I am not sure why you would like to store data at two places and try to maintain on delete button click.
Creating delete button with same ID is not good idea either.
I took a liberty and put together example for storing data into data- attribute for each company. I have stored just string into "data-workExp", but you can pretty much add any object like array. Here is the entire code for you:
$(function () {
$("#jobtable").on('click', '.DeleteRow', function () {
$(this).parent().remove();
});
$('#toServer').click(function () {
$('#serverData').html("");
$('.CompanyRow').each(function () {
$('#serverData').append("<div>" + $(this).data("workExp") + "</div>");
});
});
$("#save").click(function () {
$("#jobtable").append(
$('<div>').addClass('CompanyRow').data('workExp', $("#companyName").val())
.html($("#companyName").val() + "<input type='button' class='DeleteRow' value='Delete Me'>")
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
<input id="companyName" type="text"><br />
<input type="button" id="save" value="Save">
<input type="button" id="toServer" value="Save to server!"/>
</div>
<div id="jobtable" >
</div>
<h1>Data goes to server</h1>
<div id="serverData"></div>
I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal.
I have encountered a problem where adding <pattern> and/or required doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.
EDIT:
I have added the relevant code to a plunkr
I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the pattern='patternVariable'.
The pattern for this example (however it doesn't work no matter what pattern I use):
^[a-zA-Z0-9\.]+$
Creating the form:
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";
if(columnTypes[j].type.includes("text")){
data += "<input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
}
if(...){...}
data +="</div><div style='clear:both;'></div></div>";
}
data += "</form>";
As you can see I add the tags like so:
pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required ...
The modal:
$('#altEditor-modal').on('show.bs.modal', function() {
$('#altEditor-modal').find('.modal-title').html('Edit Record');
$('#altEditor-modal').find('.modal-body').html(data);
$('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
<input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");
I made sure that the button has type='submit' as I've read that this is what triggers the pattern-check.
editRowBtn code:
$(document).on('click', '#editRowBtn', function(e)
{
e.preventDefault();
e.stopPropagation();
that._editRowData();
});
To make sure that my code is actually adding the attributes to the input i checked the console:
Any help or advice is greatly appreciated as I'm kinda stuck here.
It's a little hard to read your examples (a plunkr would be nice :) ), but from what I can see, you've put your submit button outside your form.
That won't work, since the button won't know what it's submitting.
Try putting the submit button inside the form.
Alternatively, try using the form attribute on the submit button, which should reference the form ID. I've never used this myself, but according to MDN, it's part of the HTML5 spec.
Form attribute description from MDN:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
I have the following Javascript to generate a silent call to another sheet to update a database value without refreshing the page
function UpdateDB(table,column,type){
var value = $("#Assigned").val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
This works perfectly but only for the "Assigned" table row since it is statically assigned.
I use the following php to generate the table entry with button
print "<tr><td>" . $stuff['Status'] . "</td><td ><input type=\"text\" id=\"" . $stuff['Status'] . "\" name=\"" . $stuff['Status'] . "\" value=". $stuff['Value'] ." size = \"4\" style = \"text-align: center\"/><button onclick=\"UpdateDB('NOCstatus','Status','". $stuff['Status'] ."');\">Update</button></td></tr>";
Which after variables are assigned looks like this for my "Pending" row
<input id="Pending" type="text" style="text-align: center" size="4" value="120" name="Pending"> </input>
<button onclick="UpdateDB('NOCstatus','Status','Pending');">
Update
</button>
My problem is that passing "this.value" or trying to use a variable in the javascript portion I always come up with a blank value, the only time I can get a value to be correct is by statically assigning the "#Assigned" or "#Pending" in the value field. I have hundreds of entries so I don't want to write the function over for each of these. I know there is probably something extremely simple I am missing but I cannot get the pieces to fit.
I need to pass the typed in value in the input field to the function to update the database. Please help.
function UpdateDB(table,column,type){
var value = $('#'+type).val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
?
My application successfully creates elements and assigns them different (increasing) IDs.
Now my issue relies when the user deletes these elements (because they have the option to delete as well as create), the consistency of these IDs get broken therefore my application doesn't run well.
This Fiddle represents what I have so far. Just a textbox that appends its value and a few other elements inside a collapsible as many times as the user wants (For some reason my fiddle doesn't increment the alert value, but it works fine on my platform).
SCRIPT (Sorry the txt variable is too long)
$('#Add').click(function () {
if ($("#MedNameStren").val() != "") {
var value = $("#MedNameStren").val();
var noOfMeds = $('#NoOfMedicines').val();
//to check current value
alert(noOfMeds);
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="left" data-content-theme="e">' + '<h2>' + desc + '</h2>' + '<div class="ui-grid-a">' + '<div class="ui-block-a" style="width:25%; margin-right:3%;">' + '<input id="quantity' + noOfMeds + '" class="quantity" type="text" placeholder="Quantity" />' + '</div>' + '<div class="ui-block-b" style="width:70%; margin-right:2%;"">' + '<textarea id="directions' + noOfMeds + '" class="directions" cols="40" rows="4" placeholder="Directions given by your GP." ></textarea>' + '</div>' + '</div>' + '<button key="' + vpid + '">Remove</button>' + '</div>';
$("#medListLi").append(text);
$('button').button();
$('#medListLi').find('div[data-role=collapsible]').collapsible();
$('#medListLi li').listview("refresh");
$('#medListLi').trigger("create");
document.getElementById("manuallyName").value = "";
noOfMeds++
$("#NoOfMedicines").val(noOfMeds);
}
else {
alert('Please Provide Medicine Name')
}
});
I am using a counter that neatly increments the ids of quantity and description like:
quantity0
quantity1
quantity2
..and so on, but once the following script is called...
//Deletes colapsible sets (Medicines) from the selected List
$('#medListLi').on('click', 'button', function (el) {
$(this).closest('div[data-role=collapsible]').remove();
var key = $(this).attr('key');
localStorage.removeItem(key);
var noOfMeds = $('#NoOfMedicines').val();
noOfMeds--
$("#NoOfMedicines").val(noOfMeds);
//location.reload();
});
depending on which element (collapsible) is deleted, the IDs stop being consistent. For example if the collapsible with id="quantity1" is deleted then the counter will go back to 1 (currently 2) and on the next addition the respective collapsible will get an id that's already taken, and unfortunately I don't need this to happen.
Maybe I'm making this sound more complicated that it is, but will appreciate any suggestions or ideas to solve this issue (if possible).
If more information is needed, please let me know.
Was brought to my attention that creating and deleting dynamic IDs can be done but keeping up with consistency of these IDs can be very tricky to work around it.
I've solved my own problem by simply creating a function that would keep count of the IDs from the amount of collapsibles inside my list and "renewing" the ID numbers on each Add and Delete.
I am working on a Quiz Application where I need to get all the selected elements or the user answers . These elements can be radio input, check-box input or the text field. every element is assigned a question_id attribute, answer_id and a mark attribute with it. What I want to do is I have to get these all question_id , answer_id and mark attribute so that I can calculate marks, and send the both question_id and answer_id to DB so that i can store the related user answer under a particular question. i have rendered the quiz on template using this code.
$(data.quiztopics).each(function(index,element){
$(element.questions).each(function(index,question){
$(".quiz").append("<form name='question' class= question_"+question.id+"><input type='text' disabled value="+question.question_text+"/><br></form>");
if(question.question_type=='NUM'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='radio' question_id='+question.id+'answer_id='+answer.id +'name='answer' class=answer_"+answer.id+" mark="+answer.marks+"value="+answer.answer_text+">"+answer.answer_text+"</input>")
});
}
else if(question.question_type=='MCQ'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='checkbox' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
});
}
else if(question.question_type=='FIB'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='text' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
});
}
});
});
tell me how can i get the attributes of the selected elements for submitting the quiz.
I think this will do:
var questions = {};
$(".quiz :selected, .quiz :checked, .quiz input[type=text]").each({
var $this = $(this);
var question = $this.attr('question_id');
questions[question] = {
answer: $this.attr('class'),
};
});
its very simple, you just have to use element.attr( attributeName ) function
JQuery documentation
A little JSFIddle to get you going
alert("Radio Mark " + $("#one").attr('mark') + ", Radio Value " + $("#one").attr('value'));
alert("check Mark " + $("#two").attr('mark') + ", check Value " + $("#two").attr('value'));
I have solved this problem by getting all the elements available in the DOM by their name, using getElementsByName('answer') method. It returns me a list then looping over this list i checked if the element is check or not if it is checked i get their attributes.
attributes_list=new Array()
var answers=document.getElementsByName('answer');
for(i=0;i<answers.length;i++){
if(answers[i].checked){
question_id=answers[i].attributes['question_id'].value
answer_id=answers[i].attributes['answer_id'].value
attributes_list.push({'que':question_id,'ans':answer_id});
}
}