So I have written this code for a form (search form) and it looks like this:
<form action="" method="get">
<select >
<option value="name">Client Name:</option>
<option value="email">Client Email:</option>
<option value="tnx_id">Transaction ID:</option>
<option value="amount">Amount:</option>
</select>
<input type="text" name="svalue" placeholder="Search"></input>
<input type="image" name="submit" src="img/search_btn.png"></input>
</form>
When user clicks Search I want the url to be formatted this way:
http://localhost/pp/index.php?search&name=haha
But instead I get:
http://localhost/pp/index.php?search=name&svalue=haha&submit.x=0&submit.y=0
I'm only having difficulties formating the url correctly because the rest of the
code is good, I cannot get rid of that &submit.x=0&submit.y=0 at the end of the
url too. Do you have any ideas guys?
Basically my desired url format gets the selected option (name, email, tnx_id, amount)
and assigns svalue's value to it.
I'd appreciated your help,
Thank you in advance,
Thanks.
That is how forms work. Each control gives a name=value pair in the submitted data.
You could hack it with JavaScript, but that becomes fragile. Give the <select> element a name and change the server side script so that it takes the two pieces of data as separate pieces of data.
I cannot get rid of that &submit.x=0&submit.y=0 at the end of the url too
Remove the name attribute from the image map so it won't be a successful control.
<input type="image" src="img/search_btn.png">
Other improvements you should make:
<input> is an empty element. It should not have an end tag. If you are writing XHTML then use the empty element syntax.
placeholder should not be used as a replacement for <label>
Add an alt attribute to the image map
Use JavaScript to create the URL. If you're using jQuery:
var url = 'http://localhost/pp/index.php?search&'
+ encodeURIComponent($('#id-of-your-select-element').val())
+ '='
+ encodeURIComponent($('#id-of-your-svalue-element').val());
Edit: As for getting rid of submit.x and submit.y, see #Quentin's answer.
in your php code you can add this:-
if(isset($_GET['name']))
{
$searchString="&cs=".$_GET['name'];
}
then use this:
http://localhost/pp/index.php?".$searchString."/
i think this will help you to get the right thing. if you want to use pagination with that,i have a code for you which i used before and it works great. just try it once!
Related
So I'm trying to submit a page to itself while retaining the current query string of the page.
So the page is sb.local/sb/cat.php?brandcode=JM&t=cat_items I pull off the query string and stick it back into the html form to preserve the parameters. This is the resulting form:
<form id="brand-select" method="get" action="?brandcode=JM&t=cat_items" name="brand-select">
Brand:
<select id="brandcode" style="width:207px" tabindex="3" name="brandcode" required="">
<option value=""></option>
<option class="brand-option" value="AX" data-brandid="110"> Aetrex </option>
<option class="brand-option" value="AL" data-brandid="12"> Alden </option>
<option class="brand-option" value="ETC" data-brandid="11"> Etc </option>
</select>
<input type="submit" value="go">
</form>
When I submit the form by choosing the dropdown for Aetrex (value AX), however, it goes to a url of:
sb.local/sb/cat.php?brandcode=AX
in other words, it cuts out the "t=cat_items" that is in the action. It also cuts out the "brandcode=JM" but I would almost expect that since they're duplicates.
That's not what I expected, I expected that if there is a query string in the action attribute, it would append form values to that query string (e.g. sb.local/sb/cat.php?brandcode=JM&t=cat_items&brandcode=AX. Instead it seems to be replacing the query string entirely with only those elements that are in the form.
Is the form action attribute not usable for storing query parameters, only more basic url info?
Edit: Note that I can work around this by parsing every parameter and then putting each parameter into its own hidden field manually, except for any parameters that I want to allow to change, I was just hoping that there was some kind of simpler way.
I tested with a non-conflicting query string and that was replaced in whole even when there wasn't a conflict (in Firefox), so based on that it seems that query strings are useless in the action attribute of get forms? Or am I missing something.
I know this is an old question, but the solution is actually pretty simple (and neat!).
All you have to do is sending the querystring with hidden input fields in the format name="key" and value="value".
?brandcode=JM&t=cat_items would "translate" into:
<input type="hidden" name="brandcode" value="JM" />
<input type="hidden" name="t" value="cat_items" />
Completely remove the querystring from your action.
Change your code to:
<div>
<form action="?brandcode=&t=" method="get">
....
</form>
You can use "POST" method instead of "GET" method for form submission, if the method doesn't matter.
I want to fill an element with data using jQuery.
Unfortunately, the element stays blank. Until now, i used a workaround and used a textarea instead of input (which is working for some reason).
I did not only try
$('#input').val("Text") ;
but also
$('#input').text("text") ;
$('#input').attr("value", "Text") ;
I do not understand this behaviour, outside of my project it works just fine.
Maybe an overlook over the complete code could help. (Excuse the codemess)
Also i've got a small sidequestion:
I'm using async: false to make the whole thing work, if i remove it, nothing will be shown. But as i know that this is deprectaed, what alternatives do i have?
Thank you very much.
there is no element with ID of input in your HTML, i think you want to change the value of input elements, change this:
$('#input').val("Text") ; // this is an ID selector
to
$('input').val("Text") ;
#input searches for an element with id input. I did not see any on the source code.
As you want to change text of a single input field , give it an unique id. Like id='sampleText' then change its value like ,
$("#sampleText").val("Your text");
Your code has some errors please check.
<form id="editForm" method="POST" action="updatedata.php">
**<input type="text" id="editHeading" name="editHeading" /></textarea><br>**
<textarea id="editAuthor" name="editAuthor" /></textarea><br>
<textarea id="editTag" name="editTag" type="text" /></textarea><br>
<textarea id="editarea" name="editarea"></textarea><br>
<input id="id" name="id">
<input id="submitEditForm" name="submitEditForm" type="submit" /><br>
</form>
FYI some general concepts
$('input').val('foo'); //updates with value foo for all input elements
$('#input').val('foo'); //updates with value foo an input element with id #input
$('span#a').val('foo'); //wont work ,here we have to use .html
$('span#a').html('foo'); //<span>foo</span>
Hell...
i found it. It's not like the value isn't be inserted, it's just not visible O_o
MY Chrome does not show the word "test" inside the input when it is hidden by jQuery before.
With FF, everything works just fine.
I have a search form on my site,
and I want to pass the text in the form to the URL,
like: mysite.com/search.php?q=apples (if search word was apples).
I figure that way people can bookmark their searches.
One solution I thought would be to catch the searchword in search.php and then reload into a new made URL. But it's not very elegant to reload like that. So how can I do it - I mean, how is it normally done? Do I need to use jQuery?
Clarification: I know how to get the vars from the URL in php. What I need is to control the URL that will be opened when the user presses SUBMIT, and the URL needs to contain the user's search word! Just like Google or DuckDuckGo, I put "apples" and the URL becomes ...?q=apples. But - how?! (Then I'll pick that up in the search.php, of course, but I know how to do that.) This is what I have now:
<div id="topnav">
<form action="search.php" method="post">
<input name="searchword" type="text">
<input type="submit">
</form>
Thank you so much.
Upon reading the clarification. What you need is a search form that submits to your search.php for example:
<form action="search.php" method="get">
<input type="text" value="search word" name="q" />
<input type="submit" value="submit" />
</form>
This will pass whatever value entered in the input named q to the search.php script.
If you post a HTML form which includes a text field with name 'q' and value 'apples' then the URL you want is automatically created by the browser. You definitely don't need JQuery for that.
how about using the POST-Redirect-GET pattern? [http://en.wikipedia.org/wiki/Post/Redirect/Get] also http://blog.andreloker.de/post/2008/06/Post-Redirect-Get.aspx
This would allow you to keep the url in the browser:
yoursite.com/search.php?q=apples
Alternatively, you can use javascript to set the location.hash of the url in the browser w/ the query information after the postback; I suspect this is actually what Google does.
eg,
yoursite.com/search.php#apples
So the form action would be search.php, the field would be called q and the method would be Get?
You should be able to handle all this from the html form if I'm understanding what it is you're trying to achieve.
if you have a form then must have declared form methoed POST/GET
in you search.php you can simply do this $_POST['name of the input field'] to get the word string,
and if you want to pass variable in url then you need to make a link through Link
I have found an open source PHP script that uses a select menu to choose the language.
In the code session makes use of a loop to fill in the select menu, as above...
$la = 0;
foreach($trans['languages'] as $short=>$langname) {
$params['LANGSEL'][$la]['LANG_SHORT'] = $short;
$params['LANGSEL'][$la]['LANG_LONG'] = $langname;
$la++;
}
In the php template creates the select menu like that...
<td><select class="select" name="lang"><#FOR LANGSEL#>
<option value="<#LANG_SHORT#>"><#LANG_LONG#></option>
<#/FOR LANGSEL#></select></td>
So this code works fine but i find it kinda ugly so i am trying to make an image input instead
So i thought something like that would work..
<input type="image" name="lang" value="http://localhost/index.php?lang=en" src=" <#IMAGES_DIRECTORY#>/english.png"></td>
<input type="image" name="lang" value="http://localhost/index.php?lang=it" src=" <#IMAGES_DIRECTORY#>/italian.png"></td>
But nothing changes, the page always shows up in italian that is the default language..
Thanks in advance from a newbie that is struggling to learn some html and php.
The value of your name field should be <#LANG_SHORT#>. You don't say what it looks like after being processed but I'm pretty sure it's something like en or it. However, you provide a URL. You also prepend several white spaces to the image's URL.
This will probably work:
<input type="image" name="lang" value="<#LANG_SHORT#>" src="<#IMAGES_DIRECTORY#>/english.png"></td>
Remember to test it in Internet Explorer. It's traditionally had several problem with <input type="image"> elements.
The problem here is that you have two images with different names, whereas you need to only have one form element, called name, whose value is the correct <#LANG_SHORT#> string. In this regard, select and radio form elements are perfectly suited to the job, whereas inputs are not.
It also seems unlikely to me that the form element really has a value of http://localhost/index.php?lang=en. Isn't that merely the URL that results from changing the language? It seems more likely that the proper value for your form fields is just en/it.
Ultimately, I reckon you're going to need a hidden form field, and some Javascript on your images to set that field's value when required. And be aware that the usability/accessibility of your site just went from [potentially] high to [definitely] very low.
$('#images_upload_add').click(function(){
$('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());
});
using this code to append file input's does not upload the file in firefox.
also
$('#image_server_add input[type=button]').click(function(){
var select = $(this).siblings('select').find(':selected');
if(select.val()){
$('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
}
})
also does not upload the values to the $_POST
I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit
Why wouldn't these examples correctly upload the form values?
Bottom line the markup on the page was mangled.
The form was in a table based layout, not by my choice, and the form declaration was inside a tr.
I moved the form declaration to a parent td of the form inputs and now it works.
This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.
I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.
Any more notes/conjectures about my findings would be appreciated.
Are you having the same problem if you create a new input rather than cloning an existing one?
Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?
What is the purpose of adding the markup of the selected option to a hidden input?
For fun, have you tried using .clone(true)?
Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.
You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.
Perhaps I'm barking up the wrong tree?
Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.
Then when the button is clicked, populate that element with the right value.
I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.
I got to this section from google searching a similar problem.
To me, I was able to fix it by taking a step back at the problem -
in a example form:
<table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>
This will work in Internet explorer for some reason, but it is actually invalid html.
Move the form tags to outside the table, like so:
<form method="post">
<table>
<tr>some content <input type="text" name="test"> </tr>
</table>
</form>
And it will then work.
The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.