My code: <form method='post' target='_blank'... I have multiple of these forms on my page with the same action attribute.
Problem: Only one popup ever opens. If a second form is submitted, it replaces the first form's popup.
How do I get a new popup for each form? (Preferably without changing the action attribute.)
EDIT: I tried adding a random number (Math.floor(Math.random()*1000)) as a null parameter in the action url. This still opens in the same popup.
NOTE: There is no JS being used. However, I'd accept a JS answer.
Complete working code :-
<html>
<head>
<script>
function popup(form) {
var popup_id = 'popup_'+form.id
window.open(form.action, popup_id, 'width=400,height=400,resizeable,scrollbars');
form.target = popup_id;
}
</script>
</head>
<body>
<form id="form1" action="page.php" onsubmit="popup(this); return false;">
<input type="submit" value="save" />
</form>
<form id="form2" action="page.php" onsubmit="popup(this);return false;">
<input type="submit" value="save" />
</form>
</body>
</html>
Related
I have a page called CreateForm
On my CreateForm page, after the customer enters the data, they can preview their entry before I save it to the database. Their Preview is a Razor component and contains an html button to submit.
The problem I have is if a customer is click happy, he may click the button multiple times creating multiple copies. Therefore I want to disable the button after the first click. How can I grab the button's handle?
From the CreateForm razor page, I have this embeded Razor component
<CustomerPreviewRequest HeadingToShow="#HeadingToShowPreviewCustomerScreen"
onBack="MoveToPreviousPage"
CurrentCustomerSubmission="#_model">
</CustomerPreviewRequest>
inside the CustomerPreviewRequest, here's how I define the button
<button aria-label="Submit Request." type="submit" class="login100-form-btn" style="background-color:#1a2b57"
tabindex="0" id="submitForm">
Submit Request
</button>
Do you only want the customer to submit the data once and then disable the submit button? You can take a look at this simple demo:
View:
<p style="text-align:center">
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="text" /><br />
<input type="submit" class="submitBtn" value="Submit Requestt" />
</form>
</p>
<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
</script>
Result:
<html>
<head>
<script>
function myFunction() {
location.replace("https://www.w3schools.com")
}
</script>
</head>
<body>
<form action="/action_page.php">
<input type="text" name="username" pattern="[a-zA_Z].{7,}" title="Unsuccessful Login, Username must contain at least one integer and one letter, and at least 7 or more characters">
<input type="button" name="B1" value="Submit" onclick="myFunction()">
</form>
</body>
Hi, for some reason when I click the submit button, the error does not appear and it just goes directly to the page. How do I make the program check the validation and when it is ok, redirect to a new page??
I would suggest you to go by this approach
create a test.php file with the following code :
<form method="post">
Username: <input type="username" name="username" pattern="(?=.*\d)(?=.*[a-z]).{7,}" title="Must contain at least one integer and one letter, and at least 7 or more characters">
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
<?php
if (isset($_POST['submit'])) { ?>
<script language="javascript" type="text/javascript">
window.location = 'your location';
</script>
<?php
}
?>
This will give you the desired functionality.
NOTE: for this to run, you will need to install xampp or wamp if you are running windows and lamp if you are running linux.
So here's the answer according to your updated code :
<html>
<head>
<script>
function myFunction() {
window.location.href = 'https://www.w3schools.com';
return false;
}
</script>
</head>
<body>
<form onsubmit="return myFunction()">
<input type="text" name="username" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+){5,}" title="Login Unsuccessful. Username must contain at least one integer and one character, and should be atleast 5 or more characters long" required>
<input type="submit" >
</form>
</body>
</html>
The return false; statement in myFunction is very important here. It will return a false to the obsubmit event which will prevent the form from being submitted. If you remove return false; statement then also window.location will work but it will appear as if it's not working as the form will get submitted and you will see the same page rather than a redirection to another page.
I have added the onsubmit event which will call the function only when all the inputs are valid
This is my form code:
<form enctype="multipart/form-data" name="upload-file" method="post" action="http://example.com/upload">
<div class="formi">
<input id="text-link-input" type="text" name="url" class="link_form" value="your link" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input type="submit" value="OK" class="link_but" />
</div>
<div class="upl" title="Upload"><img src="http://example.com/example.png" alt="" style="vertical-align:middle;"/>Upload
<input type="file" name="file" size="1" class="up" onchange = "document.getElementById('text-link-input').value = String(this.value).replace('C:\\fakepath\\','')"/>
</div>
</form>
Now, I want to redirect the submitter to any page of my choice after the form data has been submitted, but the action resides on another website where I cannot edit. Is it possible to redirect the user to any page after he has submitted the data to that site?
From some Googling, this is what I have found. Adding this to form code:
onSubmit=window.location='http://google.com'
This didnt work. Maybe I didnt implement it correctly? This is what I did:
<form enctype="multipart/form-data" name="upload-file" method="post" onSubmit=window.location='http://google.com' action="http://example.com/upload">
Another person says adding a hidden field should work:
<input type="hidden" name="redirect" value="http://your.host/to/file.html">
How should I implement this is my code?
Suggestions and help awaited...
Try this Javascript (jquery) code. Its an ajax request to an external URL. Use the callback function to fire any code:
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('http://example.com/upload', function() {
window.location = 'http://google.com';
});
return false;
});
});
</script>
I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
I have a HTML form and on that I have to enter a text value on validating the text value the next page will be loaded
here is the code below describing my problem
<form action="http://abcd.com/sample/new/1" method="POST">
<p>
<input type="text" name="**answer**" onkeyup="valid(this)" onblur="valid(this)"/>
</p>
<p><input type="submit" name="submit" value="check" /></p>
</form>
I need the text value for "answer" so that it proceeds to next page say example "http://abcd.com/sample/new/2"
You can use JQuery to do this:
$("#YOURTEXTBOX").val();
Remember you have to put an id for your textbox for it to work.
Then you can use if statement to do the validation on client side.
You can also use server side code to do so.
I am not sure what you are expecting,
Looks like a small html validation.
You can use javascript for validation.
Here is small example :
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Let me know if you need anything more thatn this...
try this : W3Schools