Develop Reference

Submit form method=post with multiple different value=xxx with similar name=x?

I need to retype a bunch of names written on a paper and make a digital copy of it to a computer (a txt file). Then copy/paste each name and submit it again into a website one by one. Type one name then submit, wait until the page reloads, then repeat again. I saved the html file of the website but I don't have access to website's server. I was thinking I could modify the html file I saved so I'll just copy/paste once then click submit once. I'm not sure if it's possible to copy the names from the text file and embed it in the html code or maybe make a code to read the names from the txt file.
Honestly, I don't mind copy and pasting the names one by one into the website. What slows me down is the page reload time and the website only has one input field. It takes a few seconds to reload after submitting one name. So I want to be able to copy paste all then submit it once. I saved a local copy of the html file of the website and added action="website.com/xxxx" so it submits it to the website even if the html file is saved on my computer. The code below is a part of the website's html code:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>
I was thinking if I could modify it like this:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px" value="jane">
<input type="text" name="t" style="width:250px" value="jenny">
<input type="text" name="t" style="width:250px" value="mark">
<input type="text" name="t" style="width:250px" value="ben">
<input type="text" name="t" style="width:250px" value="cathy">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>

If you have PHP with HttpRequest installed, you can try something like this
<?php
$url = 'http://website.com/xxxx'; // url of the form action, not the form itself
$names = file('names.txt');
for($names as $name){
$request = new HttpRequest($url, HTTP_METH_POST);
$request->addPostFields(array('t' => trim($name)));
$request->send();
}
If you have PHP but no HttpRequets, you can use cURL, but I have absolutely no idea how it is working.
Other languages should have similar possibilities.

How can I fill the action parameter of a form with values from the form's input?

I know I can pass query parameters from a form and expect them in the query string:
<form method="GET">
<input type="text" name="param" value="value" />
<input type="submit" value="submit" />
</form>
This results in
http://blah-blah-blah/blah?param=value
However, in my webapp, I'm using path parameters. To access a single book, #459, in the library, you'd visit
/books/459
and to check one out, POST to
/books/459/checkout
where 459 is a path parameter. When I try
<form action="/books/{book_id}">...</form>
it takes me to
/books/%7Bbook_id%7D
rather than
/books/459
Do I need javascript or something to build the URI?

Thanks to RobG
I have used the same thing in calling WhatsApp from mobile application
It works beautifully
<form action="https://wa.me/"
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
<input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
<input type="text" name="text" value="Thanks Vijayan!" />
<input type="submit" value="WhatsApp" />
</form>

You may need something like:
<form onsubmit="this.action = this.action + this.book_id.value;" ...>
However, making the action dependent on scripting is poor design. It is much more robust for your server to deal with the URI ...?book_id=value, which does not require any client script at all.

If you are generating your HTML with PHP, the code below should work (untested).
$book_id = 459;
<form action="/books/{$book_id}">...</form>
Alternatively, you could dynamically modify the html using JavaScript. It is better not to do it this way because some users may disable JavaScript. (untested)
$('form').attr('action','/books/' + book_id);

Html Form Submit appends + (plus) in URL params

I am having a simple form following is the code
<form action="search.html" method="get" accept-charset="utf-8" id="search-within-form"">
<input type="hidden" name="within" id="within" value="">
<input type="text" name="q" value="" id="search-within" autocomplete="off" class="search-within-results inactive" title="">
<input type="submit"/>
</form>
I am entering test data for search in the field and click submit, in the URL I see is
/search.html?within=&q=test+data+for+search
But I need the url to be like tis
/search.html?within=&q=test data for search
I know this can be done by using java script form submit etc.. I like to know is there some way I can achieve this using html?
Thanks in advance.

Your URL will never display that way in a browser. Either the text will be seperated by those '+' characters or it will be seperated by '%20's. Is there a reason you need the URL to display in that fashion? Ultimately it comes down to how the browser displays the URL in the address bar. '%20' is code for a space. You might be able to develop a browser extension that would make them display with the spaces, but that sounds pretty terrible to me.

Why don't you clean the text at the place you retrieve the value from the form ? Is there any reason why you can't do that ?

Javascript acting funny in Internet Explorer

I have a website where I want people to be able to type something in a text box and get sent to that directory based on what they entered.
Say customer numbers, so we have customer # 155. His invoices are in folder /invoices/155 directory. I want him to be able to type in his customer # and be directed with a button click to his directory with all his invoices.
Now I have coded the below code but it only works when I click on the button with the mouse. In Internet Explorer When I press enter it gives me a bunch of gook in the address bar and doesn't do anything. It looks like this in the address bar:
file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155
Instead of loading the folder /invoices/155/.
<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">
</form>
Can anyone tell me what is wrong with the code and what can I do to fix it? Thanks in advance.

In some browsers the form will be posted when you press enter, eventhough there is no submit button. Use a submit button, and catch the submit, then you handle all cases:
<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>

It won't work, if you use file protocol. Especially in IE. You need a real web server.
And to let a customer type in his on id is extremely insecure. Anyone could type in any id. Use a login.
It is really*** important to sanitize every user input to prevent abuse.
It is a long way to go.

I think you should go for onsubmit on <form>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function handleFormSubmit(form)
{
window.location = form.dir.value + form.userinput.value;
return false;
}
</script>
</head>
<body>
<form onsubmit="return handleFormSubmit(this)">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text">
<input type="submit" value="try me" >
</form>
</body>
</html>​​​​​​​
BTW:
Inlining javascript is not so good. Use script tag or external .js-file.
Edit:
Oops! OK, the error was that I wrote this.form.dir but it needed to be this.dir because this already referred to the form, now that the javascript handler was on the form tag (onsubmit="<handler-code>"). That works - http://jsfiddle.net/Q875a/
Edit 2:
Inlining javascript means that you write javascript code in your html tags (form, input,...) in the onXXX attributes - it's not readable. Having your script in a script tag within a handler-function (i.e. handleFormSubmit) makes it much more readable especially if your site gets more and more script in it - see current script and onsubmit-attribute.
Finally, if you want to to take a step further to crossbrowser, powerful javascript development you should take a look at jQuery - it's imho the door to really professional and exiting javascript programming!
JSFiddle to test:
http://jsfiddle.net/yNTK5/
jQuery-links concerning the topic:
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]