pass dynamically created id to getElementById - javascript

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.

Related

pass a value from javascript to html and codeigniter

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;
// ------^^^------

jQuery echo a variable twice or how to increment

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=''>");

Parsley doesn't work after appending html

I tried following code, but it doesn't notify when there's no data in the input box. When I directly add this content (without) appending it works. What am I doing wrong here
var output = "<form class=\"registration__form\">\n"+
"<ul class=\"form-fields\">\n"+
"<li>\n"+
"<input type=\"text\" name=\"msisdn\" id=\"field-msisdn\" placeholder=\"Enter your MSISDN\" autofocus required data-parsley-required-message=\"Please insert your MSISDN\">\n"+
"</li>\n"+
"<li>\n"+
"<input type=\"button\" class=\"btn btn--large btn--fill btn--full\" value=\"Reset PIN\" onclick=\"submitMSISDN($('#field-msisdn').val());\"/>\n"+
"</li>\n"+
"</ul>\n"+
"</form>";
$("#gadgetBody").empty();
$("#gadgetBody").append(output);
$("#gadgetBody").parsley();
You have to call parsley() on the form, not on whatever contains the form.
In your case: $("#gadgetBody form").parsley() should work.

on loading html through javascript, textbox value doesn't consider space

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

Getting variable into JS via PHP assigned id

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();
};
?

Categories

Resources