How to update html page for all viewers? - javascript

Basically I want to update a page with the name of the last person to submit a form. I have the following code but I can only get it to update on one device. When the page is viewed form another device it doesn't have the updated name.
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();"/>
</form>
<p id="last"></p>
<script>
function updateTable(){
document.getElementById("last").innerHTML =document.forms['leds'].elements[3].value;
alert(document.forms['leds'].elements[3].value+", You are about to change the Lights! Beware that there is about a 30 second delay on the live stream.");
}
</script>
</html>

When you use javascript like this (to set a value for an element, for example) you are only changing the value on the one workstation viewing the page.
You would need some kind of datastore on the server that the web browser can push data to and retrieve data from. For example, this could be in-memory on the server (short-term and volatile) or a database management system (long term persistence).

Related

refresh external website with new form data provide with href

Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing
Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.

Change json file (update) from HTML form

I have a JSON file and I want to change its properties through an HTML form:
<h1>product detail</h1>
<form>
Name:<br>
<input id="prod-name" type="text" name="name" readonly><br>
Number:<br>
<input id="prod-number" type="text" name="number" readonly>
<br>
<textarea id="prod-desc" name="description" cols="100" rows="10" readonly>description</textarea>
<br>
<textarea id="prod-img" name="images" cols="100" rows="10" readonly>images</textarea>
<br>
</form>
<button id="save-changes">SAVE</button>
I already retrieved the data from a JSON file with jQuery and AJAX but now I need to save it IN A FILE (not local storage)
$('#save-changes').on('click', function () {
json[index].name = $("#prod-name").val();
json[index].number = $("#prod-number").val();
json[index].description = $("#prod-desc").val();
});
So basically i want to change name, number and description in my JSON file
Ok so based on your comments:
I think there are two ways to go about it. One is editing a javascript object and sending it back to the server. The second (which I find more simple) is to simply send back the form as it is edited. Both would require the item has some sort of unique id which is not editable, so that you can keep track of what it is you are actually updating in the server database.
so just make the form functional (simplified example):
<form name="yourForm" method="POST" action="pageHandlingUpdateRequestOnServer">
<input name="db-item-id" type=hidden>
<input name="prod-name" type="text">
<input name="prod-number" type="integer">
<input name="prod-desc" type="textarea">
<input type="submit" value="Submit">
</form>
this form will fire a POST request to the address on action. That address should know how to handle a POST request, taking it, and updating your server database with it.
I don't know what you are using server-side. I also don't know what type of DB you run. if it's php look into PDO statements, and $_POST access. it's too long to answer here. But these two terms should lead you there with some effort and you'll learn a bunch of stuff during the process.
Some useful links:
< form > format
php $_POST
php form handling
php pdo statement

Auto Login html for live.com account

Good Evening Everyone. I need some help with an auto login procedure.
Specific Question = How can I get initiate a 2nd form action within the same html page? I also need to create a 5 second delay so the 1st action can complete
The Result I'm looking for = I want to double click on saved .html file and then get automatically logged into my email
The Website =
HTML Code:
https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1489346474&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fauthRedirect%3dtrue%26nlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015
How did I get this URL? = msn.com>clicked on outlook>clicked on sign in
The problem =
I have created a javascript function within a saved html page and I can get past the login in page. The issue is that I cannot get my password to be correctly placed in the password field and the submit button to work. For my live.com account it is a 2 page authentication. The first page is where you place your username and click next and then the 2 page is where you enter your password and click sign in.
What I have tried =
(1)Because there is a placeholder text, I've tried a POST method, but
I can't get it to work. POST would be best, but I can't figure it
out.
(2) I've tried get element by id and that does not work because
my password is just written on top of the placeholder text and does
not get replaced
(3) CURRENT STATE. What I have written now is 2 form
actions. The 1st form action (logonForm) enters my username and the
2nd form action (passForm) is supposed to enter my password and then
log me in. Is 2 form actions the best way to accomplish this?
WHAT I HAVE SO FAR =
<html>
<body style="display: none">
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="logonForm" ENCTYPE="application/x-www-form-urlencoded"
id="loginForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="this is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
</form>
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="passForm" ENCTYPE="application/x-www-form-urlencoded"
id="passwordForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="This is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
<input type="hidden" name="data-bind" value="this is my password">
</form>
<script type="text/javascript">
document.forms["logonForm"].submit();
document.forms["passForm"].submit();
</script>
</body>
</html>
I am a new student to java and I'm ambitious about coding, developing, and learning. I just can't seem to get this figured out. I'm sure my html/java looks like a jumbled mess but that's because I've been trying all types of things to see if anything would work and I got excited when i was able to get past the login page.
I do apologize for the long post, I just wanted to get as much info as I have out. I'm trying to be as specific as I can be. This is my first post in stack overflow and I couldn't be more excited to be part of this community.
Thanks in advance for your help!
TechStudent01
You cannot do this.
Once a <form> is sent (either as GET or POST), which is a synchronous action, your script basically stops executing, and unless the targeted webpage fails to load (and the browser doesn't display an error page, which can happen with severe network issues), .submit() is a no-return function : if it executed properly, you're not on the same page any more.
Letting you run scripts from a webpage onto a newly loaded other would be the open door to loads of security issues, so this, by design, is not allowed. As such, you can't get your password to be typed in automatically into the log-in form.
In addition, Microsoft account forms are subject to CSRF verification, preventing you from logging in from a page not sent by Microsoft, i.e. your HTML file.
Also, what you are trying to achieve is exactly the purpose of password managers that provide some sort of browser integration.

get the id of one post from one page to another page in html

I am trying to get the id of one object from one page to another page.
I have two pages
index.html
intro.html
index.html
<input type="text" name="fname" value="" id="idnew">
<input type="button" value="Post" id="butonid">
<script>
$("#butonid").click(function(){
$('#idnew').val("4")
}
</script>
Now I want to send the input value of id idnew to intro.html page.
Please help me
val("4") sets the value for that element, right before loading intro.html and is discarded along with your previous page.
To send that value, you could forget javascript altogether and use a form:
<form action="intro.html" method="get">
<input type="text" name="idnew" value="">
<input type="submit" value="Submit">
</form>
then to access that value, for instance in php use $_GET['idnew']

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>
Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​
You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});

Categories