Develop Reference

Using a Form to Dynamically Change the URL in the Address Bar Part 2

Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...

any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>

It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.

javascript only executes once

I'm writing a cms page for my site. part of it is writing a preview component for my blog. I have a form, and a preview button, that activates a Javascript, which places the html typed in the text-area in a div element to test it. Everything works fine but the problem is that it only works once for each pageload. So I can't test something, add some code and retest it. Any ideas how to make multiple testing possible ?
Code Form:
<form>
<textarea rows="30"cols="30" name="blogpost" style="width:500px;resize:none;" autofocus placeholder="Enter your new blogpost here!"></textarea>
</br>
<input type = "submit" value="post">
<input type = "button" id="testknop" value="previeuw" onclick="previeuwpost(this.form, this.form.blogpost);">
<input type="reset" />
</form>
Javascript Code:
function previeuwpost(form, text){
$("#previeuwbox").replaceWith(text.value);
}
Thanks a lot folks

replaceWith means replaced.
Therefore, after you click, the $("#previeuwbox") is gone.
Please use :
$("#previeuwbox").html(text.value);

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 ?

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?

No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.

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" ... /]