I have a form on filling all the information and it refreshes and go to the same form .
which needs 2 parametrs to be passed to the url . Now my problem is I dont want to show 2 params in the url How can I do that?
This is the url.
$myurl = '/root/subroot/banking.php?a1=test&a2=test2'
I want to change the URL to
$myurl = '/root/subroot/banking.php'
Can the two parameters also go through without showing in the Url I mean through any other. I created params in this way Would that help in creatin variables
$('#a1').attr('value', 'test');
$('#a2').attr('value', 'test2'). but did not work out
Change <form method="get"> to <form method="post">
Edit
If you don't want a1 and a2 to be seen, you can use <input type="hidden" name="a1" value="test" /> (same for a2). Though, just a note this information is visible in the markup and headers sent to the server so if you're hiding something there that you don't want the user to be able to see, you probably don't want to do it this way.
On a sidenote, if you're using jQuery, you might wanna use
$('#a1').val('test');
instead of
$('#a1').attr('value', 'test');
Related
I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.
function submit() {
firstname = document.getElementByName("firstname");
document.write(firstname);
}
<html>
<body>
<form>
<p>firstname: <input type="text" name="firstname" />
</p>
<input type="submit" onclick="submit()" />
</from>
</body>
</html>
now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.
When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:
Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).
For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.
For the second one, you just need to use localStorage object this way:
function submit() {
var firstname = document.getElementByName("firstname");
document.getElementById("output").innerHTML = firstname;
if (!!window.localStorage) {
localStorage.setItem('firstname', firstname);
}
return false;
}
<form onsubmit="return submit();">
<p>firstname: <input type="text" name="firstname" /></p>
<input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>
I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.
function getname() {
return localStorage.getItem('firstname');
}
There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.
On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.
On any other page then you can get the value by
var name = localStorage.getItem('firstName');
Other options you can look at cookies, querystring and session storage
when redirecting to next page, bind parameters in redirecting url like this,
window.location.href = "http://yoursite.com/page?data1=one&data2=two";
And fetch them from retreiving end like below,
var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"
I declare a variable at the beginning of my .js file:
var option="blabla";
On page 1.html I click on a link to page 2.html where I have
<script>document.write(option);</script>
No text is displayed on 2.html. When I refresh the browser while I am on 2.html I get undefined as an output.
What do I have to do to have the text displayed straight after I click the link?
Alternatively, how can I get the following code work to output strUrl on 2.html:
on 1.html I have a link:
<a href="2.html" onclick="function1("item")">
on 2.html I have a div:
<div id="display">document.write(strUrl);</div>
then I have in my .js file:
function1(searchitem)
{
strUrl = 'http://blabla.com/'
+ '?key=' + searchitem;
}
You try to create a Javascript variable on a page and then use it on another page. This is a more-or-less broad problem, since you want to maintain values across pages. First of all, you need to decide where is this value going to be defined and where is it going to be used. If this is more like a server-side variable, then you need to define it on server-side and then generate it into your Javascript code. If you are using PHP, then you can do it like this:
<script type="text/javascript>
var foo = '<?php echo $bar; ?>';
</script>
Naturally, you need to initialize $bar to be able to do that. If the variable should be a client-side variable, then you need to use localStorage, like this on 1.html:
localStorage.setItem("option", "blablabla");
and then load it on 2.html:
localStorage.getItem("option");
Or, if you need to use it both on server-side and client-side, then you can use a cookie for this purpose. Using cookies i slightly more complex, but my answer to another question should get you going.
Let's focus on the cause this did not work for you. A Javascript variable will cease to exist when the page is unloaded, so you will not be able to use its value after that. So, you need to persist it somehow, storing it either on the server or the computer where the browser is being run.
As a side-note, I should mention that you can use Javascript variables accross pages if you load some pages inside iframes of a page, but that is a different scenario.
This is what FORMS and AJAX were invented for. If your server has a PHP processor (virtually ALL of them do), then you can rename your .html files to .php and use a bit of PHP to accomplish your goal.
A web page ending with .PHP works exactly the same as one ending in .html, except that you can now add snippets of PHP code where desired. It is not necessary to have any PHP code, but if you have some it can do stuff.
Method One: FORMs
If you want to switch to page2.html and see a value sent from page1.html, you can use a FORM construct and post the data from page1 to page2:
page1.php
<form action="2.html" method="post">
<input name="option" type="text" />
<input type="submit" name="sub" value="Go" />
</form>
page2.php
<?php
$p1 = $_POST['option'];
?>
<div>On page1 of this website, you typed: <?php echo $p1; ?>. That's what you did.</div>
Note how a <form> uses the name= attribute for the name of the variable that is sent to the other side.
Example Two: The AJAX method
HTML:
<div id=nonForm">
<input id="option" type="text" />
<input type="button" id="myButt" value="Go" />
</div>
<div id="results"></div>
jQuery:
$('#myButt').click(function(){
var opt = $('#option').val();
$.ajax({
type: 'post',
url: 'page2.php',
data: 'option='+opt,
success: function(john){
if (d.length) alert(john); //display result from Page2 in a pop-up box
$('#results').html(john); //Or, display it right on the page
}
});
});
PAGE2.PHP -- The AJAX processor file
<?php
$opt = $_POST['option'];
//Now, you can do something with the data in $opt, and then send back a result
$rtn = 'Hey, you sent: ' .$opt;
echo $rtn;
The primary (and most important) difference between the two methods is that the FORM will change pages on you. The user will be sent from Page1 to Page2, and the screen will flash as this happens.
What's exciting about AJAX is it sends data to Page2, where Page2 can do something with it (for example, a database lookup), and then Page2 sends different data back to Page1. This new data can then be displayed on the page WITHOUT the page refreshing.
Here are a couple of very basic AJAX examples, to get you going:
AJAX request callback using jQuery
I have two pages; page1 and page2. page1 holds a form while page2 has some images. I want to enter a sentence into the form on page1 and get the value of that text box on page2.
the form on page1
<form name="input" action="page2.html" method="get">
<input type="text" name="textbox" id="textbox">
<input type="submit" value="Submit">
</form>
what would be the proper way to go about this?
Would I use the get method along with the action method to send the value through the url and then extract it using window.location.href then splitting the text after the ? or is there a simpler way of achieving this?
Thanks
Just send it in the query string and read it in page2, as you said.
See this to have an idea of how to read the query string parameter:
How can I get query string values in JavaScript?
Your way of doing this would work, although it's certainly not a good long term solution. If your site is going to get more complicated, it would be better to use a server-side language like .NET, PHP, Ruby, etc.
If you have to get thed data using only JS, then you need to use URL. Otherwise you can use server side script like jsp.
When you use URL, make sure the text is URL-encoded before appending to the URL.
I'm working with an old ASP WebForms page in which there is a link which opens in a new windo using javascript. This link includes a GET-parameter, like this:
<href="javascript:window.open(http://myurl.com?MyId=123).focus()">
Search for object
</a>
What I would like to do is replace this GET-parameter with a Post-variable in order to avoid the value of MyId being stored in the browser-history. Possibly something like:
<input type="hidden" id="MyId" name="MyId" value="123">
<a href="submitSearchCriteria()">
Search for object
</a>
Note: Since this is a webforms page, the whole contents of the page is within a pair of <form>...</form> tags which post back to the page itself, and I don`t want to mess with these. The page I would like to link to is another page.
My question: Is there some fairly simple, clean and safe way to pass along a Post-variable from within a link like this? I would prefer to do this without including any third-party java script libraries if possible (I want to minimize the necessary changes to an aging system).
Any ideas?
Add your MyId in your form:
<input type="hidden" id="MyId" name="MyId" value="123">
Then your hyperlink:
Search for object
Then use javascript to change your form action:
function submit(){
[Your Form].action = "[Your Action]";
[Your Form].submit();
}
The form submits but as the page refreshes, the form action goes back to what it was before. But this could depend to where you point back your new action. You could add something to handle the response. This is the easiest solution if you ask me. But for the cleanest, you should try reading about AJAX.
My question may sound naive, but really struggling to do a very simple thing. Suppose I have to html page - send.html and receive.html.
In send.html page -
I have text field and a button in like following -
<body>
<form onsubmit="recieve.html">
<input type="text" id="mytextfield">
<input type="submit" id="submitbutton" value="Go">
</form>
</body>
Here I want to put something on the textfield and I want to see that value in the receive page some thing like - Hello 'value of textfield'. That's it.
Do I need to use JS cookie for that? If not, how can I do it in the most simple way?
Need help :(
The most simple way is PHP. Bottom line is you need something handling the data on the server side.
With javascript you can write a function to store the value in a cookie and read it on the next page. By the way, your page goes in the action attribute. onsubmit expects a javascript function, not a page.