How to change only part of the query in url - javascript

I have this url
http://www.test.com/home-package/?location=locationA&bed=3&bath=4
and a variable (e.g. $location = "locationB") which holds the value user has selected when they land on the website. They can also change this location from any page they want and the variable will be updated with that location.
What I'm trying to achieve is,
If user is browsing http://www.test.com/home-package/?location=locationA&bed=3&bath=4 and then change the location to 'locationB', I want the url to update to http://www.test.com/home-package/?location=locationB
Hope I have made this clear.
Edit 1: User is selecting location from a dropdown list. <select> is wrapped inside <form> and upon hitting save, the value of location is saved in a session variable.
Thanks.

As I understand the locationB is in HTML input element? Add a onchange listener to the element and redirect user with javascript.
let locationB = getValueFromElement();
window.location.replace("http://www.test.com/home-package/?location="+locationB);
//or
window.location.href = "http://www.test.com/home-package/?location="+locationB;
Read differences between JS redirects.
If the locationB value comes from backend and redirecting in backend is not possible you can also add a hidden element that holds the value and read it with JS.

Related

How to insert URL into text area using ReactJS?

I have made a small modal pop-up for getting the URL from the user. I want to insert that URL into a textbox in ReactJS. I can't figure out how to add that URL into the text area.
Use local state to achieve this. For example take url as input from user and set it into local state and use that state in modal.
Maybe this will help.
How can I get value from react modal bootstrap?
Get the value from the modal as mentioned above, store it, and then display that stored value in the textbox.
<textbox value= { nameOfVariable }></textbox>

What the best way to retain form values after page reload (click submit)

I have a filter on the page and I would like to retain the form values after click on button filter.
I'm trying to use cookie (like the code below) but I don know if this way is the best because the cookies are safe on the browser and then it's maybe could make a trouble for my page.
How can I retain form values and then how to populate the form again whit them automatically?
Obs.: Can I get the infos on the URL? The project is using Ruby (rails).
$(".searchButton").on("click", function () {
$.cookie('frachiseesValue', $("#frachisees_filter").val());
$.cookie('schoolsValue', $("#schools_filter").val());
$.cookie('challengeValue', $("#post_challenges_filter").val());
$.cookie('statusValue', $("#statuses_filter").val());
$.cookie('searchValue', $("#filter_search").val());
$.cookie('startDateValue', $("#startDate").val());
$.cookie('endDateValue', $("#endDate").val());
});
UPDATE
In my case I have 4 selects, 2 input, 1 submit and 1 input search. The select's cookie get select's IDs and no string.
You can try:
Cookies
URL Query String
Localstorage
IndexedDB
Cookies and Localstorage are well supported and easy to use, where URL Query string will allow you to pass a fullfilled form with just a link if you want to not show them in the url, avoid it

ajax/json/? to query a webpage and return specifc div/p values

I'm trying to find code or a way to process the following:
When you click a button a site it'll go and read specific website link and then return variables that it finds in the remote page.
1) user clicks button
2) query goes to www.whatever.com/myfile.html
3) there is a specific p tag inside a div tag called 'totalamount' = <div id=WTextWrapper><p id="Amount">2,000</p></div> That I want to grab the value of and then display it on my page below the button that I clicked in step 1
I know there is a way to do it, but I have no idea how it's done.
You need to get the source of the html and use regex to extract what you need. You can use file_get_contents() function to get the source html.

how to append the element by id from different html pages in javascript

I am having one html page for recommendation.
In this page I have different buttons like choose contact, choose merchant. In choose merchant button, I have one textbox, after clicking on the button I will navigate to the page which contains the list of merchants.
After clicking on merchant name, that merchant name should displayed in textbox of recommend.html (first html page), but its not possible as the textbox id belongs to different html page and that merchant name id belongs to different html page.
I m able to append that merchant name to the same html page of choose merchant but can't append it to the recommend.html..anybody knows solution for this,..?
In a simple code example, using HTML5's session storage,
On your merchant list page, before bouncing back to the recommendation page, set the session storage item when the merchant is selected:
sessionStorage.setItem("selectedMerchant", "merchant_name");
On the recommendation page, read the item and display recommendations based on the selected merchant name:
var selectedMerchant = "";
if ( sessionStorage.getItem("selectedMerchant") ) {
selectedMerchant = sessionStorage.getItem("selectedMerchant");
}
Of course, you will need to handle various conditions, such as clearing the selected merchant names and validating the values, etc.
Check out the link below for more references:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You need to generate that html code and have to pass it in that page using jquery
For example if that element is like "#merchant" and generated html is like $("") then append it to selected element using insertAfter or appendTo
When you click on second.html (where ever merchant name exists), you need to submit a html form with action attribute to recommend.html and pass the merchant name as a hidden input type .
Then from second.html, you can access the POST parameters and display it in your text box.
Basically you need to have some server side coding (JSP/PHP/PERL etc)

saving textarea input's value in to js variable and make it visible everywhere

HTML:
<textarea id="edit-message"></textarea>
<button type="button" id="guest-button" class="form-submit">Send</button>
JS:
$('#guest-button').click(function() {
if (window.sessionStorage){
sessionStorage.setItem("gbookmsg", $('#edit-message').val())
}
setTimeout(function() {
window.location.replace("http://anti-idol.org/user/login");
}, 500);
});
$('#edit-message').val(gbookmsg);
What i want to achieve is when a user fills textarea inputs with some text and then clicking to a send button - it will save the value of the textarea in to a gbookmsg variable. Then when user is redirected to a login page - after he successfully logs in, he goes back to this form and javascript inserts gbookmsg input's value filled previously. But when the page reloads my gbookmsg variable is getting undefined. How to save it? Thanks
You cannot achieve this by global variable as the scope of the global variable is for time the DOM is available if the page is reloaded the value will be lost
you can either use cookies
or
use DOM sessionStorage or localstorage
if (window.sessionStorage){
sessionStorage.setItem("gbookmsg ", $('#edit-message').val()) ;
}
EDIT
Created the fiddle for you
Run for the first time you will see a blank alert
Set the value and reload the page.
Use cookies in order to store variables.
Please, see the following article which helps you to store and retrieve values from cookies by using JQuery:
http://www.sitepoint.com/eat-those-cookies-with-jquery/
What backend are you using? You can either store the data into the session (server side) or use query string to pass the values to the next page. Or you can use cookie to store the value
Global variables only live as long as the page, when the page gets reloaded, they are lost.
You have a few options for storage more persistant than a page:
localStorage
localStorage is an object which does persist between page loads:
localStorage.cat = 3;
// After a page load:
alert(localStorage.cat) // will alert '3'
Cookies
You can use document.cookie to set a browser cookie which will remember the value.
Passing it in the redirect
If you pass the text from the input through each step of the login redirect, you can have it back when the page loads.
The login redirect might look like:
http://myawesomedomain.com/login?redirect=http://myawesomedomain.com/contact?message=Hi!
Then that would redirect you after login to:
http://myawesomedomain.com/contact?message=Hi!
and you can pull the message out of the get parameter.

Categories

Resources