I am implementing a search an sending a search form to an action. Everything is working as expected but the url after the submit isn't very friendly and contain undesirable information. It is showing the whole request query array as a query string. I have a form with a fieldset element named 'album-search'.
Here is the url I am getting right now:
http://hostname/music_organizer/public/albums/page/1?album-search[term]=art&csrf=12b6065ab7ea428f02ad36a9cc363752-d96a14c1c7f1f2961112014a1e200e03&search=Search
Here is the url i am want to get:
http://hostname/music_organizer/public/albums/page/1?term=art
I have tried to set the query string in the action like this:
public function searchAction(){
//code
$this->getRequest()->getQuery()->set('term', $term);
//code
return $viewModel;
}
but no luck,
Thanks in advance
I thought your current rendering form should be like this
<form method="get" action="...">
<input name="term">
<input type="hidden" name="csrf" value="...">
<input type="submit" name="" value="Search">
<form>
Remove Submit Button:
Don't specify the submit button name while creating it
Remove CSRF element
If you don't required csrf element in querystring then remove it from your view page. but this csrf tag is very useful to avoid cross-site request forgery attacks.
--SJ
Related
I'm making a single web app.
I have a form with a POST method and an action value equal to "/login".
<form action="/login" method="POST">
<label for="mail">Email</label><input name="log" id="mail" type="text">
<label for="pass">Pass</label><input name="pass" id="pass" type="text">
<input type="submit">
When the submit button is press, server get the form, then return to the index page.
But, in the address bar, I have "local:5050/login" and would have "local:5050".
Can I remove the "login" mention ?
Since you are making a SPA, you will not want to have the POST method of the form actually complete. Generally this is done in dart by attaching a listener on the form element, within that listener you would then do a couple of things:
1) Cancel the default action (Also see: How do I prevent an on.submit event from changing/reloading the page?)
2) Get the values you're interested in from the form (or potentially take the entire form itself)
3) Send the values via an AJAX request to the server and listen for the response from the server to verify it was valid etc.
See the Dart tutorials on forms for more information on accomplishing the other steps.
I would like to send a get request with jquery but the get function does not put the query strings in the address bar.I tried setting async to false but it still does not work.
$("#searchForm").submit(function (event) {
var x = $("#category").serialize();
$.get("Home/test", x, function (data) {
alert(data);
});
event.preventDefault();
});
The code above does not put the query strings in the address bar like a normal get request would.
hence i should have in the browser address bar something like Home/Text/?category=laptop
for example
any other solutions to specify what querystrings i can put in the address bar are welcome.
form id="searchForm" action="#Url.Action("Index")" method="get">
<input type="text" name="search" id="search />
<div id="price">
<input type="text" id="PriceMin" name="PriceMin" />
<input type="text" id="PriceMax" name="PriceMax" />
</div>
<input type="submit" value="submit"/>
</form>
as an example i dont want in the url querystrings of
?search=volvo&PriceMin=&PriceMax=
In other words, the input fields that are null should not be placed in url on a get request.
thx.
Found something and its working why i didnt think of this before is beyond me
$("#searchForm").submit(function (event) {
if ($("#PriceMin").val() == "") { $("#PriceMin").prop("disabled", true); alert("isnull");}
});
i disable the input field if it is "" just before the form is sent.Thus the query string of "priceMin" is not sent because the element is disabled.
The reason why the address bar doesn't change is because when you make an AJAX request with javascript, this request is made in the background. The whole point of AJAX is to make requests without navigating away form the current page. If you change the url in the address bar that would trigger the entire page to be reloaded. So what you are trying to achieve is impossible. You could use the fragment portion of the url (the part that follows the #). You could modify this part of the url without causing the browser to navigate away. Take a look at the following article: http://ajax.rswebanalytics.com/seo-for-ajax/#!ajax-crawlable-urls
Thus you could have the following url:
http://example.com/Home/Text/#category=laptop
In order to manipulate the fragment portion of the url in javascript you could use the window.location.hash property. Bear in mind though that this part of the url is never sent to the server. It is only intended to be used on the client.
As far as your second question about the empty strings is concerned, there's no way to achieve that in pure HTML. You will have to write javascript. Basically here you will have to subscribe to the .submit event of the form and manually build the target url that you will redirect to and exclude parameters that have empty values. Then manually redirect to this url using the window.location.href property. Also don't forget to cancel the default action of the submit by returning false.
I have the following form
<form id="file_upload" action="/Upload/Save" method="POST" enctype="multipart/form-data">
<input type="text" id="txtProposalName" name="name" placeholder="Nome da Camiseta" />
<input type="text" id="txtProposalDesc" name="description" placeholder="Descrição da Camiseta"/>
<div class="fileupload-buttonbar">
<div class="progressbar fileupload-progressbar"></div>
<span class="fileinput-button">
Upload images
<input type="file" name="files[]" multiple />
</span>
</div>
<input type="hidden" id="imgID" name="imgID"/>
<input type="submit" id="postProposal"/>
Would call this action:
[HttpPost]
public JsonResult Save(string name, string description, string imgID)
{
return Json("a");
}
(This is the current implementation, it has no logic because I am still testing some things).
My problem is: when I click on my submit button, the action is called with the correct values, but when it returns, my browser redirects to /Upload/Save (which is the action URL).
Why is this happening? Is there any way to prevent it?
Thanks!
You can use an asynchronous call to your method (e.g. AJAX) to prevent the page from reloading.
You can use Ajax.BeginForm to prevent reload page.
As I can see you use full page reload with:
action="/Upload/Save"
Also you trying to post data to json action method in controller. You need all form submit make with jquery, most problems you will find with ajax file uploaders.
Added:
Also look at serialize() it will help you to collect all form input values.
Dont need to prevent it, just redirect the user in your server code .
I have the following mark up in an ASP.NET MVC view (this is a Twitter Bootstrap search box):
<form action="#Url.Action("Results", "Search")" method="post">
<input type="text" class="search-query" id="SearchTerm" name="SearchTerm" />
</form>
This code works as expected, but using a post here is causing problems.
How can I change this markup to pass the search query as a URL argument instead? I'm not really sure how to even approach this short of keeping the existing markup and then redirecting from the controller. I'm thinking there must be a more efficient way than that.
You should be able to change method="post" to method="get" and get the desired result. The form, with a get method setting, pushes the fields in the form to the querystring by its default behavior.
As a workaround, if the default behavior doesn't suit you, you could catch the submit event of the form, and do:
window.location = form.action + "?SearchTerm=" + document.getElementById("SearchTerm").value
Something like that, where form is a reference to the form element. You can build the link and redirect using javascript, which is a get request.
I have this form below which contains two checkboxes to sort some products:
<form id="FiltreExtraForm" action="" method="post" name="FiltreExtraForm">
<input id="ProductsDeliveryPrice" type="checkbox" value="1" name="data[Products][delivery_price]"/>
<input id="ProductsPicture" type="checkbox" value="1" name="data[Products][picture]"/>
</form>
After POST I do the filtering but I also want to add received parameters to URL E.g: /products/index/delivery_price:1/picture:0 . Is this possible. How can I do that?
Note: I don't want to use GET to send form info.
Sounds like you are looking to do a Post/Redirect/Get.
Here are two examples of doing this in CakePHP:
Searching on surname
Searching on multiple fields
The two main advantages of redirecting a POST to a GET request are:
Users don't get the "Do you want to resubmit?" dialog if they refresh
The resulting page/query can be bookmarked
In the action to which you post, you could simply prepare the GET url and then redirect to this url. The action for that url then does the filtering.
If I understand you correctly (and I'm not sure that I do), you can pass additional variables on the query string of the form's action quite easily. Conventionally, that might look like this:
<form id="FiltreExtraForm" action="/products/index?delivery_price=1&picture=0" method="post" name="FiltreExtraForm">
Using Cake, you should be able to do the same without the traditional query string if you'd rather (though the traditional method above will also work):
<form id="FiltreExtraForm" action="/products/index/delivery_price:1/picture:0" method="post" name="FiltreExtraForm">
I would recommend looking at the form helper or at least constructing the action URI using helpers, but this should get you what you're after.