step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.
i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>
Related
I have a php table created by a mysqli query where I want users to be able to update the date values of a text cell. For other formatting reasons, I have chosen not to use the date input.
My script works for other forms with an id that does not include brackets and changes the form value immediately and correctly. However, when I apply the onchange function to the table cell, it seems the brackets in the id may be holding me up. I can see in the console that I am calling the correct bracketed id, however, nothing else happens.
Here is my cell:
<td>
<input type='text' class='form-control form-control-sm'
id='tbl_date01[".$tbl_ID."]' name='tbl_date01[".$tbl_ID."]'
value='".$tbl_date01."' onchange=\"dateChange()\" required />
</td>
Here is my script:
function dateChange(){
var id = (event.target.id);
var y = document.getElementById(id).value;
if(y === '?'){
$("#"+id).val(new Date().toJSON().slice(0,10).substring(5,7) + '/' + new Date().toJSON().slice(0,10).substring(8,10) + '/' + new Date().toJSON().slice(0,10).substring(0,4));
return;
};
};
I have a problem with passing javascript variable as value on input hidden type on html form.
For more details :
public function exportToPdf1($headerText=""){
// serialize the grid object into the session
$_SESSION[$this->viewPaneId."-pdf"] = serialize($this);
$pfdExport .= ' // create the export to pdf button
$("#'.$this->getViewPaneId().'").prepend("<div id=\"pdfExport\" style=\"float:right; border: none; cursor:pointer;\"><img src=\"images/stock_save_pdf.png\"> </div>");';
$pfdExport.=' // onClick function
var printToPdf = false;
var selectedRowId;
$("#pdfExport").click(function(){
selectedRowId = $("#'.$this->getViewPaneId().'input[name=\'rowSelectionRadio\']:checked").val();
if(selectedRowId){
if(confirm("Are you sure to print this object ?")){
printToPdf = true;
}
}else{
printToPdf = false;
alert("Please select an element from the table first.");
}
// create a temporarly form, in order to POST the data
$("<form id=\"pdf-form\" method=\"post\" action=\"index.php?c=gridToPdf\"><input type=\"hidden\" name=\"gridObjId\" value=\"'.$this->viewPaneId.'\"></form>").appendTo("#rightcolumn");
$("<input type=\"hidden\" name=\"headerText\" value=\"'.$headerText.'\">").appendTo("#pdf-form");
$("<input type=\"hidden\" name=\"act\" value=\"exportObject\">").appendTo("#pdf-form");
$("<input type=\"hidden\" name=\"rId\" value=\"'.selectedRowId.'\" >").appendTo("#pdf-form");
// submit the form and remove it
$("#pdf-form").submit().remove();
}
});';
Always rId gets as value string "selectedRowId", not the value of the selectedRowId var.
have any anyone any idea how to handle this problem?
well, selectedRowId doesn't seem to be defined and selectedRowId is also no valid variable in php, thats why the input field has the value selectedRowId as php thinks its a string rather than a variable.
/edit-> okey, I see that selectedRowId is a javascript variable and not a php variable. So you will need to to use "+" for concatination rather than "." and
I have a php code here which get the data in database and display it in php, it will create a textbox in every row and column, what I want is in every textbox that I will change in every row the last row in table should be sum up. Is there a way to do it?and how? Thank you.
<?php
include('../connect.php');
//$listsubid=$_GET['listsubid'];
$result = mysql_query("SELECT * FROM studsubject WHERE listsubid='$listsubid'");
while($row = mysql_fetch_array($result))
{
echo '<tr class="record">';
//echo '<td style="border-left: 1px solid #C1DAD7">'.$row['fname'].' '.$row['mname'].' '.$row['lname'].'</td>';
$sidnumber = $row['sidnumber'];
echo '<td><div align="left">'.$sidnumber.'          </div></td>';
$result1 = mysql_query("SELECT * FROM student WHERE idnumber = '$sidnumber'");
while($row1 =mysql_fetch_array($result1))
{
echo '<td><div align = "left">'.$row1['lname'].' '.$row1['fname'].' '.$row1['mname'].'</div></td>';
echo '<input type = "text" name ="grade_id[]" value = '.$row['grade_id'].'>';
$grade_id = $row['grade_id'];
$result2 = mysql_query("SELECT * FROM prelim WHERE prelim_id = '$grade_id'");
while($row2 = mysql_fetch_array($result2))
{
echo '<td><input type="text" size= "2" maxlength = "3" name="att1[]" value = '.$row2['att1'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att2[]" value = '.$row2['att2'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att3[]" value = '.$row2['att3'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att4[]" value = '.$row2['att4'].'></td>'; } ?>
Yes you can do this, but for it to happen as the user changes it you will need to use javascript.
If you want your database to update as the user makes changes, you will need to watch each input field using something like jquery. If that field changes you can then make a post request to the server. This will require you to have a place to make a post, get, or put request.
The summing will also need to be done with javascript. You will need to watch each input field. If the user makes a change to one of the fields you will need to take that value, sum it with the rest of the row and then update the total.
You can do this with php as well but it will not happen as the user inputs new values. They will need to have a submit button, and after submission the user will be presented the update view.
The best way is to use JavaScript. Is it possible to do it in PHP? Sure, but you will want to add an "Update" button that, when pressed, will not only sum the values but re-render the whole page with both the sum and the original values. I would strongly recommend not doing this, however.
If you use JavaScript, it's as simple as something like this:
var sum = document.getElementsByName("att").reduce(function(a, b) { return a + b; });
document.getElementByID('totalTextBox').value = sum;
Just use name="att" for you text boxes instead of what you have.
I've got a form.reload piece of JS that adds the chosen form dropdown to a variable, and to the head of the document so I can pass variables to the next page.
Sadly, my form reload is removing input fields that have been inputted.
Here's my simple JS reloading the form:
function reload(form) {
var val=form.cat.value;
var val2=form.cat2.value;
var val3=form.val3.value;
var val4=form.val4.value;
var val5=form.val5.value;
self.location='mypage.php?val=' + val + '&val1=' + val2 + '&val2=' + val3 + '&val4=' + val4 + '&val5=' + val5;
}
My call:
<select name='val' onchange=\"reload(this.form)\">
It's removing (reloading) my inputs. Is there a way around this?
I want to keep the form input when reloading the form.
You could try something like this in your php file
<input type='text' name='cat' value='<?php print $_REQUEST[val]; ?>'>
an alternate suggestion to add all the values to the header is this
function reload(form) {
self.location='mypage.php?' + $(form).serialize();
}
I’m trying to accomplish a small task where I have one single Form ITERATED with a Date textinput which gets its Value by a Javascript DatePicker control.
My problem is, the datepicker on all these dynamically created forms only prints value on the first textbox element in the first form, how do I give it Dynamic reference to forms[x] text box element.
My form names are being generated Dynamically as form1, form2, form3, form[x], how do I reference the inner element of that particular form whose DatePicker is being clicked.
you can download the Zip file which has the datepicker & the HTML page for the Dynamic forms from here enter link description here
function addElement() {
intTextBox = intTextBox + 1;
intTextArea = intTextArea + 1;
var contentID = document.getElementById("new-field-back");
var newTBDiv = document.createElement("div");
newTBDiv.onclick=function(){ current=this; }
newTBDiv.setAttribute("id","strText"+intTextBox);
newTBDiv.innerHTML = "<br/><br/><form method='post' name='form" + intTextBox + "'><input
id='date_of_event' name='date_of_event" + intTextBox + "' class='date-pick' value=''><div
class='date-text'><a href='#' onclick=displayDatePicker('date_of_event" + intTextBox +
"');>Calendar</a></div></div><input type='submit' value='Update'><input type='button'
onclick='removeElement()' value='Remove'></form><br/><br/>";
contentID.appendChild(newTBDiv);
}
this is the correct function
if you are sending all data using one click of a button then you need to add a hidden field on the html form containing the total number of dates to be sent.
$num=$_POST['no_of_dates'];
$i;
for ($i=1;$i<=$num;$i++)
{
$_field_name="date_of_event".$i;
$_date_get=$_POST[$_field_name];
//now you can insert the $_date_get variable into the database by running a query.
}