We Keep Coding

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.

How do I get the data value from a button?

I am building a forum app in node and I would like to create big bright buttons on my home page that would route users to another /view (topic) when clicked on.
I would like to gather the value of the button pushed inside of an object, so that I can use it within a dynamic route to be able to render to a specific view. I will also need that value to query with. Unfortunately I am having trouble getting the value of the button clicked.
Here are my buttons/inputs:
<form action='/topics' method="GET">
<input type="submit" value="boy" id="boy" class="bounce topics">
<button type="submit" value="girl" id="girl" class="bounce topics"><h2 class='topic'>Girl</h2></button>
</form>
when I console log req.body neither method gives me anything, I only get an empty object. I have read the two other threads I could find that were similar, but even though my code is comparable, I am getting nada.

I believe the method attribute in your form element needs to be POST instead of GET

You may use either GET or POST in the method. The difference is that you will be retrieving them from the $_GET or $_POST global variables on the server side in PHP (or similar variables in the language of your choosing).
Instead of using "id" for each input element, you must specify names:
<input type="submit" name="boy" value="boy">
<input type="submit" name="girl" value="girl">

You should be able to access URL / GET variables via req.query.<variablename>.

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.

How to Send an Image from the DOM, as Part of a Form

SHORT VERSION:
How do I attach an image object from the Document Object Model, using JavaScript, to a form so it can be sent to the server, without the user having to manually attach it using the input type=file tag?
Description:
I need a user to be able to look at a series of pics on a web page that were pulled in as the preview of a link he pasted, choose one, and have it automatically attach to a form, to be sent with text he wrote and processed by existing PHP as part of a new post, exactly as if he'd used an input type="file" interface to attach it.
The problem is that the pic exists in the browser as part of the Document Object Model, and it needs to somehow become an attachment into his form, to submit with his text as a new post. I've tried making a hidden input and making its value equal to the image, but that seems not to work.
The solution can be in jQuery, or hand-coded, I've been using JavaScript for 18 years, so I can understand either one...I just don't know how to attach a DOM object as a file to post to the server and process as part of a form.
Example Code:
This is not the actual code, which is complex and involves using JSON to pull a preview of a URL in PHP and send it back to the user, but it summarizes the problem:
<img id="image[0]" src="images/image0.jpg" onclick="attachimage(0)"/>
<img id="image[1]" src="images/image1.jpg" onclick="attachimage(1)"/>
<img id="image[2]" src="images/image2.jpg" onclick="attachimage(2)"/>
<form method="post">
<input type="text" name="title"/>
<textarea name="description"></textarea>
<input type="hidden" name="theimage" id="theimage">
<input type="submit" name="post" value="save">
</form>
<script>
var attachimage = function(item) {
// So far, nothing like this next line has worked for me,
// the image never shows up in the saved post
$("#theimage").val(document.getElementById("image[" + item + "]"));
}
</script>
CONTEXT:
I am working on a Wordpress website, using BuddyPress, to allow users to post their own links (a-la Digg and Reddit) without having Editor permission and using the Dashboard. I'm using a plugin called BuddyBlog (which uses bp-simple-front-end-post) to let users do this, which works fine...
But the owner also wants a preview to come up when they paste in a URL, just like it does on Facebook. I found nothing that already integrates the two features (user posts AND preview), so I pulled some open source code from the web that takes the URL, sends it via JSON to the server, which grabs the title, description, and images via PHP and sends the results back as a formatted HTML block. I then grab the values of those results and insert them into the BuddyBlog form fields...but BuddyBlog's form anticipates the image coming to it via:
<input type="file" name="bp_simple_post_upload_0">
...and I don't think I can simply set the value of bp_simple_post_upload_0 to be equal to the source of image[0]

If you've already processed the images on the server and created the previews, it means they're already there. So just pass in some variable representing which picture was selected and get the corresponding image. It's already on the server.
If the images are generated dynamically, with canvases or whatnot, you could send a base64 hash of them.

Prefilled HTML forms FROM buttons

I hope this question has an obvious answer to anyone who knows his way around JS and HTML :)
I have a very specific problem. I am trying to add to the header on a site buttons that will function like 'quick searches' which will basically on click send pre-filled form values to my search page and have the search page also populate these values in the ajax form inside.
Here is a sample search page that's outside of the results page:
http://www.thediamondsexperts.com/index.php?route=product/diamondsearch/jewelry
You'll notice that when you change the values there and click Search, the values also appear in the ajax form on the sidebar of the search results page.
What I simply want to do is create different variations for pre-set searches, and put them as buttons in the header.
When I try to put a few invisible forms in it won't work because of the multiple form values with the same ids but in general I think there must be a simple way to do this server side.
For instance, copy the current function that accepts the search, have it with pre-set values instead of populating the values from the form and then simply calling that function onClick. Does that make sense?
I need to create something simple enough though that would be easy for the admin to later change and customize more buttons so a client-side solution would be best.
Your help is much appreciated!

All you need is a form with hidden inputs and a submit button:
<form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>
This will only show the button, but the values will still be sent to your form's action.
...there must be a simple way to do this
server side
...a client-side solution would be best
...copy the current function that accepts
the search, have it with pre-set
values instead of populating the
values from the form and then simply
calling that function onClick. Does
that make sense?
Not really, not to me at least. If you can clarify I'd be glad to help more.
When you say "multiple form values with the same ids", I fear you may be confused: There is no requirement for a form input to have an "id", I think you mean "name", and there's no need to have multiple inputs with the same name in a form unless you want to send an array of values.
I didn't want to go overboard and talk about how the ajax works on that site, because that's another thing altogether and all you seemed to be concerned about was the preset search buttons. Hopefully this helps you figure it out, GL.
EDIT: I'm having a tough time figuring out what you're really asking, if you are trying to duplicate the behavior on that site, please tell us what server side language is available to you, if you're using or open to using any javascript libraries, and what you have tried so far. A full fledged spoon-feeding tutorial is really out of scope, you will get better, clearer help if you share the code from your current attempts.

If you want to pass values from one page to another and handle it client-side, use "get" for the form submit method, and use the handy "gup()" function to grab the param values. You can get more info on gup() here:
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
On your initial page, you can either use inputs with type="hidden" or just get the values from the visible inputs (as on your sample page). Then submit to your results page. Given an initial page with something like this...
<form method="get" action="results.html">
<input type="text" name="caratFrom" value="0.7" />
<input type="submit"/>
</form>
... here's sample usage for the results page:
var caratFrom = gup('caratFrom');
// etc.
Then simply assign those values to whatever elements you want, e.g. an input:
<!-- HTML -->
<input type="text" name="caratFromResult" value="" />
// Javascript
document.getElementById('caratFromResult').value = caratFrom;