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();
});
Related
Firefox stops displaying the default constraint-violation message of the form if the user clicks multiple time (seems 3) on the input elements or on the submit button.
For example the following input field is marked as required: if I leave it empty and click the submit button once, firefox correctly displays the error message. If I click the button or the input field two more times, firefox stops showing the message and starts just focusing on the field that makes the validity check fail. As an additional problem, the browser will no longer show the error message until the page is reloaded. I tried Firefox 91.0.2 and 92.0 (just downloaded, latest version).
The behaviour I want is the one of Chrome, IE and Safari: if i click the button and the validity check fails, then the error message is shown no matters how many time i click. Is there any way to force this behaviour in FF?
Ps: the submit button is actually of type button, not submit. I need it to be a button but I tried also with type=submit and the behaviour did not change.
function mySubmit(formId){
let form = document.getElementById(formId);
if(form.reportValidity()) {
window.alert("submit");
form.reset();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button onclick="mySubmit('myForm')" type="button" class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
You code seams kind of complicated. If you have to perform some JS code on submit of the form I will suggest an event listener like this:
document.forms.myForm.addEventListener('submit', e => {
alert('submit');
e.target.reset();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
If you need to stop the submit action and/or listen for the invalid event on the input element (and display your own message to the user).
document.forms.myForm.addEventListener('submit', e => {
e.preventDefault();
alert('submit');
e.target.reset();
});
document.forms.myForm.name.addEventListener('invalid', e => {
e.preventDefault();
alert('invalid');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
How to open this input file when opening the page? This way when I select it already does the submit, but how to make it open when starting the page?
<html>
<head>
<title>Basic Upload</title>
</head>
<body>
<script>
function submeter(){
document.formulario.submit();
}
</script>
<form method="POST" action="#" name="formulario" enctype="multipart/form-data">
<input id="up" type="file" onchange="submeter()" name="fileUpload" accept="image/*">
</form>
</body>
</html>
Outside of user-initiated events (such as click events, see: Event.isTrusted) you cannot programmatically open a file input. Therefore, you cannot open it on page load.
There is no workaround.
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
I am trying to hack a page that requires a "username" and "password". I have created a form and I think it looks good;
<form action="http://hackmefff.co/login">
<input type="hidden" name = "username" value="hacker">
<input type="hidden" name = "password" value="b678jk">
</form>
People have told me that my form looks good and that I need to create a request in javascript. I don't know how to create one because I just started learning javascript yesterday. I have searched on how to create a request of submit, and all I see is functions that look like they are making a form, which I already have, so am confused. How would I send a request to log me into a website, assuming that url exists, and both name and password are correct.
EDIT:
I have formatted the code below because I don't want the page to show any text at all even though am logged in, it should just be blank. But a test page shows that I didn't get logged in;
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>Test page for your custom form</title>
<script type="text/javascript">
function submitform()
{
document.yourform.submit();
}
</script>
</head>
<body>
<form name="yourform" action="http://hackmefff.co/login">
<input type="hidden" name = "username" value="hacker">
<input type="hidden" name = "password" value="b678jk">
</form>
<input type='hidden' name='query' />
</body>
</html>
<html>
<head>
<title>Test page for your custom form</title>
<script type="text/javascript">
function submitform()
{
document.yourform.submit();
}
</script>
</head>
<body>
<form name="yourform" action="http://hackmefff.co/login" method="post">
<input type="hidden" name = "username" value="hacker">
<input type="hidden" name = "password" value="b678jk">
</form>
Search: <input type='text' name='query' />
Login
</body>
</html>
Note that I have modified your form slightly to include a name so that we can reference it from the JavaScript function.
This answer of course assumes that you have to use JavaScript.
You don't need Javascript for that, just add a submit-button to your form:
<input type="submit" value="Submit">
Take a look at this html:
<head>
<title>Test page</title>
<script type="text/javascript">
function submitForm() {
document.getElementById("form2").submit();
}
</script>
</head>
<body>
<form id="form1" name="form1">
<input type="hidden" name="test1" value="test" />
<form id="form2" name="form2" action="http://google.com">
<input type="hidden" name="test2" value="nothing" />
</form>
</form>
Submit
</body>
Thing I want to do is submitting form2 located within form1 with a javascript. I want this to be done by submitForm() function. The problem is that it doesn't appear to work. I'm using FireFox for testing and always get an error which says that it's undefined. Does anybody know how I can get it working? Thanks in advance!
You can't nest HTML forms like that. End form1 before starting form2. Duplicate the hidden input if necessary.
Well, given that you have no element with the ID "xxx", I could see where your script might have some difficulty. Perhaps you mean "form2"?