loading graphs with a form on the same HTML page - html

I have an HTML page where, using a form, I pass a variable to a PHP page which generates a graph.
The graph is loaded with JpGraph, a powerful tool that creates img.
Given the following form, I load four different graphs passing four different values.
As you can see, the graphs are redirected to new tabs in the browser (target="_blank"):
<form method="POST" action="graph.php" target="_blank">
<select name="eti">
<option value="04" selected> graph with input value 4
<option value="06"> graph with input value 6
<option value="08"> graph with input value 8
<option value="11"> graph with input value 11
</select>
<input type="submit" name="tag" value="load graph" />
</form>
I wonder if it is possible to dynamically load the four graphs on the same HTML page, right below the form (instead of redirecting them to different tabs).
Do I need Javascript to do that? Any tips are welcome.

I found a way using iframe:
<form class="forms" method="POST" action="graph.php" target="iframe">
<select name="eti">
<option value="" selected> - scegli un tag -
<option value="04"> tag 4
<option value="06"> tag 6
<option value="08"> tag 8
<option value="10"> tag 10
</select>
<input type="submit" name="tag" value="load graph" />
</form>
<div class="embed-container">
<iframe name="iframe" width="400" height="350" frameborder="0" allowfullscreen>
<img src="graph.php" />
</iframe>
</div>
In addition to this, some CSS formatting was needed.

Related

Why does the html input with type "text" is getting auto refresh everytime user is going to write on it

I'm having issues when trying to type in the input field of the HTML form is getting autorefresh as soon as I try to write on it, it is occurring just in phones link of the page: https://cheerful-cranachan-2e938c.netlify.app/?prefijos=%2B55&celular=12312#
I think most likely is regarding a slider interval of images I have on the page but I don't want to take it off.
<form action="#">
<label for="prefijos"></label>
<select name="prefijos" id="prefijos">
<option value="+57">+57</option>
<option value="+58">+58</option>
<option value="+55">+55</option>
<option value="+59">+59</option>
<input class="phone" type="text" name="celular" placeholder="Celular">
</select>
<button class="btn btn-form">Enviar</button>
</form>

Simple HTML form to pass values to URL

I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.

AngularDart - Use Form Action

I am trying to use a form action attribute in AngularDart to redirect to the specified url. In plain html I would do something like this:
<form action="http://localhost:8082" method="GET">
<select name="q">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="9">9</option>
</select>
<input type="Submit" value="Guess">
</form>
How would I implement this functionality with AngularDart?
Thanks in advance
In Angular you would instead do the request in code, because form action="..." would reload the application or even another page which usually is not what you want in a single page application (SPA):
<form (ngSubmit)="onSubmit()"
and then post the form in Dart code like shown in the question in Dart: AJAX form submit
I haven't done this myself in years and don't have a full example, but it should get you going.

What is the purpose of an extra datalist tag inside input-list tag?

Consider the following html code
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
There are a variety of input elements for different specific purposes. For having an optional data-list with the text we replace <input type="text"> with <input list="value">. Now when <input list> tag is written, it is obvious that we are having a data-list. Then why do we need to mention an extra <datalist> tag for encapsulating the option-values? Why haven't all the features of data-list tag been added to input-list tag?
I'm not sure whether I understand the question correctly, but I think the <datalist> as you say is needed because you can add parameters like id=' '. In that case you can later do things with that certain datalist using JavaScript. e.g. using getElementId. Let me know if I answered your question.

Multiple labels and select elements but one does not display

Apologies for this but I've obviously been staring at my monitor too long...
When I run the following code in jsfiddle then only the first label/select and last label/select elements are displayed but not the middle one and I cannot see why
<body>
<form id="form1" runat="server">
<label id="a1" >City</label>
<select id="cityDropDownList" />
<label id="a2" >Property</label>
<select id="propertyDropDownList" />
<label id="a3" >Room Type</label>
<select id="roomTypeDropDownList" />
</form>
</body>
Thank you in advance.
Wrong using SELECT TAG
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Becuse of you didn't close select tag, next tags were displayed improperly.
You asked for why it doesn't select the middle one.
Actually the selector of jquery works as it parsed html by tag.
It works for the first and third as it matches the "first and second" tag as single HTML SELECT TAG AS THERE IS NOT ENDING TAG for first tag. So third SELECT also works ... and fourth tag WILL not work :)
So write like this:
<select id="first_select"></select>
<select id="second_select"></select>