Opening a popup window based on selected dropdown option - html

What I'm trying to do is create a simple form with a dropdown list and a submit button. Upon selecting an option from the dropdown list, the user clicks the submit button and a popup window opens that allows them to view more info about the option they selected.
Right now I simply have:
<form action="example.php" method="post" target="_blank">
<select size="7" name="identifier" style="width: 100%;">
<option>
Options....
</option>
</select>
</form>
Now this does 'work' as is in that when the user selects an option and presses submit, it opens a new window with the selected option post data passed along. However I would like it specifically to open a smaller popup window with a size I can define rather than a whole new window. I'm also aware target=_blank is deprecated so I'm wondering what would be the preferred way to achieve this now?

Here is the link that may be solve your problem (stackoverflow Link) : how to show popup if select "option" in "select" dropdown using javascript?

Try this
<form action="example.php" method="post" target='popup' onsubmit="window.open('','popup','width=700,height=400,left=200,top=200,scrollbars=1')">
Or add this code to your submit button :
onclick="window.open('','popup','width=700,height=400,left=200,top=200,scrollbars=1')"

onsubmit call a javascript function.
in that function get all the values you need to pass
e.g. var myelementval = document.getElementById('myelement')
then use
window.open('mywindow.php?myelement='+myelementval,"mypopupname","width=500,height=400,resizable=yes,top=100,left=200,scrollbars=yes"
.........

Related

Creating a button that redirects to another page in HTML

I have a drop down menu in HTML that has a list of all 50 states. Example:
<select>
<option value="AL">Alabama</option>
</select>
I am wanting to have a "Go" button next to it that redirects to a page with the selected state. Is this possible in HTML? How would I go about doing this?
I don't think this is possible. What you want to achieve requires an anchor tag on every option. I've tried that but only the option gets clicked.

"Submit" JSP in iFrame

I have a dropdown list, where a user's selection determines the inputs to display next.
For example, selecting birds will open a page where a user is asked to enter wingspan, beak type, feather type, or whatever.
Selecting fish will create a completely different page. This is all created dynamically through jsp, getting data from a textfile through Java. (please ignore bad coding)
How do I make this second jsp load in an iFrame on the same page, instead of redirecting to a new page?
I'd (ideally) like to be able to select different options from the dropdown, and see the input form change with each click of the submit button.
The user selects from the dropdown list, and clicks submit, which calls the jsp method / page.
Do this
<form action="demo_form.asp" method="get" target="frame">
<select name="selection">
<option value="fish">Fish</option>
<option value="bird">Bird</option>
</select>
<input type="submit" value="Submit">
</form>
<iframe name="frame"></iframe>
In the target give the name of the iframe as target,and the action will get executed in the iframe

How make certain field (search box) active when page loads

When a user loads my page, the first element to become active in the browser is one of my menu buttons.
I have a search box (form field) on my page that I want to be the first thing active.
What I mean by "active" is that when the user pushes the tab button, it cycles through all the elements on the site, right. And if users use tab on my site they have to cycle through all the menu buttons before coming to the search field.
Is there a way to say to the browser, "make this field the first active one on page load"?
So that when the page has loaded, the user can start typing in the search field right away.
Thank you.
You can use autofocus for that. Using javascript you can do
document.onload = function() {
document.getElementById("textField").focus();
}
OR
you can directly use it as follows
Search : <input type="text" name="search" autofocus><br>
You can read more about it here and can try it out here.
It will be best option for case
<input type="text" name="YourSearch" id="YourSearch" autofocus>

If an HTML form has two <input type="submit"> buttons, how do I know which got clicked?

Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)

HTML: What determines the 'move the focus to the next control when Enter is hit' behavior

A basic HTML question. Is it possible on an HTML page to declaratively achieve a behavior when pressing Enter in a textbox moves the focus to the next control? How do you achieve it and how do you turn it off? Or maybe the dynamic javascript part should be involved here?
For exaple, the following HTML in IE7 does not allow to move to the focus to the next textbox with enter:
<html>
<body>
<form>
<table>
<tr><td>
<input type="text" name="i1"/>
<td></tr>
<tr><td>
<input type="text" name="i2"/>
<td></tr>
</table>
</form>
</body>
</html>
I have a page where I need to get rid of this 'move the focus to the next control when Enter is pressed' behavior.
#Edit: The example above turns out to be incorrect. The control the focus jumps to when I press enter on the page I want to avoid this behavior on is actually of type submit. The strange thing is that this "submit" is a part of a Telerik tree control and is not a submit button but an arrow used to collapse and expand the tree structure.
So I assume the focus jumps to the next submit control which the Browser expects to be a normal submit button which is not true in my case.
So I suppose I should look for a Telerik pecific solution here.
In most browsers, pressing Enter when focused within a form will submit the form. If you need to change this behavior so that pressing Enter moves to the next textbox you will need to use javascript.
Try this: (courtesy of javascript.internet.com)
http://javascript.internet.com/forms/tab-key-emulation.html
<input type="text" name="i1" Tabindex="[order number]"/>
I usually lookup these things on:
http://start.gotapi.com/