In the html form given below, the user posts a value resid1, which is matched with the resid stored in the database.
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<form name="form1" method="post" action="honda.php","tomcat\webapps\blazeds\e2.html">
Now if you will see the action field in the form, i want to post this value of resid to two different forms. Is it possible. Nd secondly, honda.php is in the htdocs folder of the Apache webser thus the value is easily posted, but the e2.html file is stored in Tomcat Blazeds folder. Thus i am unable to post value in this html.
Please if any one can help me ASAP. This thing have stuck me from the last 2 days..
The way you are attempting this is not possible. A browser will only submit a form once, to the URL specified by the action attribute. This is a fundamental browser behaviour that cannot be changed.
However, it is possible to work around the basic behaviour. In all cases you're going to require some Javascript manipulation, so it will only work if the user has JS enabled.
The basic approach would be to handle the form in the onsubmit event and manipulate it so that multiple URLs could be requested. You could utilize Ajax to make multiple requests, or you could even dynamically package the form data into another form element on the page and submit it.
Ajax would be the way I would approach it. There are excellent Ajax tools available that would facilitate this, such as JQuery.
For example, you could do something like this (I'm using JQuery here):
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
function handleForm()
{
$.ajax({
url: 'honda.php',
data: $('#form1').serialize()
});
$.ajax({
url: 'tomcat\webapps\blazeds\e2.html',
data: $('#form1').serialize()
});
return false;
}
</script>
<form id="form1" onsubmit="return handleForm()" name="form1" method="post">
<!-- stuff -->
</form>
You could do something as described here.
Related
I'm totally new to RESTful API and html and was wondering if I could get some advice.
Basically, I've made an application with a restful api using RestX, see picture, that can succesfully retrieve info, like a list of strings with node addresses.
And I want to make a HTML page that looks roughly like this (mockup):
I'm totally unsure how to actually do this however. Also, I'm unsure of how to display, for example, the list of strings I've received. In the mockup, the list of registered nodes should dynamically be made from the list received from the application, for example.
I've made a sample HTML text file (from another overflow post), but that doesn't really do anything...
See code:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.get( "http://192.168.59.130:8080/api/#/ui/api-docs/#/operation/list/GET/___list___nodes", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I'm lost, can anybody help?
Currently you are not using the REST APIs, but the URLs to access Restx UI interface.
The first thing you should do is to update the URL you are using to something like: http://192.168.59.130:8080/api/list/nodes
You'll get back a list of entities (at least, that's what the name of the API method suggests) in json that you can use in your javascript to populate the HTML form.
I need to remotely control a solenoid with an Arduino, from about 2000 feet away. So far, it works: I designed a control circuit that fires based upon a logic-level signal from pin 9.
My problem: the initial Arduino code sent up a web page over ethernet each time the form was submitted, but if the user tried to toggle the state too quickly, the transmission was interrupted and the whole system puked. It was also slow to load.
My attempted solution: I created an HTML document on a local page to do what I need done, and indeed it does: I can control the Solenoid. However once the links which control the commands are submitted, there's no redirect back to the local control page, and after much Google-fu I can't seem to implement it in this way. Is this possible? Is this a good approach?
<HTML>
<HEAD>
<TITLE>Sensor-Cleaning Control</TITLE>
</HEAD>
<BODY>
<H1>Solenoid Remote Actuation</H1>
<hr />
<br />
Turn On Solenoid
Turn Off Solenoid<br />
<button type="button" onclick="location.href='http://192.168.0.88/?sol_on'">On</button>
<button type="button" onclick="location.href='http://192.168.0.88/?sol_off'">Off</button>
<button type="button" onclick="location.href='http://192.168.0.88/?toggle'">Toggle</button>
<br />
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</BODY>
</HTML>
So if the Arduino sees "sol_on" it turns the solenoid on; "sol_off" off, and you can guess what "toggle" does. I'm pretty comfortable coding, but I know nothing of javascript, CSS, or PHP. I'm not afraid of implementing those, it just needs to be clear for me to do so. Note that there's some redundancy in the code above, I left it so that I could test multiple approaches to the UI.
If I'm understanding you correctly, your best approach would probably be to use Ajax, where your web page uses an asynchronous Javascript call to do the toggling/on/off.
Effectively, you have the web page as shown, but instead of links to the Arduino "pages", clicking each link fires off an asynchronous request to the Arudino page, leaving your current page in the browser while still prodding the URL on the Arduino web server.
If you're not that familiar with Javascript, possibly a sensible approach would be to use jQuery, a Javascript library which insulates you somewhat from differences between browsers, and encapsulates things like Ajax requests quite nicely.
Here are some simple steps:
1) Download the latest production jQuery. I'm using 2.0.3 from here for this example.
2) Put it in the same directory as your web page, so we can include it easily.
3) Convert your web page to use Ajax with jQuery. (I've also converted it to something a little closer to the current web standard, HTML5):
<!DOCTYPE html>
<html>
<head>
<title>Sensor-Cleaning Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include jQuery so we can use its simple goodness -->
<script src="jquery-2.0.3.min.js"></script>
<script>
/* This function will be called by the onclick handlers of the buttons */
function solenoid(url) {
// Use jQuery's Ajax functionality to prod the given URL without
// reloading this page or visiting another one:
$.ajax(url);
}
</script>
</head>
<body>
<h1>Solenoid Remote Actuation</h1>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_on');">On</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_off');">Off</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?toggle');">Toggle</button>
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</body>
</html>
The main things to note are:
1) The inclusion of the jQuery library, so we can use its ajax() call and fire off http requests in the background with ease no matter which browser we're on.
2) I've replaced your existing onclick events with a call to a new function called solenoid, that takes a URL as a parameter.
3) The solenoid function, defined in the <script> at the top, takes the URL that was passed in and uses jQuery's ajax() call to poke the given URL. This happens in the "background", i.e. without any page (re)load.
From here, you could expand this in all sorts of ways. This code could, for example, read a short response from the Arduino and handle it in the background, too, perhaps indicating the current state of the solenoid.
(Given the simplicity of what I'm doing here, I'm sure this could be done in a more "lightweight" way in pure Javascript without jQuery, but that would have involved a chunk more slightly scary code in this example to ensure the Ajax stuff worked in many different browsers -- there's some browser inconsistency in how the underlying object (an XMLHttpRequest) used by Ajax is created. I figured for a Javascript beginner, simpler was probably better...)
Well, i don't know your Arduino's based http server, but it certainly shall reply all requests, either with an 200 http status, that means "OK" or with any other error message like 400, that means "Bad Request". While your web application is waiting for a response, you can block (or hide) the page (or some elements) so the user will be unable to start a click-frenzy and mess up everything while he should be waiting the server's (Arduino) response.
You can use an ajax call using JQuery, so you will be able to "do something" after calling the url with your "Arduino code", either in case of success or fail.
Please see the example below:
<html>
<head>
<script src="../scripts/jquery-2.0.3.min.js"></script>
<script>
function callArduinoCode(var code) {
jQuery.ajax({
type: "GET",
url: "http://192.168.0.88/?" + code,
data: dados,
beforeSend: function() {
// Hide links, show loading message...
$("#controls").css("display","none");
$("#loading").css("display","block");
},
success: function( data ){
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
},
error: function (xhr, ajaxOptions, thrownError){
alert("Failed, HTTP Status was " + xhr.status);
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
}
});
return false;
}
</script>
</head>
<body>
<div id="controls">
<!-- your links here -->
<a onClick="callArduinoCode('sol_on'); return false;">Turn Solenoid ON</a>
<a onClick="callArduinoCode('sol_off'); return false;">Turn Solenoid OFF</a>
</div>
<div id="loading" style="display:none;">
Loading, please wait...
</div>
</body>
</html>
You can get JQuery at jquery.com
Good Luck!
No need to add any library / framework to accomplish what you need. Even you can achieve it without javascript at all. Simply add an invisible IFRAME in your HTML file with name attribute set. In following example we'll use "Arduino" as the IFRAME's name, but you can use any valid element name you'd like.
<IFRAME name="Arduino" style="display:none"></IFRAME>
Next, add target attribute on your link element (the 'A' tags) with value specified as the IFRAME's name, i.e.:
Turn On Solenoid
When you click on the link, request sent to your Arduino and resulting response will be directed to the the invisible IFRAME without navigating away from currently viewed page.
For the button element, prefix location.href in onclick handler with the IFRAME's name:
<BUTTON onclick="Arduino.location.href='//192.168.0.88?sol_on';">On</BUTTON>
The CMIS specification says this about the HTTP response to a submitted HTML form:
In general, the response is not useful for an end-user.
Therefore, clients should redirect the response to a hidden HTML iframe.
The iframe’s onLoad event can be used as an operation status notification.
("client" above means a webpage in a browser)
I don't see how it is possible, in HTML, to "redirect the response to a hidden HTML iframe".
The form can not be inside the hidden iframe, as the form needs to be visible. And if the writers had meant to hide the iframe once the form has been submitted, the wording would have been different.
I wonder why they don't recommend ajax instead, but that is not the question. I want to follow their recommendation, or prove them that their recommendation makes no sense.
Can anyone give me an example of such a form that "redirects the response" to an iframe?
Or an example of what the specification was really trying to say?
Or is it just impossible to achieve?
Ajax only works properly if the application is hosted on the CMIS repository because of the same origin policy.
The hidden frame approach works even if the application is served from a different host.
Here is an example:
<script type="text/javascript">
function createCallback() {
...
}
</script>
<form action="..." method="POST" target="createResult">
...
</form>
<iframe name="createResult" style="display:none;" onload="createCallback()"></iframe>
Here is a complete example:
https://svn.apache.org/repos/asf/chemistry/opencmis/trunk/chemistry-opencmis-server/chemistry-opencmis-server-bindings-war/src/main/webapp/web/index.html
I use RichFaces to develop some web pages, basically I'd like to display a list of my data with DataTable. But my manage bean will take a long time to obtain resource data, which blocks the web page display.
My goal is to dynamically display them, First display the web page (maybe no data yet), then once my manage bean reads one new data, it displays this as a new row in my DataTable, any idea how can I do that? or maybe a similar example is appreciate.
Load the page then fetch data using JavaScrip via an Ajax call. Ajax is very easy to implement using jQuery.
jQuery Ajax Documentation
Example: Untested!! But its something like this..
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
// Run on page load
$(function() {
$.ajax({
url: "getMyData.html",
type: "GET"
}).success(function(data) {
// My data is in "data", if it is html then
$("#myDiv").html(data);
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="myDiv"></div>
</body>
I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.
What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');
theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>
<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)
Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.
This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.
The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.
You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.
There's 2 options:
Old school forms:
Person clicks submit and form data gets sent server side via GET or POST,
the page loads again and displays "Thanks for submitting"
New school javascript AJAX
Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"
Anything else is some hybrid of both these techniques.
I know you want to avoid anything other than html but this simple php code may help. You could use php within the page
fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');
Then in the original form page, add a php IF statement above the form code:
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}