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 ?
Related
I have to send text field value using href to php is something like below. But it is not correct way. Can anyone please give me any solution?
<input type="text" id="myText" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="button" value="Click"></a>
Put content inside a form. You can also change the button type input to a submit type, this way the form is sent automatically on click.
<form method="POST" action="yourURL.php">
<input type="text" id="myText" name="myElement" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="submit" value="Click"></a>
</form>
More information on forms: MDN
Whether you use GET or POST as a method, you'll be able to access the content of the form through PHP variables: $_GET, $_POST or the generic $_REQUEST.
More information in the PHP documentation
Note: PHP uses the name attribute of your HTML elements for those variables. Make sure to add this attribute to your HTML elements otherwise you'll have a hard time getting a value from $_REQUEST['myText']. I added the attribute holding the value "myElement" in the above code. It is accessible through PHP by typing $_REQUEST['myElement'].
Content sent through GET method is visible in the URL,
like this: www.example.com/test.php?var1=test&var2=test
<input type="text" id="myText" value="Mickey">
test
I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously
I want to pass two inputs' values into url to make it like
"http://www.testing.com?item=product+amount=100"
It is just an example.
A lot of tutorials are passing values from url into fields of the form.
how to make it in a reverse way...
Thanks in advance.
P.S
There are two pages, one page has one form.
Page One's form is filling by users, and then pass the values through url to Page Two's form, Page Two's form can grab the values from the url to fill up the relatively fields.
Thank you so much for you guys' reply.
var data = $('input').serialize();
More specific can be:
var data = $('#item, #amount').serialize();
Then append the data to the querystring of the URL, or use one of jQuery ajax functions.
Erm...
<form action="" method="get">
<input type="text" name="item" value="product" />
<input type="text" name="amount" value="100" />
<input type="submit" />
</form>
When the submit button is clicked, the item and amount variables are "passed into the URL".
We all know that bookmarklets are nothing but some
executable javascript code that do some things for us
when we click on them depending on the function that they
are intended to do... My Question is:
For example, I have a Bookmarklet, don't know, something like this one:
javascript:void(window.open('http://www.pdfdownload.org/web2pdf/Default.aspx?left=0&right=0&top=0&bottom=0&page=0&cURL='+document.location.href));
As far as I understand, the bookmarklet code (with the "&cURL=" thing) takes the URL that is in the adress bar of the browser and then do something with it in order to get a result. Something similar can be done with a selection, by changing some parameters in the bookmarklet (Like with the "Search selection in Google Maps" one) and some others.
How can I "decompile" a bookmarklet in order to make it take the desired data (in this case an URL) from a form?
For example, let's say I want to use the above bookmarklet in a webpage to provide a form that let's the user input a URL and then click a button to get the result.
I've seen other bookmarklets that get the URL from a "?input=" and others from a "?url="
How can I pass bookmarklet's functions to a form?
In a bookmarklet it's actually easiest to use prompt('Please enter a URL', 'default value') instead of the variable. Displaying a form in the current webpage is rather cumbersome.
If you just need one user-entered value, prompt() is an easy to use alternative to ask a user for more info. (Of course you can use multiple prompt() calls, too, but this will probably lead to a confused user)
Try something like this:
<form method="get" action="http://www.pdfdownload.org/web2pdf/Default.aspx">
<input type="hidden" name="left" value="0">
<input type="hidden" name="right" value="0">
<input type="hidden" name="top" value="0">
<input type="hidden" name="bottom" value="0">
<input type="hidden" name="page" value="0">
<input type="text" name="cURL">
<input type="submit">
</form>
Maybe you can call a javascript file in your bookmarklet :
javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.example.com/js.js');document.body.appendChild(e)})())
And you create an iframe on js.js
var site = location.href;
document.body.innerHTML += "<div style='background-color:white;z-index:1000;position:fixed;right:0;top:0' width='300' height='250'><iframe src='http://www.example.com/bookmarklet.php?q=" + site + "' /></div>";
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" ... /]