how to get name of dynamically generated text input in php - javascript

I want to make a page like this
http://agprotective.com.au/invoice/invoice.htm
There someone can add multiple date,site,start time, end time, hours amount by click the button + or can remove the row using - sign button. How can I get the value of that input in php? Normarlly we use $_POST['here-is-the-value-of-name-attribute-of-the-input-tag'];
But in the case http://agprotective.com.au/invoice/invoice.htm , I do not know what will be the value of the name attribute of the tag.
Can anyone tell me how to get the values of the dynamically generated (button generated) input tags and then send them to database.

The correct way to do this is simple:
<input name="myinput[]" />
PHP will then have:
$_POST['myinput'][0], $_POST['myinput'][1]...
The page you linked does it in a stupid manner, if I'm honest.

Related

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

take html input from user and out modified html back to the user

I have a text box on my site that will take in HTML from the user. I want to be able to take that HTML and modify it and then output the new HTML back to the user. The changes would always be easy because I would only be replacing certain characters within that HTML. They would be the same characters each time.
I think the best way to do this would be to take each line and add it to an array. That way i can output each part of the array into a new line using a for loop or something. This would also preserve line breaks. But that still doesn't solve the HTML issue. Right now when I take in HTML and try to output it, i can't. It won't show up unless it's plain text.
Currently I can only do a single line of text by just using innerHTML.
Is there a way to do this with vanilla JS?
any suggestions on where i could look would be awesome! thank you.
Consider using a prompt like so:
<html>
<script type="text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
// You can do something like convert it all to lowercase here:
document.write("You have entered : " + retVal.toLowerCase());
}
</script>
Click the following button to see the result:
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
Thus returning modified user input to the user without posting anything or submitting a form. This is just a simple example, but you can take this and apply it to an input field with a button by adding
onclick="functionToDoSomething()"
as an attribute to the button, and having the function get and alter the value of the input field.

Autopopulate form input texboxes with javascript

I have this following problem because I don't have expertise in Javascript
I'm testing a Facebook login at
http://goo.gl/3R3owa
After the user is logged in Facebook an alert windows with the birthday and location comes up. So far so good.
Rather than show that window i will like to autopopulate the day, month and year input boxes in that page.
Is there any way to do that?
Here is my code
http://goo.gl/IFhJdu
Thanks in advance!
Assuming that you have all the data in the response object and element_id# is a valid id of an element present on the HTML page. You can simply use following JS code do set the value of an input field in JS:
document.getElementById('element_id1').value = response.gender;
document.getElementById('element_id2').value = response.birthday;
document.getElementById('element_id3').value = response.location.name;
Similarly, for feeding the data to an HTML element, you can use innerHTML, for example:
document.getElementById('element_id1').innerHTML= response.gender;
(You can use the above code to replace the alert() method in you JS code.)

Collect data with PHP from dynamically created inputs

I have this code: http://jsfiddle.net/Zx8hc/9/.
It's a form where a user can add input-text dynamically, he can add and delete as many as he wants (only and the first being mandatory). And since he can add and delete the ones he likes their ID's may not be consecutive.
My question is how can I collect the data from the newly created inputs with PHP and store it in vars, each input in it's own var, independently ([input_1] > $input_1, so on). My idea was to create a for loop and go through all the elements from 0 to n, and those who contain data would be stored and those who don't wouldn't. Would that be an appropriate approach?
I am sorry that I don't have any PHP code to show but I don't even know where to start with this one, so thank you very much in advance if you can help me with this one.
I have checked your fiddle, and you have the next HTML as input element.
<input type="text">
If you want to send form data to a server, you have to wrap it in a form element. Here below is an example of a simple form
<form action="url_to_php_file.php" method="post">
<input type="text" name="age[]" />
<input type="submit" value="submit" />
</form>
Here, you see a <form> element, which you can use to pass form data to the server. It has several attributes. Here, action is the URL to where the form content should be sent to. Pick it the PHP file where the form should be handled. If it's on the same page as the display, just use # as field.
Then method-attribute is to send the form by POST data. The other option is using GET, but it's not secure because using GET will send in the form data in the URL too. While POST will wrap it in the request.
If you have a form element, it's necessary to have a button to submit the form. By submitting, you're activating the trigger to send the form to the address described in action-attribute of the form. That's the input-submit element.
Now, the data itself. Each input has to be assigned with a name-attribute. The content of it will be associated to that name when submitting the form. If you want to send in multiple data as one name field, you have to use an array, the [] in the form name.
For example, age will only hold one data-entry. While age[] can hold multiple values.
If you want to add the element, just clone the said object, only if it doesn't have id with it. If you have multiple elements with same id, you can get unpredictable results. It's advisable to keep id's unique.
And on your PHP file, read the $_POST['name'] as an array.
...... edited.
I suggest to create these new inputs with name tags. These name tags must be unique e.g. cool_input1, cool_input_2, ... OR use as array: cool_input[].
As result - you can get incoming info in php and parse received data from POST/GET.
For the first idea you don't need to know real count of the generated inputs. You just can use 'foreach element in POST' and if its name matches your pattern - this is what you need.

innerHTML alternative or replace onchange event with a div

I am stuck with a problem and I need you people to help me out.
I have a html form. It sends country, state, city and pin code(to be entered manually) to a php file to process with help of ajax. Once submitted it returns with the pin code value in the text box.
What I want is, whenever a user changes the value of pin code for the second time the form needs to be reset.
What I have done is, I used innerHTML like this:
<form id="someid" method="post">
<input type="text" value="'.$_POST['pin-code'].'" onChange="resetpin();" />
The reset form is like this:
function resetpin() {
document.getElementById('someid').innerHTML = Full HTML CODE FROM ABOVE FORM GOES HERE
This code becomes ugly as the .innerHTML contains all the code for selecting country, city, state which gets repeated two time in the same page.
So what I thought was, can I be able to do something like this?
When user changes pin for the second time the form need to get reset like.
onchange=showdiv("ID of the form and contents to be displayed")
Can I be able to do this so that I do not need to use innerHTML...
Please help me out.
Your resetpin function needs to loop through the input elements of the form resetting their values (excepting for the pin presumably).

Categories