so this is a very vague question but say I had a single .html file and I wanted to store essentially 2 websites in the one file and swap to the 2nd page when a condition became true on the first page(preferably a onclick javascript event) kind of like an if statement(if condition A becomes true on page one: show page 2 else: continue to show page 1) would this be possible in just javascript or would I need the aid of other programming languages and what would be the most optimum way of going about this? I would want the data entered in an input feild on page 1 also available on page 2.
sorry for vague question and horrible formatting, this is my first ever question.
Joel, I don't have enough reputation to comment and so I must type an answer.
Local storage allows you to store a value (page number to display) within the user's local browser memory. This value can be tested for existence (useful for true/false conditions) and can be read (for meaningful values).
All you need to do is bind the creation of a simple local storage object (the page number to display). Bind the code to create the storage object to whichever event you want (such as a button click).
localStorage.setItem('entryPage', '2');
You will also need some code to read within the HTML file to decide what to display (via scroll, hidden and displayed DIV elements or whatever technique you are using).
if(localStorage.getItem('entryPage')) {
//show page two code
}
Check here for a full tutorial set:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
Below is a chrome-tested one-page solution just demonstrating the concept of the local storage part. You'll always be within the same HTML file, but load will show content one until you click the button and set local storage to display page 2, then any future load will be page two until you clear local storage.
<!DOCTYPE html>
<html>
<body>
<div id="main-container">
<div id="content-one" style="display:block;">
<p>This is page one content</p>
<button id="showTwo">Show Page 2</button>
</div>
<div id="content-two" style="display:none">
<p>this is content for page 2</div>
</div>
</div>
<script>
//this function actually swaps display
function swapper(){
document.getElementById('content-one').style.display = 'none';
document.getElementById('content-two').style.display = 'block';
}
//if the value exists in storage, swap them
if(localStorage.getItem('entryPage')) {
swapper();
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){swapper();localStorage.setItem('entryPage', '2');}, false);
</script>
</body>
</html>
To clear local storage on Chrome, see LOCAL AND SESSION section here:
https://developer.chrome.com/devtools/docs/resource-panel#local-and-session-storage
And below is a version including a text-box which simply used the value of the local storage object to hold the data you wish to carry to content page 2. (Remember, if you have tested the first example above you must clear local storage to use this example below because otherwise it will never show you the first content pane).
<!DOCTYPE html>
<html>
<body>
<div id="main-container">
<div id="content-one" style="display:block;">
<p>This is page one content</p>
<input type="text" id="theInput"></input>
<button id="showTwo">Show Page 2</button>
</div>
<div id="content-two" style="display:none">
<p>this is content for page 2</div>
<p id="theOutput"></p>
</div>
</div>
<script>
//this function actually swaps display and shows the value from page 1 textbox
function swapper(theValue){
document.getElementById('content-one').style.display = 'none';
document.getElementById('content-two').style.display = 'block';
document.getElementById('theOutput').innerText = theValue;
}
//if the value exists in storage, swap them and pass on the value of textbox
if(localStorage.getItem('entryPage')) {
swapper(localStorage.getItem('entryPage'));
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){
var theData = document.getElementById("theInput").value;
swapper();
localStorage.setItem('entryPage', theData);
}, false);
</script>
</body>
</html>
Related
I am new to HTML and JS and I am trying to get a value from an input in a page called second.html and send it to a p tag in a page called third.html.
Not sure whether this is something possible but on second.html I have some input-elements in which once some information is written I want to press a button and then that would take me to another page (third.html), in which the value that I got from the input in the second.html would be used in a p tag. I have been able to get the input value and move to the third.html page, however, assigning the value to the p-element is where I am failing. This is the code:
second.html
</head>
<body>
<h1>Second page</h1>
<label for="ticket">ticket:</label>
<input
type="text"
id="ticket2"
name="ticket"
required
minlength="4"
maxlength="8"
size="10"
/>
<button onclick="ticket()">Click me</button>
</body>
JavaScript:
function ticket() {
let ticketp3 = document.querySelector("#specials p").innerHTML;
let valueticket = document.getElementById("ticket2").value;
ticketp3 = valueticket;
parent.location = "third.html";
}
third.html
<div id="specials">
<h1>thrid page</h1>
<p></p>
</div>
Sending a information to another tab can be really a problem because you call the id #specials before it even exists, the id does not exists yet, you have to call the page first. And i think you can't call another page and try to do it, i suggest you using local storage to store the information and use it before! Just use the following:
localStorage.setItem("inputvalue", put here the input value)
And to get the value on the other page use getItem :)
Edit: sorry for the bad english, i'm from Brazil
You could use local storage for this:
ticket():
...
localStorage.setItem('ticket', valueticket);
...
third.js:
window.onload = () => {
const valueticket = localStorage.getItem('ticket')
}
I'm looking to create a button for my website which allows the user to edit information on both the website and the database. To put it into context, I sell cars and when I would like to make changes to a vehicle's details, I would like it to update the information on the website, not just the database.
The function below represents what happens when the update button is clicked - I have narrowed it to just the car colour. The content piece represents the form which appears when the modify button is clicked. The cars.colour represents the colour of the car as per the DB. When the update button is clicked, this value will appear in the text field. The #carList is displayed on a different HTML page.
Catalogue.js:
function update(key){
database.ref('car').once('value', function(snapshot){
if(snapshot.exists()){
snapshot.forEach(function(data){
var cars = data.val();
console.log(cars);
if(data.key === key){
var content = '';
content += '
<form id="car_update">
<div class="container">
<h1>Vehicle Details</h1>
<div class="row">
<input id="colour"
type="colour" placeholder="Colour..."
value="'**+cars.colour+**'" style="width: 150px;"/>
</div>
<button class="test"
onclick="updateCar(\''**+key+**'\')">Submit</button>'
}
$('#carList').append(content);
})
}
}
}
Item1.html:
<label>Colour: </label></br>
<script type="text/javascript">
document.getElementById('colour').innerHTML;
</script>
I not sure I quite understand, it sounds like you want to make a call and update the database and you also want to the page display the user is seeing to update and you already have the call to the database working.
It looks like you have an inline javascript method in the html which is only called when the page is rendered by the browser:
<label>Colour: </label></br>
<script type="text/javascript">
document.getElementById('colour').innerHTML;
</script>
If you want to also update the page from user input, I think you need to have the page refresh after the user submits so the html is called again from the server with the latest content that was updated in the database, or change the html to be setup in a way that it can be updated from the javascript, something like:
<label>Colour: </label></br>
<span id="colorLabel">
and then in the javascript, after cars.colour has the updated value, have something like:
document.getElementById('colorLabel').innerHTML = cars.colour;
I'm making a simple html site with some text and a php-login area. When logged in successfully (which already works) I come to a site where I want the possibility to change paragraph text on the landing page.
I tried this code, but I lets me only change paragraph text on the same site, not on the landing page. Is this possible?
<script type="text/javascript">
function change() {
document.getElementById("name2").innerHTML = "New text inside the text element!";
}
Button to trigger the event
<input id="button1" type="button" value="1" onclick="change()">
well, document refers to the site, not the landing page, right?
besides, if you want to make a change permanent, you should retrieve the text from somewhere you save it in, and not only change what is currently displayed
You could definitely pass a cookie to the Global session variable and you can use an if statement to check on the new page if the session is available and then you can render a new markup.
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
if you set these variable then you can have access to them on each page and can use it to manipulate your data
I'm using Openscript on a form page that is using a clickable div "save" button. When the button is clicked manually a javascript event is executed to save the changes on the page. When I play back the script, the script clicks on the button and gets redirected to the next page but does not save the changes I made on the text boxes. I'm guessing it doesnt run the ng-click updateUser() function when doing a playback. How can I get openscript to click on the save button and run the javascript function?
Openscript code:
web.button(
"/web:window[#index='0' or #title=Payment Processor']/web:document[#index='0']/web:form[#name='form' or #index='0']/web:button[#index='1']")
.click();
This is what the div save button code looks like:
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary" ng-click="updateUser()">
<i class="fa fa-asterisk"></i>
Save
</button>
</div>
</div>
.click(); should work, but you can try mouseClick() too.
Using OATS 12.4.0.1 and testing against the AnjularJS Docs example #64, I playback this similar ng-click to increment the displayed count. My example below shows with mouseClick()
AnjularJS example #64:
<body ng-app="">
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Openscript code:
web.window(2, "/web:window[#index='0']").navigate(
"https://docs.angularjs.org/examples/example-example64/index.html");
{
think(14.929);
}
web.button(4, "/web:window[#index='0']"
+ "/web:document[#index='0']/web:button[#index='0']")
.mouseClick(null, 1, false);
// .click(); // this should work too.
In OpenScript there is an option to call the JavaScript function directly.
String javaScript = "updateUser()";
DOMDocument doc = web.document("/web:window[#index='0' or #title=Payment Processor']/web:document[#index='0']/web:form[#name='form' or #index='0']");
doc.executeJavaScript(javaScript);
You can use the above code to call the JavaScript function.
So far I never faced this issue that form is not getting saved or any other click is not saved..
just try following steps..
Record one more time a new script with save option
add proper think time
think(8); or some time I even do think(8);think(8); as some places openscript does not record any think time.
Actually I always increase think time after every step as uniform time
think(8); after every single step even if some think time is there, add more and if no think time add some. The maximum is think(10);.
EDIT: The solution was to add this to the profile page instead of the gender page.
$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));
});
I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.
EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.
<ul data-role="listview" >
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li> </ul>
The gender html page is just basic stuff with two radio buttons and a save button.
Here is my javascript code(in a seperate file):
$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");
$('#pTest').html('test'); //does not work
//$('p#pTest').text('test'); //does not work
//$('#pTest').text('test'); //does not work
$.mobile.changePage("profile.html");
});
});
I have tried this with javascript: $('p#pTest').text('test');
The text does not change however. (I know that the save button works). Is this possible?
Try the following, note that when the user refreshes the page, the value is "Male" again, data should be stored on a database.
$('button').click(function(){
$('#pTest').text('test')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>
"saving" is something wholly different from changing paragraph content with jquery.
If you need to save changes you will have to write them to your server somehow (likely form submission along with all the security and input sanitizing that entails). If you have information that is saved on the server then you are no longer changing the content of a paragraph, you are drawing a paragraph with dynamic content (either from a database or a file which your server altered when you did the "saving").
Judging by your question, this is a topic on which you will have to do MUCH more research.
Input page (input.html):
<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>
Saving page (saveMyParagraph.php) and Ouput page (output.php):
Inserting Data Into a MySQL Database using PHP
It seems you have the click event wrapped around a custom event name "pageinit", are you sure you're triggered the event before you click the button?
something like this:
$("#gender").trigger("pageinit");