This is the book now button from page 1, product.html
<form name="booksr1" method="link" action="enquiry.html"><input type="button" value="Book Now" class="book" onclick="window.location.href='enquiry.html'" /></form>
I'd like to make it where the other page, enquiry.html is prefilled with the subject I want e.g. RE: Enquiry on: Single Room, when the "Book Now" button on the other page is clicked on
This is the code for the RE: Enquiry input on page 2.
<label for="RE: Enquiry on:">RE: Enquiry on:<span class="RequiredColor">*</span></label><br/>
<input type="text" id="Subject"/><br/><br/>
How should I do this with localstorage?
P.S. I'm quite new to this so please make it simple to understand. THANKS!!!
StackOverflow doesn't allow you to save/read from localStorage, so you can't click the buttons to see it work, but let's give this a go. There might be some errors, it's late, but I hope I can explain.
Let's say you have product.html:
function go() {
var room = document.querySelector('#room-select').value;
localStorage.setItem('room', room);
location.href="enquiry.html";
}
<label for="room-select">Choose a Room:</label>
<select id="room-select">
<option value="1">Single Room</option>
<option value="2">Double Room</option>
<option value="3">Triple Room</option>
</select>
<button onclick="go()">Submit</button>
You run a function that gets the value of the select box, stores it in localStorage and then goes to your enquiry page.
Now you have to add some script to enquiry.html to read the value back out.
document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('room');
var input = document.querySelector('#subject');
input.value = room;
});
<label for="subject">RE: Enquiry on:</label>
<input type="text" id="subject" name="name" required>
You have to wait for the page to load (listen for the event DOMContentLoaded), then read the value you stored on the previous page, get a reference to the input box and update its value with the one you read from storage.
****LATEST UPDATE***
I've added and editted the codes Will suggested(Thanks!! :D) into my product.html,
function room1() {
var room = document.querySelector('#room-selector-one').value;
localStorage.setItem("booking1", "Single Room(Fan)");
location.href="enquiry.html";
}
function room2() {
var room = document.querySelector('#room-selector-two').value;
localStorage.setItem("booking2","Single Room(AC)");
location.href="enquiry.html";
}
and my enquiry.html.
document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('booking1');
var input = document.querySelector('#subject');
input.value = room;
});
document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('booking2');
var input = document.querySelector('#subject');
input.value = room;
});
But now, there's a new problem. I'm able to run the first product value to the enquiry.html page but when after i edited the second product codes, when i try to click back to the button on product.html for the first product, the second value still remains.
Related
I have a small JavaScript issue.
I have the following form:
<form method="get" name="basic" id="basicId" action="/page2">
<select id="activity" name="activity" class="form-control inputbox">
<option value="default" class="activities">Select value from dropdown:</option>
<option value="a" class="tests">A</option>
<option value="b" class="tests">B</option>
<option value="c" class="tests">C</option>
</select>
<button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>
What I'm trying to do is to get the value from the select tag and use it in page2.
For example, is option is A, the value should be ="a".
I want to use the value="a" in page2.
document.getElementById("output"): here i want to print the result in page2.
What I've tried to do in the second page:
<script>
var select = document.getElementById("activity");
var e = select.options[select.SelectedIndex].value;
document.getElementById("output").innerHTML = e;
<!-- This doesn't show anything. -->
var test = document.getElementsbyName("activity").values;
document.getElementById("output").innerHTML = test;
<!-- The output is: function values() { [native code] } -->
var test = document.getElementsByName("activity").value;
document.getElementById("opinion").innerHTML = test;
<!-- The output is: undefined -->
</script>
So basically, getting the select element by ID or by Name doesn't work.
Getting the select element ID.value doesn't work.
Getting the select element by the index doesn't work.
Any ideas? I've literally tried anything.
Am I writing the code in the wrong place?
Do I have to send this information through the server-side?
P.S.: I am writing the app in Node.js and Express and I'm using handlebars.
Kind regards,
G.
Update:
If you want to get the value to other page, you need to fetch it from url as whole new page get rendered and your old values will not exist exist.
If you are having your values in url just fetch it by this
let url = window.location
I assume, you are trying to get the value of dropdown
select has always the value attribute to it which actually is the value you select from dropdown
You just need to look for the value of select whenever you want the selected option.
Here in your case just attach a onchange listener to select, which triggers whenever the value of select get changed
var select = document.getElementById("activity");
var mySelectValue = select.value // set the default value
select.onchange = function() {
console.log(select.value)
mySelectValue = select.value // update whenever value get changed or new value chosen
}
// Do whatever you want to do with selectvalue
<form method="get" name="basic" id="basicId" action="/page2">
<select id="activity" name="activity" class="form-control inputbox">
<option value="default" class="activities">Select value from dropdown:</option>
<option value="a" class="tests">A</option>
<option value="b" class="tests">B</option>
<option value="c" class="tests">C</option>
</select>
<button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>
So basically, I have fetched the link and I tried to check if the activity = something.
example down below:
if(url.href.indexOf("activity=a") > -1){
activity = "a"
}
document.getElementById("opinion").innerHTML = activity;
Of course, in the page2, I can see "a" as a result which is great! :)
I am posting this question because there are Q&A s with the first part of my question (dropdown options), but I am not sure how to incorporate the 2nd part (buttons). The scenario is this:
My page has an html dropdown with options:
Option1 Option2 Option3 Option4 Option5
There are also various buttons:
ButtonA ButtonB ButtonC ButtonD ButtonE
I'd like to send the user to the corresponding page for the Button/Option.
So for example, if the user picks Option 2 and then clicks Button D, I'd like for Button D to open up the ButtonD-Option2 page.
The user could also then click ButtonB, in which case, if the Option has not been changed, I would open the ButtonB-Option2 page.
Or the user could change to Option 3 and click Button D again, and it would open the ButtonD-Option3 page.
So I am back to this, I've tried various things and here is what I have so far:
<select id="LineDropdown" onchange="ChangeLineFunc()">
<option selected value = "000"> Select ... </option>
<option value = "002">002</option>
<option value = "003">003</option>
<option value = "004">004</option>
etc ...
The buttons are just a list:
<ul>
<li> <input type=button class="button" value = "Button1" onclick="OpenButton1()"/></li>
<li> <input type=button class="button" value = "Button2" onclick="OpenButton2()"/> </li>
... etc
I can see what they select:
function ChangeLineFunc(){
var LineSelected = document.getElementById( "LineDropdown" );
var LineSelectedValue = LineSelected.options[LineDropdown.selectedIndex].value
// alert( LineSelected.options[LineDropdown.selectedIndex ].value )
alert (LineSelectedValue)
}
and I can open a hardcoded page:
function OpenButton1() {
location.href("https...Button1/Option2.pdf")
}
What I would really like to do is open |
location.href("https ... Button1/*selectedoption*.pdf
I'd like to stick with the function per Button for now as it is (for me) easier to understand.
Please share your code too, when you post a question next time. Check this fiddle, it might do it for you. Here's the js part of it.
var combinations = [
{option:1, button:'a', link:'www.google.com'},
{option:1, button:'b', link:'www.ustraa.com'},
{option:2, button:'a', link:'www.ustraa.com'},
{option:2, button:'b', link:'www.google.com'},
];
window.handleClick = function(button) {
var option = $('#select-box').val();
combinations.forEach(function(c) {
if (c.option == option && c.button == button) {
console.log(c.link);
//window.location = c.link;
}
});
}
I have this HTML:
<select id="categories">
<option value="category1">Category 1</option>
<option value="category2">Category 2</option>
</select>
<input type="search" id="search" placeholder="Search here" autofocus>
And this jquery:
var categories = $("#categories option:selected").val();
var search = $("#search");
if (categories = "category2") {
search.attr("placeholder", "Search for category 2");
} else {
search.attr("placeholder", "Search for category 1");
}
I'm trying to put a different placeholder according to the selected value, but no matter what is selected, it always show the first placeholder. This might seem silly, but further I want to be able to pick the value of the selected option to make the search in that specific category, kinda like the Amazon website.
I have used == to compare, but nothing happens, the placeholder stays with "Search here".
PS: With this code running, using the console on Chrome, if I type and execute categories it will always show in the console category2, no matter which one is selected, but if I type and execute $("#categories option:selected").val();, then it will show the selected value. I tried to put this directly inside the if in the code, but returned the same problem. I also tried to replace the else for if (categories = "category1"), but then it was the same problem, but this time the placeholder showed was always the second one.
//you should add an onChange event,like this:
$("#categories").change(function(e){
var categories = e.target.value;
if (categories == "category2") {
...
} else {
...
}
})
I am working in wordpress and I have an html form with two submit buttons with same classname and different value. I am passing the submit button clicked value through ajax and show it on the screen. Now my problem is that only first submit button value goes through and second submit button value never gets to show on the screen. Kindly guide and below is my code.
Code
<form id="mydispimage" action="" method="post">
<select id="category" style="width: 250px; background-color: lightgrey;" name="category">
<option disabled="disabled" selected="selected" value="">Select category</option>
<option value="Cutie Pie">Cutie Pie</option>
<option value="Chubby">Chubby</option>
<option value="Dimples">Dimples</option>
</select>
<input class="displayimage" name="displayimage" type="submit" value="star1" />
<input class="displayimage" name="displayimage" type="submit" value="star2" />
</form>
JQuery
jQuery(function ($) {
$(".displayimage").click(function (e) { //form is intercepted
e.preventDefault();
//show timer
jQuery("#timer").css("display", "block");
jQuery("#participate").css("display", "block");
var vote = jQuery(".displayimage").val();
alert(vote);
//$("#timer").show(slow);
//serialize the form which contains secretcode
// var sentdata = $(this).serializeArray();
//var vote = 1;
//Add the additional param to the data
var sentdata = ({
action: 'displaymyimage',
foo: vote
})
//set sentdata as the data to be sent
$.post(yes.ajaxurl, sentdata, function (res) { //start of funciton
//$("#myresult").append(res.l);
//alert(res);
$("#myresult").html(res);
//$.parseJSON(data);
return false;
} //end of function
,
'json'); //set the dataType as json, so you will get the parsed data in the callback
}); // submit end here
});
Change this
var vote= jQuery(".displayimage").val();
to this
var vote= jQuery(this).val();
You need to use $(this). Otherwise, you will always bring the first value among the elements with matching .displayimage class. That is why you see always the value of the first button.
This is to check if a user is opening another div (form; there are four for the page) without having saved the entry or update for the current form.
I need to compare the current value of dropdowns to all the possible choices of the dropdowns. If there is a difference the user is shown an alert notifying of having not saved the data. There is a not a set number of dropdowns. My script has been able to correctly count the number of dropdowns for each form.
Thanks,
James
You can do this by updating a variable on change of your select and then checking that value whenever you do what it is you do to move on to the next form. Here's the code I have mocked up:
HTML -
<select id="one">
<option value=""></option>
<option>1</option>
<option>2</option>
</select>
<br />
<select id="two">
<option value=""></option>
<option>3</option>
<option>4</option>
</select>
<br />
<select id="three">
<option value=""></option>
<option>5</option>
<option>6</option>
</select>
<br />
<!-- The submit buttons -->
<input type="submit" id="submit" value="Save" />
<br />
<!-- The link that moves on to the next form -->
Move on
Javascript -
// the variable
var selectChanged = false;
// set up everything on load
window.onload = function() {
// bind handlers to submit button, link, an dselects
document.getElementById("submit").onclick = submitForm;
document.getElementById("moveOn").onclick = moveOn;
var selects = document.getElementsByTagName("select");
var numSelects = selects.length;
for (var i = 0; i < numSelects; i++) {
selects[i].onchange = noteChanged;
}
}
function submitForm() {
// set the changed variable to false
selectChanged = false;
}
function moveOn() {
// if the select has changed without save, alert the user and prevent
// link actions
if (selectChanged) {
alert("You have changed a form value but not saved it");
return false;
}
}
// update the value for each time a select changes
function noteChanged() {
selectChanged = true;
}
Here it is in action
What I would do is:
Whenever a change happens (you can attach to the onChange event for any form elements you need to track), set a flag somewhere that indicates the form (or whatever) is "dirty". (a good place to put this is in data- attributes)
When the form gets saved, the saving process can re-set the dirty flag to clean
Whatever method is used to switch forms can check first to see if the dirty flag is set, and if so, display an error (or warning) and prevent the next form from being shown.
With these 3 pieces in place, you should be able to easily detect a dirty (unsaved) form and take the appropriate actions.