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.
}
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 page with one form made in C# on the page there are several HTML elements. On button click I am using jQuery and add hidden fields than I submit form to external domain. Now the issue is, that it is sending all the parameters which I don't need. Is there any way that I can send only parameter that I need. I want to send parameter only in body.
Is there way to clear form parameter before adding parameter
jQuery Code
$("#aspnetForm").attr("action", "www.example.com");
$("#aspnetForm").attr("method", "post");
var params = a.split('?')[1].split('&'); /*custom string with key/value and sperated with & */
$.each(params, function (index) {
var paramsV = params[index].split('=');
$("#aspnetForm").append('<input type="hidden" name="' + paramsV[0] + '" value="' + paramsV[1] + '" /> ');
});
$("#aspnetForm").submit();
There more than 50 HTML element are added dynamically in my form and at each load it have different id. So I cannot disable those element in Jquery or javascript
I am using SharePoint 2013, it have its own master page where it add lot of elements which I don't have control, so I cannot individually disable them.
What I did is I created dynamically form add required parameter and then submit it.
Hope it can help somebody
$("#frm").remove(); /** remove extra frm before creating it **/
var frm = $('<form id="frm" action="' + _url + '" method="POST"></form>');
var params = a.split('?')[1].split('&'); /*custom string with key/value and sperated with & */
$.each(params, function (index) {
var paramsV = params[index].split('=');
frm.append('<input type="hidden" name="' + paramsV[0] + '" value="' + paramsV[1] + '" /> ');
});
frm.appendTo(document.body).submit();
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>
I have a script which adds a new form when a button is clicked to a HTML page with the code as following:
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("Max number of forms, " + counter );
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
+ "<select id='marc' name='marc'><option selected value=''></option>"
+ "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
+ "</div></form>"
;
}
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<input type="button" value="Adauga" onClick="addInput('dynamicInput');">
And I have the script bellow which changes the value from the slider.
<script>
function outputUpdate1(mot1) {
document.querySelector('#moto1').innerHTML = mot1;
}
</script>
My problem is that the JS code only changes the input for the first form, even if the slider is activated from another form. In short, the slider should return the value in the form from which it is activate; not only in the first form added.
Thank you!
Going along with my comment, the problem is stemming from the id value being the same across all of your output elements (moto1). You've actually got all the variables you need to make them unique since you're tracking a count of the number of forms on the page (your counter variable). You can use this in place of your current output HTML:
"<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
"<output for=motorizare1 id='moto_" + counter + "'>"
You can update your function to parse out the correct index for the output you want to update since they should be in sync if you use the HTML above:
function outputUpdate1(mot) {
// Get the counter part of the range element's id
var index = mot.id.split('_')[1];
document.querySelector('#moto_' + index).innerHTML = mot;
}
You may need to make some tweaks to code you haven't provided in the question, but that's one way of making the id values unique and how to access them without knowing the exact id ahead of time.
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();
}