I have some input fields that will be generated dynamically by jQuery. Each time a button will be pressed there will be added two input fields. To handle the names there is an auto increment for n. Now I thought I could use just one variable n to name the input tags.
$(wrapper).append("<input class='add' name='xdata_" + n + "' placeholder='type in' type='text' value=''><input class='add' name='xdata_"+ n++ +"' placeholder='Datum' type='text' value=''>");
First name tag will show the correct n. The problem is the second n++ which will just echo n same as the first even when it should increment by n++. When setting a second variable it works, but I wanted to shorten code. So I would like to know what I'm doing wrong?
Thanks alot.
You need to use ++n(pre-increment) instead of n++(post-increment)
$(wrapper).append("<input class='add' name='xdata_" + n + "' placeholder='type in' type='text' value=''><input class='add' name='xdata_"+ ++n +"' placeholder='Datum' type='text' value=''>");
Related
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++;
i using hidden's input
<input type='hidden' name='bahan' id='bahan' />
then, i want pass a value from js. i have a function called resultBtn() i get the value from it, example string var x='12,124';
i want take the value from other input
<?php $i=0; foreach ($bahanx as $pin2){
echo "<div class='input-group' style='width:175%'><label class='input-group-addon' style='width:100px'><input type='checkbox' name='bahan' aria-label='Checkbox for following text input' value='".$pin2->id_barang."' oninput='changeText(this,".$i.");' > ". $pin2->nama_barang ."</label><input type='text' class='form-control' aria-label='Text input with checkbox' name='banyak_bahan' value='0' disabled/></div><br/>";
$i++; } ?>
at resultBtn() i make a formula from bahanx then the result is x variable.
this is my js
document.getElementsByName('bahan').value=x;
The getElementsByName method returns a collection of elements(NodeList) so you need to retrieve element by index.
document.getElementsByName('bahan')[0].value = x;
// ------^^^------
i'm trying to pass dynamically created id to getElementById but when i try to log it, it says undefined.
"<input type='text' class='span2' name='price' pattern='[0-9.]*' id='p'"+ field.id + "placeholder='Price' value='0' />"
console:
console.log(document.getElementById("p"+field.id).value);
console.log($("#p"+field.id).val());
both says undefined. what is wrong i'm doing?
The way you concatenated your html string is improper,
...id='p'"+ field.id..
So the above snippet will be evaluated to id='p'Something And while rendering that something came from field.id will be treated as an attribute.
So try to write it like,
"<input type='text' class='span2' name='price' pattern='[0-9.]*' id='p"+ field.id + "' placeholder='Price' value='0' />"
//------------------------------------------------------------------^----------------^
//changed the position of quotes.
Below given is a fraction of code, which loads a table row dynamically through html. The table row has a textbox, which gets its value from the variable 'currentValue'. But if the content of 'currentValue' has a space in between, only the first word is displayed. Nothing after space is displayed in the textbox(In below code, only 'hello' is displayed). Please suggest some solutions other than setting value through separate javascript query.
currentValue = 'hello world';
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value="+ currentValue +" maxlength="+stringMaxLength+"></input></td>");
Think about the HTML you're producing. Suppose currentValue has "something here":
<td><input id=someid class='MyTextBox1' type='text' name='parameter_label' value=something here maxlength=40</input></td>
<!-- Notice ---------------------------------------------------------------------^^^^^^^^^^^^^^ -->
Now it should be obvious what the problem is (and that there are two other problems): You don't have quotes around the value attribute's value. That's only valid when the value doesn't have spaces (or several other characters). More in the specification.
So we add them:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value='"+ currentValue +"' maxlength="+stringMaxLength+"</input></td>");
// Note -----------------------------------------------------------------------------------------------^------------------^
That assumes that currentValue will never have ' in it. If it might, you can use " instead:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value=\""+ currentValue +"\" maxlength="+stringMaxLength+"</input></td>");
// Note -----------------------------------------------------------------------------------------------^^------------------^^
That assumes currentValue will never have " in it, or that you've properly prepped currentValue (handling turning < and & into entities, as you must for all attributes, and also in this case turning " into ").
The other two problems are:
You're missing the ending > on your <input ...> element.
Remove the </input>. input elements are void elements, they never have closing tags.
So:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value='"+ currentValue +"' maxlength="+stringMaxLength+"></td>");
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();
};
?