Can I exclude a input field from form.reload? - javascript

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

Related

How to Add javascript variable inside html attribute

I have a form and I want to add javascript variable inside the value="". value="embedurl"
I am new to adding javascript variable inside html, so far, all of the solutions that i found on google is not working. How to do this? Thanks.
<form id="landing2" action="https://example.com/post10/" method="post">
<input type="hidden" name="name" value=" var embedurl ">
<input type="submit">
</form>
<script>
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementById('landing2').submit();
</script>
Try this ,
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementsByName("name")[0].value = embedurl; // here you need to set the input value
document.getElementById('landing2').submit();
If you want to add a javascript value, you must do it by javascript.
First, you need to get the dom input element, then set the value
var form = document.getElementById("landing2");
var input = form["name"];
input.value = embedurl;

How to use onchange function with a dynamic id that uses brackets

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;
};
};

Remove parameters before sending FORM POST

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

2-step dynamical echo of a php in innerHTML

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>

Calendar Control on Dynamically created forms

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.
}

Categories