I would like to start off saying that I'm very new to programming. I am developing a site (www.example.com) that has multiple hyperlinks.
When a user visits my site I want all the links to be defaulted to the back office of another site (www.tvcmatrix.com/mhammonds) I use. How do I set the links to redirect to the query string value based on inputted text from a form that is on my site (www.example.com)?
In other words, if the url reads www.example.com/?user=abelliard, how do I make all the links on the site change to "www.tvcmatrix.com/abelliard"? If no query string is present, then I would like for the links to be www.tvcmatrix.com/mhammonds.
Here is a file on my site for the form called "form.asp"
<!DOCTYPE html>
<html>
<body>
<form action="viral.asp" method="get" name="input" target="_self">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Here is the "viral.asp" file in the "form.asp" file.
<%# language="javascript"%>
<!DOCTYPE html>
<html>
<body>
<%
var id = Request.QueryString("user");
Response.Write("Your URL is: www.mca.com/?user=" + id)
%>
</body>
</html>
Here is the last file and front end of the site called "front.asp"
I have 'viral' and 'form' down packed. The main thing I needed help with was the front end of the site that deals with the links.
I have no clue if I am even a tad bit close or way off track, but what I have isn't working at all so I know it's wrong.
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!
<iframe width="450" height="40" src="form.asp">
</iframe>
</body>
<script lang="javascript" type="text/javascript">
function tvcid() {
var username = document.getElementById('username');
if (username.value != "") {
tvcid = "username";
}
else {
tvcid = "mhammonds";
}
}
</script>
</html>
How do I pass a variable through a hyperlink?
For staters, you're not using a hyperlink, you're submitting a form.
Request.QueryString("user"); is looking for something on the querystring. You're using POST, which has form fields.
Use Request("user");, which will grab the value regardless of whether it's on the querystring or a POST field. If you want to force recognition of form fields only, use Request.Form("user");
Classic ASP code is executed server side when the page loads. You are submitting a form inside an iframe, and the result page is also displayed inside the iframe. This result can't change anything on the parent page because it has already been loaded. The easiest way around this would be to have all your code on the same page. I'll show you how to do this with VBS as the scripting language, it's what I'm used to, but it should be easy enough to use server side JS instead
<%# language="VBScript"%>
<%
Dim id
If Request("user") <> "" then
id = Request("user")
else
id = "mhammonds"
End if
%>
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!<br />
<% If Request("Submit") <> "Submit" then %>
<form method="get">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
<% else
Response.Write("Your URL is: www.mca.com/?user=" & id)
End If %>
</body>
</html>
If you really don't want to have to reload front.asp then you need to look at ajax, and add the relevant tag to your question
Related
DON'T REPORT YET - READ FIRST
I'm trying to make a textbox and a button, then a iframe that whenever you press the button it goes to the URL in the textbox. I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
But... It doesn't work for me. You see, this script also changes the page url, and since I see this trough a iframe on my website, it just doesn't work. If anyone knows a way around this or a different way to do it, please tell me! :) have a nice day!
you can, you have many pure js options:
var el = document.getElementById('ifrm');
el.src = url; // assign url to src property
window.frames['ifrm'].location = url;
//or
window.frames['ifrm'].location.replace(url);
if is your page you can just make links
link
but remeber that will only work in the same origin.
"It is generally possible to load documents from other domains in iframes. However, it would not be possible for the containing document to make a reference to the document inside the iframe due to the restrictions of the Same Origin Policy. Also, the page from the other domain could contain code that would prevent its being loaded in your iframe."
I am relatively new to html/ javascript, and I am trying to use google sites to build a simple store, that will send orders to a google sheet. At present, I am having difficulty passing data between iframes. In the first iframe, I am testing this snippet of code:
<!DOCTYPE html>
<html>
<input type="text" id="texttest">
<button onclick="store()" type="button">Store</button>
</html>
<script type="text/javascript">
function store() {
var myinput = document.getElementById("texttest");
sessionStorage.setItem("texttest", myinput.value);
</script>
And in the second iframe, this snippet:
<!DOCTYPE html>
<html>
<p id="output"></p>
</html>
<script>
document.getElementByID("output").innerHTML = sessionStorage.getItem("texttest");
</script>
The idea is essentially for a user to scroll through the option, input in certain fields the type and quantity of the item they want, and for those selections to be collected at the end and sent to a google sheet. However, the code below is not displaying the text entered in the "texttest" field in the "output" iframe. Any ideas or suggestions would be welcome!
I have been trying to fetch the result of a php page after sending a post request to the page itself. I want to fetch the data after the post request succeeded and get the content of the div element with id result. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").submit(function() {
$.post("test.php",
{
name: "valid"
},
function(data, status) {
});
return false;
});
});
</script>
</head>
<body>
<form method="POST" id="myForm">
<input type="text" name="name" />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="result">
<?php
if(isset($_POST['name'])) {
if($_POST['name'] == 'valid') {
echo 'You are a valid user!';
}
}
?>
</div>
</body>
</html>
When I submit the button regardless of what is written in the textbox I should get the Your a valid user message from the test.php I want to get this message in the result page and display it in the current page without reloading the page. Since the result page content is saved in data variable I don't know how to select an element which is contained in a variable instead of the current page itself. We can do $("div#result").text() for the current page. But how should I do it for the html content stored in a variable?
Just give your data variable as second parameter to jQuery like this:
$('#result', data).text()
Not tested but should work.
Update:
I don't know why but this will only work when your element you want to find is wrapped with another element within your body tag. See this fiddle: http://jsfiddle.net/xf32L5uj/
I have 2 HTML files like this.
parent.html
<form method='get' action=''>
<input type='hidden' name='something'>
<input type='button' name='submit' value='Submit' onclick='newwindow=window.open("child.html","popup","height=150,width=200");'>
</form>
child.html
Enter Something Here<br />
<input type='text' name='somethingelse'>
<input type='button' name='submit' value='OK'>
When the user clicks on Submit button in parent, a new popup window will show up and ask him to enter something.
Can anybody please tell me how can I transfer the value of input[somethingelse] from
child to input[something] and submit the form in parent after the user has clicked OK?
You can get a reference to the form in the parent window via window.opener.document, like this:
var form = window.opener.document.getElementById("theFormID");
(You'd give the form an ID, although there are other ways to do it.)
Then you can access the fields in that form, and of course set their .value property, and you can submit the form via its .submit() function.
But fair warning: Users don't like pop-ups. If there's any way you can just incorporate the other field into the form, I would recommend that instead.
Here's a full example: Live Copy | Source | Source of popup
The main page:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form id="theForm" action="" method="GET">
<input type="text" id="theField" name="theField">
<br><input type="submit" value="Send" onclick="window.open('/urawum/1','','height=400,width=400'); return false;">
</form>
</body>
</html>
The popup:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Please fill in more information:</p>
<input type="text" id="thePopupField">
<br><input type="button" value="Send Form" onclick="doTheSubmit();">
<script>
function doTheSubmit() {
var doc = window.opener.document,
theForm = doc.getElementById("theForm"),
theField = doc.getElementById("theField");
theField.value = document.getElementById("thePopupField").value;
window.close();
theForm.submit();
}
</script>
</body>
</html>
If you run that, you find that when you click Send on the main page, it does the popup. If you fill in a value in the popup and click Send Form, the popup disappears and the form is submitted. You can tell the form is submitted with the value because I've used method="GET" and so you can see theField=yourValue in the query string in the URL of the resulting page. For instance, if you type "my value" into the popup, you'll see the URL http://jsbin.com/abiviq/1?theField=my+value in the main page after the form submit. (But your form presumably uses POST rather than GET, I'm just using GET to demonstrate.)
$('#popupformid').submit(function() {
var myVar = $('#somethingelseid').val();
$('input:text.something').val(myVar);
document.getElementById("formID").submit();
});
I'm trying to use http://www.asual.com/jquery/address/ for history management, this works absolutely fine when we work on "a" tags, but now I've search module which trigger when I click on a search button and I'm trying to include the search text in the address(and also the page number), so that when the user uses the backs button he/she can also see what search they have done previously. Any help will be greatly appreciated.
Edited:
Reference - http://www.asual.com/jquery/address/
I'm building AJAX application, so all the modules are loaded using AJAX and to keep a track of the history I'm using: http://www.asual.com/jquery/address/, till now all the links are "a" href's which I'm coding as Public
Now, I'm working on the search page which has a search TextBox and a searchButton, so when the user enters in the text box and clicks on searchButton, the url has to be adjusted accordingly so when the user directly enters (or comes to that URL using BACK button), the search results should be displayed, this is similar to the "SEARCH MAIL" button in gmail, please note how the url is changing, here I'm also trying to achieve the same thing.
Hope it is clear, thanks.
Regards
I bealive you're looking for something like in this example.
Simplified example:
<html>
<head>
<title>jQuery Address Form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.address.js"></script>
<script type="text/javascript">
$.address.init(function(event) {
$('form').address();
})
.change(function(e) {
// for anything that isn't homepage
if (e.value != '/') {
// load results for url in e.value, for example:
$("#results").load(e.value);
}
})
</script>
</head>
<body>
<div class="page">
<h1>jQuery Address Form</h1>
<form action="find.php" method="get">
<label for="input">Query</label><br>
<input id="input" name="input" type="text" value="" size="60"/>
<input id="submit" name="submit" type="submit" value="Submit"/>
</form>
<div id="results">
</div>
</div>
</body>
</html>
When you submit the form, the url is changing. The change event is then handled by my code. e.value is a url in this example, so when the url is changing we're trying to load search results into the #results div.
The same change handler is used when user navigates using the "back" button in his/her browser.
There exists whole jQuery plugin for that, called jQuery BBQ: Back Button & Query Library. Try out demo, and find if that is what you need.