I have a form, and within it several input and select elements. My problem is that I can use tab to move between input elements, but not the select drop down menu. I tried tabindex="2" attribute, but it didn't affect anything.
Is there way to do this?
Here is a sample of my code. If it changes anything I'm in php, but I'm not able to get it to tab in html ether.
<table>
<tr>
<td>
<select>
<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select></td><td>
<input type="text" name="location" size=17 maxlength=22/>
</td><td>
<input type="text" name="date" size=12 maxlength=10/>
</td>
</tr>
</table>
I hope I posted this right I'm have a hard time with the code.
On Firefox, for example, the select element on your real life sample page http://cafe.bg14.com/purchases.php can be tabbed to, it’s just late in the tabbing order. The reason is that you are setting tabindex attribute for some form fields but not all. Those without the attribute will come last.
Either remove all tabindex attributes (if the natural tabbing order, by order in HTML markup, is OK), or use them for all fields and other items that should participate in tabbing.
You should also fix the markup, using HTML W3C validator, after deciding which version of HTML you wish to use. The page now declares XHTML 1.0 but uses unquoted attribute values and HTML5 features. This makes it more difficult to see that there are serious markup errors, like th elements not wrapped inside a tr element. (Breaking the HTML table model may have an impact on both rendering and functionality.)
Try below code i have tested it and its working too.
I answering it based on what you are asking to do in your question.
<form action="#" method="post">
<p><input type="text" name="first" tabindex="10" /></p>
<p><input type="text" name="second" tabindex="20" /></p>
<p>
<select name="third" tabindex="30">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
</p>
<p>
<select name="fourth" tabindex="40">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
</p>
<p><input type="text" name="fifth" tabindex="50" /></p>
<input type="submit" value="Submit" tabindex="100" />
</form>
Related
i would like to make form for uploading multiple data with HTML and PHP into database (if needed i can use JS aswell). I want user to be able to fill in post name, add image (or more) and some text.
I found a lot of info how to make multiple input (for example: 3 pictures with 1 submit button) but i didnt find anything about how can i do what i want.
The reason can be my english skills as i believe im unable to ask google the right question.
I would really appreciate any info, even if it's only the right wordt to put on google or some online blog/tutorial on how to do it.
(if i wasnt clear enough, i can add picture of what i want to make)
HTML form:
Title: <input type="text" name="title"><br>
Category (you can select more): <select name="category" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> <br>
Description:<textarea rows="4" cols="50"> Add your description here. </textarea> <br>
Image(s): <input type="file" name="images" accept="image/*">
<br>
<input type="submit" value="Submit">
I have a free form search that I moved from my main content to my header. Once I moved the form into the header the text inside of it stopped showing. The placeholder works but when you begin typing it is completely blank. The search and the functionality work perfectly, I just cannot see what I am typing. Any ideas?
<form class="search" action="/all-results/" method="get">
<fieldset>
<span class="text"><input name="searchProducts" value="All" type="hidden">
<input type="hidden" name="search_selection" value="all">
<input name="byString" id="s" type="text" value="" placeholder="<?php echo __('Search','Avada'); ?>" /></span>
</fieldset>
<form name="input" action="/all-results/" method="get">
<input type="submit" id="search_button" value="Search">
</form>
</form>
Your HTML is invalid. You can not nest a <form> element inside another <form>. Messing up forms and tables are two of the best ways to produces peculiar browser behaviour, so my guess is that this is your problem.
If you correct your HTML (validate it!) and the problem persists, then post a minimal HTML page with CSS so that there is something for us to debug.
I have a form kinda like this:
<form action="#" method="post">
<select name="phase">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div data-phase="1">
<input type="text" name="info" />
</div>
<div data-phase="2">
<input type="text" name="info" />
</div>
<div data-phase="3">
<input type="text" name="info" />
</div>
</form>
By using JQuery, at any time, only one of the DIVs is displayed, corresponding to the value in the select box.
The issue is that the value POSTed is overridden by the last text input, since they all have the same name. Is there away around this WITHOUT renaming the inputs?
Yes -- before submission, dynamically remove the unwanted div sections. You could do this by hooking in using jQuery's submit() function callback.
To remove the elements, you could use jQuery's remove() function, for example. It would be easier with div ids, but you could also use indexes to do it.
You can dynamically rename the inputs with javascript before submitting the form. Or you could even remove the disabled inputs from the DOM just before submission.
For example, something like this may work:
$(input[name="info"]).filter(function() {
return $(this).css('display') == "none";
}).remove();
So, select all the inputs named "info" that have display: none and remove them.
I so sorry to say this: you'll have to rename the name of each div. something like this
name="info1" name="info2" name="info3"
you only use the same name for the name attribute when you dealing with radio input type.
I'm new to html, but I need to make this block of code functional:
<form method="get" action="http://cat.opal-libraries.org/search~S9/X">
<p>
<select name="searchtype">
<option value="X" selected="selected">Keyword</option>
<option value="t">Title</option>
<option value="a">Author</option>
<option value="d">Subject</option>
</select>
<input class="textfield" name=" " style="width: 200px;" type="text">
<input class="button" value="Search" type="submit">
I want to be able to select say a Title, and enter in a title, and hit search, and have it work like i entered it in this page
http://cat.opal-libraries.org/search/t
I would appreciate any suggestions on doing this!
Sorry for the non-answer, but as I mentioned, the answer to your question would be too long to be suited to Stack Overflow.
I suggest you get your hands dirty by following a PHP tutorial like this one.
As a side note, your HTML is invalid. You opened <form> and <p> tags on lines 1 and 2, and didn't close them. Semantically, it's a little strange placing those form elements in a paragraph. That's not really what a paragraph does.
Question is very broad as there are many ways to approach it. Here is a simple edit of your code that makes it work if you want to search by title:
<form method="get" action="http://cat.opal-libraries.org/search/t">
<input class="textfield" name="SEARCH" style="width: 200px;" type="text">
<input class="button" value="Search" type="submit">
</form>
What I did was fix your URL and give a name to the input. You probably want to read up on how <form method="get" works and then you can probably figure out how to search by different fields.
Updated to include full code. It'd be good if you read up on these items to find out how/why it works. Basically when they choose a new search type, you need to change the action of the form (that is the piece you were missing). I also added the "searchscope" field and set it to 28 since their website was doing that. I don't know what that does.
This assumes you are referencing jQuery. Related documentation jQuery attr() and jQuery change().
<form id="searchForm" method="get" action="http://cat.opal-libraries.org/search/X">
<select id="searchType">
<option value="X" selected="selected">Keyword</option>
<option value="t">Title</option>
<option value="a">Author</option>
<option value="d">Subject</option>
</select>
<input class="textfield" name="SEARCH" style="width: 200px;" type="text">
<input name="searchscope" type="hidden" value="28">
<input class="button" value="Search" type="submit">
</form>
<script>
$("#searchType").change(function () {
var newPath ="http://cat.opal-libraries.org/search/" + $("#searchType").val();
$("#searchForm").attr("action", newPath);
});
</script>
It looks like the search engine you're referencing uses a separate endpoint for each "searchtype," which actually makes this relatively easy to do with Javascript and a couple changes to your form.
Change the name attribute on the <select> to an id instead, so that it isn't actually sent to the search engine.
Change the name attribute of the text field to "SEARCH" so that it will be sent and recognized as the search string.
Add an on-change listener to the sel which modifies the action attribute of the form as appropriate. If you're using JQuery, that might look something like this:
var base = "http://cat.opal-libraries.org/search/";
$("#searchtype").change(function() {
$(that).closest("form").attr("action", base + $(that).val());
});
I am trying to create a search form with php and mysql and do a pagination
so i have a form that looks like this:
<form action="search_results.php" method="post">
<select name="cat" id="cat">
<option>Select Category</option>
<?php
foreach($categories as $category) {
echo "<option value=\"{$category -> name}\">{$category -> name}</option>";
}
?>
</select>
<select name="sub-cat" id="sub-cat">
<option>Select Sub Category</option>
</select>
<label>Price Range</label>
<input type="text" name="from" placeholder="From" />
<input type="text" name="to" placeholder="To" />
<input type="submit" value="" name="submit" />
</form>
my problem is that i get the first page in the search_result.php
and when i try to go to the second page the $_POST['submit'] wouldn't be set because it didn't get any submit
anybody has an idea how to solve this issue
Thanks in advance.
You should probably use GET in this case for the form and for the subsequent pagination links for the very reason that you specified.
POST is better used as a one off action where GET is a request for resources which can be filtered and hacked.
search_results.php?cat=1&sub-cat=2&page=2
search_results.php?cat=1&sub-cat=2&page=3
search_results.php?cat=1&sub-cat=2&page=4
search_results.php?cat=1&sub-cat=2&page=5
The easiest way would be to generate "next" and "previous" URLs that have the search information in the query string, and then have the receiving page read them from $_GET instead of $_POST. The $_GET array works exactly like the $_POST array, just for variables that were passed in the URL.
Another option would be to create a form where the search information is present in hidden fields, and use javascript to cause the "next" and "previous" links to change the value for the page to get, and then submit the form. This would allow you to use the exact same POST-based code you're using now, though it prevents users from bookmarking search pages and may have other unintended effects.