Lets say I have a web page with an iframe which contains a form. I want to set a value in a hidden field when the form has been submitted. How can I trigger an event in the main page when the form is submitted?
This is a simplified version of what I'm trying to do:
<!DOCTYPE html>
<html>
<head>
<title>TEST IFRAME UPLOAD</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// Pseudo code for what I want to do
// (this of course doesn't work because target is inside iframe:
jQuery(document).ready(function() {
$("#file_upload_form").submit(function() {
$("input[name='fileuploaded']").val(1);
return true;
});
});
</script>
</head>
<body>
<form id="mainform" action="processform" method="post">
<input type="hidden" name="fileuploaded" value="">
<!-- more form fields here -->
</form>
<iframe id="upload-iframe">
<form enctype="multipart/form-data" id="file_upload_form" action="processfileupload" method="post">
Select an image to upload:<br/>
<input type="file" name="file">
<input type="submit" name="submit" class="submit" value="Upload">
</form>
</iframe>
</body>
</html>
Try this,
$('#upload-iframe').load(function() {
$(this).contents().find('#file_upload_form').submit(function() {
$("input[name='fileuploaded']").val("some value"); // updated
return true; //return false prevents submit
});
});
Refered from How can i bind an event to an element inside a local iframe?
Can be possible duplicate of Selecting a form which is in an iframe using jQuery
Related
I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>
Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">
if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>
This code works fine until I put form action.. When I keep that submit in a form, this code does not work. How can i replace that div after form submit. Thanks.
You can try this one. Hope it helps!
$(document).ready(function(){
$("#submit").click(function(event){
$("#p").replaceWith($("#p1").text());
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
you need text method for that .
you were removing entire element before . you need to remove only text value
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<input type="submit" id="submit" name="submit" value="Search"/>
</body>
</html>
Specify what to replace it with:
$(this).replaceWith("<div><p>Replacement</p></div>");
Form submission needs to be done using AJAX then only you can achieve this which you want to do.
Otherwise the form will submit and page will refresh which will result to re initialization of script.
As Pooojaaqaa and Rayon mention the when the action attribute is set on the form tag, the form is submitted and the page is reloaded (even if action="#"). To catch this action you need to catch the form's submit event, not the button's click event. In the submit event handler you need to call preventDefault() on the event object passed into the handling function like below.
<form id="frmSearch" action="#" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
$("#frmSearch").submit(function(ev){
ev.preventDefault();
$("#p").replaceWith($("#p1").text());
});
i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>
You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS
First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.
I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});
<html>
<head>
<title>Untitled</title>
</head>
<script>
document.onsubmit = formSubmitted;
function formSubmitted() {
alert("formSubmitted");
}
function clickAction() {
alert("clickAction");
var aForm = document.forms['form2'];
aForm.action = "#";
aForm.submit();
}
</script>
<body>
<form name="form1">
<input type="submit" value="Direct Submit">
</form>
<br>
<form name="form2" action="#$">
<input type="button" value="Onclick Submit" Onclick="clickAction();">
</form>
</body>
</html>
This is my code, I'm detecting form submit using document.onsubmit = formSubmitted;
alert is working.
but its not work when I tried to submit the form via javascript(click "Onclick Submit" button)
You need to attach that to a particular form.
document.form1.onsubmit = formSubmitted;
document.form2.onsubmit = formSubmitted;
That isn't possible. You'll need to extend your function clickAction to notify you when it has submitted the form.