insert content in a div of another page using client side - javascript

I have a page where there is a form(and url is xyz.com/form)...
Now when the user submits the data, it should redirect to the home page of xyz.com(url is xyz.com) and then display a message as "Thank you" in an existing div id (div id="message")of the home page...
Is it possible to do it using javascript??
Will I get the value of that div id(message) when the it redirects to home page using javascript.
I could redirect the page to home page.. but couldnt insert contents in that div... or in a new div...
Please help

i would add a GET-parameter to the url like "status=ok". on the main-page you can check this parameter with javascript and change the value ('innerHTML') of the div.

Without having seen your code, i would say yes, it is possible.
On entering the main page you can check the referring page and you could also check some session stored data that validates if the user has submitted the form (i suggest ajax for this).

Related

PHP go to another page and getElementById

I have 2 pages
HTML page with a form
PHP action page for the form
Based on this, if everything is successful with the form submission, I want to go back to the first page and open up a modal using document.getElementById.
I know to do this, I would need the header("Location: blabla") function in my PHP page to go back to the first page, but how am I supposed to open up the modal after getting to that page?
Any help would be appreciated, thank you very much.
It is better to use ajax in this case, yet if you have to do it this way you can use the query prams, for example you redirect the user to your html page like this
header("Location: blabla.html?m=some message to show")
then in your html page, you need to check if this param exists then display the modal like this
searchParams = new URLSearchParams(window.location.search);
if (searchParams.has('m')) { // searchParams.get('m') then open the modal or do what ever you want. }
edit: you can use any other param instead of the message, it could be what modal to show, or whatever

jQuery save landingurl and referealurl as hidden fields

Assuming an HTML web form with 2 hidden fields.
landingurl: the full url where the visitor landed before submitting the form including tracking codes
referealurl: the full referal url (where the visitor came from)
I want to jquery to save those values in the value fields which are hidden in the form.
I can't figure it out
You can grab the current URL with window.location.href, so if you grab the href on the landing page, then you have the landing URL.
You can grab the referring URL with document.referrer. This also needs to be grabbed on the landing page.
I haven't used jQuery in a while, but I believe the syntax would be something like this:
// For this example I have assumed your fields have the IDs landingURL and referralURL.
$('#landingURL').val(window.location.href);
$('#referralURL').val(document.referrer);
Now, if the landing page is not the same page as the form, and you need to pass this information along to the form page using only JavaScript in the browser, then I would suggest that you grab the landing page URL and the referral URL as described above and save them in either localStorage or sessionStorage.
Here's an example of how you can do that:
// On the landing page:
localStorage.setItem('landingURL', window.location.href);
localStorage.setItem('referralURL', document.referrer);
// On the form page:
$('#landingURL').val(localStorage.getItem('landingURL'));
$('#referralURL').val(localStorage.getItem('referralURL'));
Hope that helps!

Access Form Action of another server through javascript

I have a simple html form which contain 2 fields and submit button. After hitting submit button my data transfer toward the another server through query string named "http://www.123contactform.com" which is load in iframe on my page and the field which is in the iframe become pre-populated with the information coming from query string. That's All I have done.
Now what I want want when the submit button of iframe click, the page transfer towards the another page, I want to restrict that navigation and define my own url with javascript.
Can any one help me, How do I get this???
Regards,
Ammar
Can you show some code ?
And
Logically What you want is something like this - You have an iframe on example.com and that iframe load's gmail's login page, You want to change the submit url of gmail's login form ?
NOT POSSIBLE

Using Javascript, how can I change the CSS display property on a different HTML page

So, I want to change the display style of one of my divs, here's the code in my javascript:
document.getElementById("header1").style.display='none';
Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?
Thank you in advance!
You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.
Edit
You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.
// Redirect without querystring
window.location = "http://www.mySite.com/default.html"
// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"
// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"
Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.
You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.
how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code

Redirect to another page and change div content of these page

when user register successfully then action attribute of registration form redirect him to login.html. I want to change a div text for informing him that his registration is successful. I can't understand that how can change div text after redirect.
You cannot change text on another page unless you have script on that page for that purpose.
You are better off using server-side code to change the message. For instance, using php, you would have a login.php page that take a parameter called success, so you would call login.php?success=1 if your login succeeded, and the php script would add the message to the page.
This is just one example of how it might be done, but the key is that you cannot change content on a subsequently loaded page from script on your current page.
Now, if you want to use script, you could use jQuery to load the login.html content into your current page context, using .ajax() or any of the ajax jQuery functions .post(), .get(), etc. Then you can use your script to change the content, because it will be in your current page.

Categories