Some time ago I created a simple Cocoa (OSX) app with 5 buttons allowing the user to vote for one of 5 options. When a button is clicked, the app gives some feedback about what button is clicked, thanks the user for his/her vote and goes back to the initial state to allow for the next voter. The votes were written to a simple text file to be retrieved after all the votes were cast. Very simple but OK for its purposes (a fancy way to vote for a class representative at my daughters school).
Now I'm asked to develop the same system for a web browser using html5. The school wants the setup to run on more than one computer at the same time. So we have a local server and two or three computers connected to it. The data from the votes needs to be written to the server.
Can someone point me in the right direction of an example that already does this? I found some voting systems but they all work with radio buttons or checkboxes, I need 5 large graphics (animated if possible) on an (also animated) background. I assume it's all very simple to the seasoned HTML5 editor, but I'm a beginner.
Okay, you mentioned you are a 'beginner' (FYI, I'm not a professional developer either), but I assume you know what forms are and how they work. The below is super-simple, I won't even use AJAX. (Explanation in comments.)
The code is going to be in one file. You mentioned PHP, so I assume you can use that. It's what I am using below:
<?
if (isset($_POST['vote'])) { // Check if there is a vote POSTed to our page
// Store the vote. I don't know how you did it the previous time, I'm just going to write it to a text file
$file = fopen("votes.txt", "w");
fwrite($file, $_POST['vote']);
fclose($file);
}
?>
<!-- the voting page -->
<HTML>
<HEAD>
<title>Vote</title>
</HEAD>
<BODY>
<!-- Create a form to be able to send the vote to the server in the simplest way, but don't display it -->
<form action="thispage.html" method="post" style="display:none;">
<!-- I don't know what possible values there are. I'll just take 'foo' and 'bar'. Of course you can add more. -->
<input type="radio" name="vote" value="foo" />
<input type="radio" name="vote" value="bar" />
</form>
<!-- The images representing the (invisible) radio button -->
<!-- I use the data-value attribute to store to which radio button this image corresponds -->
<img src="path/to/foo/image" data-value="foo" />Vote FOO<br />
<img src="path/to/bar/image" data-value="bar" />Vote BAR<br />
<!-- Import jQuery for the sake of simplicity. -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- The trickiest part. The script. -->
<script>
$("img").click(function() {
var value = $(this).data('value'); // Get the value
$("input[value='" + value + "']").click();// Click the corresponding radio button
$("form").submit(); // Submit the form.
});
</script>
</BODY>
</HTML>
NOT TESTED.
Related
I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
I am new to html and webdesign so please excuse any 'stupid' question ...
Similar to the <input type='file' ... field is there an easy way to let the user browse for an url of a webpage?
Currently I display a text field where the user has to enter or paste an url.
But it would maybe be nicer if he could browse the web inside a dialog and when hitting [OK] button the current url is copied automatically into the input field.
Is there any/Which way to go?
You should use a simple text input field.
Your client is already using a browser and can browse web in it, it is trivial for them to copy and paste the link from the navigation bar. It would severely hinder their experience if they had to use a custom-made browser inside a dialog.
This isn't possible with JavaScript for security issues. But there is a workaround if you must have this feature in your app, you'll need to mix flash and javascript together.
Here is an example of a working copy:
<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
The David Walsh Blog is the best blog around! MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>
The above HTML features a form element with the ID "box-content" and a button with the ID "copy". Both of those element IDs will come into play with ZeroClipboard.
The ZeroClipboard JavaScript
//set path
ZeroClipboard.setMoviePath('http://davidwalsh.name/demo/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
I just wanted to know how I can create a button that can take a person to multiple websites in a random order when it is clicked each time. I plan on using this button for a toolbar that I'm planning to create, and the outline that is provided for the HTML component looks like this:
<html>
<head>
<!--
Uncomment out the below script reference as needed. For more information on using the API, please consult http://www.conduit.com/Developers/overview.aspx
<script language="JavaScript" src="http://api.conduit.com/BrowserCompApi.js"></script>
-->
<style type= "text/css">
<!--
BODY {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;
width:100%;height:100%;overflow:hidden;background-color:threedface;}
-->
</style>
</head>
<body>
<!-- ENTER YOUR HTML HERE -->
</body>
</html>
Is there any way that I can do this by using this outline? Thanks in advance.
As suggested by others, simply make a button click call a function that picks a random site from an array. Here is an explanation on how to pick a random element from a Javascript array.
Example implementation:
<script type="text/javascript">
var websites = ["http://google.com", "http://reddit.com", "http://stackoverflow.com"];
function randomWebsite() {
var website = websites[Math.floor(Math.random()*websites.length)];
window.location = website;
}
</script>
<button type="button" onclick="randomWebsite();">Random website</button>
I'm not going to write the script for you but you'd want to use javascript to do this. Use the random function and assign your website urls to an appropriate number.
Example:
if you had three total websites then you'd do the random function and assign 0-.33 website 1, .34 - .66 website2, and .67 - 1 website 3.
You need Javascript for that.
You can have a list of websites.
You can get the website you will go to, when the button is clicked, by using the random function in javascript.
Here is the example when using an array, Getting a random value from a JavaScript array
Hope it helps.
We shouldn't give you any code, as you didn't provide anything. But your algorithm should follow what I mentioned.
I think you need javascript to do this,
Take a look on this page maybe this can help you
http://ozirock.hubpages.com/hub/How-to-make-a-Random-Page-button-for-your-website
I am building a faceted search system that has inputs in a sidebar (the facets are check boxes), and an input in the header of the page (the main query box). All of these inputs are submitted simultaneously when the user submits a search.
The only way I can think of to make this work is to wrap the entire page in an HTML form tag. Something like the following pseudo-html:
<form>
<div id='header'>
<logo/>
<input id='q'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar'>
<div id='sidebar-facets-subsection'>
<input id='facet1'/>
<input id='facet2'/>
<input id='facet3'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar-form-subsection'>
<form id='unrelated-form'>
<input id='unrelated-input-1'/>
<input id='unrelated-input-2'/>
</form>
</div>
</div>
<!-- a bunch more stuff -->
</form>
This would work, except for three things:
I need to use other forms in the page, as I've indicated above.
I use different django templates to generate the header and the sidebar, making the templates have dependencies on each other.
It's a real mess since the sidebar is in reality about 100 lines, not three.
Is there a more clever way of doing this that I'm not aware of, or is creating huge HTML forms the norm? In circumstances like this, is it better to use Javascript to somehow generate the input entries in a more normal form? Or is that the only option?
Any creative solutions or ideas?
You can make it work with Javascript without sacrifying accesibility
Put all the checkboxes in the header and wrap them in div
Set up and empty but clean side bar
Using Javascript, move you checkboxes from the header into the side bar
Attach a callback to the form.submit event, and when the user submit the form, cancel the event then, take the data from the search field and the checkboxes and send it as an Ajax POST request.
Using a framework like jQuery, it's a 15 minutes job.
If the user has JS enable, the form will post the request and everything will work. If the user doesn't have javascript enable, the checkboxes will be in the header and so they will work, at just the price of a slightly less elegant design.
But people with Javascript disable are used to design changes so it's ok.
Use javascript to populate a hidden field with a list of this checkboxes name=value pairs on form submit and treat this in serverside code, spliting the string into an array, etc.
Please note that this is not a good aprouch, since you loose accecibility to those with javascript disabled. The form tag is the only accessible way of doing so.
You can try to change the layout, if you can, swaping the checkboxes with links of buttons that filters the data, almost the way most ecommerce sites do out there.
I believe you have two options:
1.) a page wide form element. All "submit" buttons submit to the same form and the server-side script processes the form for all filled elements. By page wide, I'm not being literal... The related inputs all in the same form tag. Other forms are placed in other form tags.
2.) multiple forms, with a client side script which populates hidden form fields with the data from the other form before submission.
1 requires more work, but 2 may not work for every visitor.
Do consider the fact that, just because you have one form container, you don't have to necessarily display everything together for the user. Encapsulate inputs in divs and position them according to your will. It may not be easy, but it's definitely possible.
I'm not an expert but i know a little about HTML forms, here is my problem
i want to create a simple html page with form for my customers to enter a gps values to maps.google.com and get back the result page embedded in the same html
here is the exact format of my string
as an example : 32 06 12.66N, 20 12 22.65E notes that there is spaces between values
that should be post to ( maps.google.com/?q=32 06 12.66N, 20 12 22.65E ) and take the result page and embed it back in the same html page
i want to create a from with separated input fields for every value (drop down menu for the "N" "W" and "S" "E")
would you plz tell me what is exactly the html code for that , appreciate any help guys
You'll need to combine multiple elements into one form element. Use a hidden and some javascript to populate it before submitting.
Something along these lines
<form id="myForm" method="post" action="http://maps.google.com">
<input id="q" type="hidden" name="q" />
<!-- all your other inputs -->
</form>
Then some javascript:
<script type="text/javascript">
function Bind()
{
// bind FillQ to the submit event of the form
}
function FillQ()
{
var q = document.getElementById("q");
q.value = ... // the combination of your other form fields
}
Bind();
</script>
You need to do some scripting to achieve this. Either server side or client side. Consider either hiring someone out or doing some research and learning some coding. I'd recommend your local junior college, or a free online web programming course.
If you have a specific problem with your implementation, post your question here and we will be happy to help, don't expect us to do all the work for you though ;)
Here are some hints to get you started:
Use javascript to collect the drop down fields, and create the google maps url string.
You can search google maps developer site to find code on embending this into your page.