So I'm using a form in a specific page and I want to pass the exact search query to another url after submission
Example: I search for vehicles and I need the result to be domain.com/search/vehicles
So this is what I have so far:
<form id="" action="domain.com/" method="get">
<input type="text" name="search" />
<input type="submit" value="click here" />
</form>
The actual url result here is: domain.com/?search=vehicles
I can't figure out how to make it work
HTML forms will send the inputs in it as GET or POST (or DELETE or PUT also, I think) parameters. So they will send it as url?parameter1=xxx, they won't incorporate them in the url as you want like this url/parameter1/xxx/. I think to do it as you want is easier with jQuery (or plain javascript).
You can do this with jQuery, for example:
$("#form-id").submit(function() {
event.preventDefault(); // stops form from executing normal behavior
var newUrl = // get new url parameters and mount it;
document.location.href = newUrl; // sends to new location
/* Do Something */
return false;
});
document.location.href in javascript will redirect you to a new page.
Related
have you guys any ideas why the url is set in the $_GET, when i submit a form with post method?
I have a form like this:
<form action="/test/show/" method="post" enctype="multipart/form-data">
<input name="product" value="testing">
<input type="file" name="image">
<input type="submit" value="go" name="submit">
</form>
In my chrome i can see it will be send as post, but if i do this:
if (count($_GET) > 0) {
var_dump($_GET);
}
I get this result:
array(1) { ["url"]=> string(10) "test/show/" }
and i have no idea why?
Can you help me?
Under normal circumstances, with that URL, it wouldn't be. Presumably you are using mod_rewrite or similar to map /test/show onto something like /index.php?url="%2Ftest%2Fshow.
This is because PHP picked poor names for the $_GET superglobals.
An HTML form with method="GET" will put the data from its form controls in the query string, but that isn't the only way to request a URL with a query string.
$_GET contains data from the query string irrespective of the request method.
I am using a script that disables the submit button unless the user clicks and browses for a file to upload.
$(document).ready(function() {
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
I have 2 forms on the same page and I would like this tied to a specific form.
First form:
<form action="" method="post" name="name1" id="id1">
Second form:
<form action="" method="post" name="name2" id="id2">
is there a way in the javascript to attach it to #id1 specifically and not id2?
would I place it like this? $('#id1.input:submit') - what is the symbol or syntax to add the id into the script? Sorry I'm still learning which parts you can combine.
replace $('input:submit').attr('disabled',true); by
$('form#id1 input:submit').attr('disabled',true);
Is it possible to add groovy code to grails form?
I have a form:
<g:uploadForm controller="document" action="save" method="post">
<input type="file" name="dataFile" />
<input type="submit" id="addDocument" value="<g:message code=messages.document.save"/>">
</g:uploadForm>
I need to add code that puts the URL segments to the parameter value.
You're using a POST (because it's an upload and that's correct) method in your form, so you will not see the params in the URL. The params will get there (to the controller you redirect the request to), but won't show at the URL. In any case, you should go with hidden inputs in your form. Like:
<input type="hidden" id="foo" value=""/>
In your controller, you can get the parameters set in your input hidden fields simply by accessing the params map:
params.foo
Use hidden fields inside the form.
I am building a Lift application, where one of the pages is based on the "File Upload" example from the Lift demo at: http://demo.liftweb.net/file_upload.
If you look at the source code for that page... you see that there is a Lift "snippet" tag, surrounding two "choose" tags:
<lift:snippet type="misc:upload" form="post" multipart="true">
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
</choose:post>
<choose:get>
Select a file to upload: <ul:file_upload></ul:file_upload><br >
<input type="submit" value="Upload File">
</choose:get>
</lift:snippet>
The idea is that when a user hits the page for the first time (i.e. a GET request), then Lift will show the form for uploading a file. When the user submits the form (i.e. a POST request to the same page), then Lift instead displays the outcome of the file being processed.
With my application, the new wrinkle is that my "results" POST view needs to also contain a form. I want to provide a text input for the user to enter an email address, and a submit button that when pressed will email information about the processed file:
...
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!-- BEGIN NEW STUFF -->
Output: <br/>
<textarea rows="30" cols="100"><ul:output></ul:output></textarea>
<br/><br/>
Email the above output to this email address:<br/>
<ul:email/><br/>
<input type="submit" value="Email"/>
<!-- END NEW STUFF -->
</choose:post>
...
However, both the GET and POST versions of this page are wrapped by the same Lift-generated form, which has its "action" set to the same snippet in both cases. How can I change this such that in the POST version, the form's action changes to a different snippet?
In a typical web framework, I would approach something like this with an "onclick" event and two basic lines of JavaScript. However, I haven't even begun to wrap my mind around Lift's... err, interesting notions about writing JavaScript in Scala. Maybe I need to go down that route, or maybe there's a better approach altogether.
First, I will suggest you use Lift's new designer friendly CSS binding instead of the custom XHTML tag.
And one thing you should remember when you're using Lift's snippet, is that it is recursive, you could put an lift snippet inside another snippet's HTML block.
For example, if you wish there is another form after POST, then just put it into the block.
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!--
The following is same as <lift:snippet type="EMailForm" form="post" multipart="true">
-->
<form action="" method="post" data-lift="EMailForm">
<input type="text" name="email"/>
<input type="submit" />
</form>
</choose:post>
Then deal with the email form action at snippet class EMailForm.
Finally, you may pass the filename / minetype and other information by using hidden form element or SessionVar.
I agree with Brian, use Lift's new designer friendly CSS binding.
Use two separate forms, one for the file upload and one for the submitting the email. Use S.seeOther to redirect the user to the second form when the first has finished processing.
I also prefer the new 'data-lift' HTML attribute.
File upload HTML:
<div data-lift="uploadSnippet?form=post">
<input type="file" id="filename" />
<input type="submit" id="submit" />
</div
File upload snippet:
class uploadSnippet {
def processUpload = {
// do your processing
....
if (success)
S.seeOther("/getemail")
// if processing fails, just allow this method to exit to re-render your
// file upload form
}
def render = {
"#filename" #> SHtml.fileUpload(...) &
"#submit" #> SHtml.submit("Upload", processUpload _ )
}
}
GetEmail HTML:
<div data-lift="getEmailSnippet?form=post">
<input type="text" id="email" />
<input type="submit" id="submit" />
</div
Get Email Snippet:
class getEmailSnippet {
def processSubmit = {
....
}
def render = {
"#email" #> SHtml.text(...) &
"#submit" #> SHtml.submit("Upload", processSubmit _ )
}
There's a bit more on form processing in my blog post on using RequestVar's here:
http://tech.damianhelme.com/understanding-lifts-requestvars
Let me know if you want more detail.
Hope that's useful
Cheers
Damian
If somebody comes up with a more elegant (or "Lift-y") approach within the next few days, then I'll accept their answer. However, I came up with a workaround approach on my own.
I kept the current layout, where the view has a GET block and a POST block both submitting to the same snippet function. The snippet function still has an if-else block, handling each request differently depending on whether it's a GET or POST.
However, now I also have a secondary if-else block inside of the POST's block. This inner if-else looks at the name of the submit button that was clicked. If the submit button was the one for uploading a file, then the snippet handles the uploading and processing of the file. Otherwise, if it was the send email submit button shown after the first POST, then the snippet processes the sending of the email.
Not particularly glamorous, but it works just fine.
so i'm using nodejs and nodejsdb-mysql. i want to make form for adding and searching posts.
I make html page with form, transform it to node using jsdom but how do i set up variables?
for example my html form is like:
name = text input
surname = text input
submit
and how do i pass inserted name/surname to var??
You will need to turn your submit into a button with an event such as onclick - this might be what you are looking for:
<input type="button" value="Submit" id="submit" name="submit" onclick="submit()">
<script type="text/javascript">
function submit(){
var name = document.getElementById('**name**').value;
var surname = document.getElementById('**surname**').value;
alert("Thanks for submitting, " +name);
}
</script>
With nodejsdb-mysql sooner or later you will face real problems like date localization problems and so on, use https://github.com/felixge/node-mysql instead