Unbinding form submit to iframe with jQuery - javascript

I have a PHP page with multiple forms, some of which submit to an iframe (separate iframe for each form) to allow for ajax-like file uploads. I don't want the user to have to click a "Submit" button after selecting each file, so I am submitting the form using jQuery's .submit() function inside of a .change() event on the file input element.
The individual file uploads work fine.
However, after all the individual files are submitted, the user must click on a final button that acknowledges they have reviewed the form data as displayed. This last button is just an independent button. It is not a submit button, and it is not associated with any form. When the page initially loads, this button works fine.
However, once the .submit() function is called for the file uploads, the final button seems to be bound to the other form's action.
Roughly, the structure of the page is as follows:
<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
<div id="finalSelect">
<input type="file" name="finalDraft" id="finalDraft" value="file" />
<input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
<div id="signSelect">
<input type="file" name="signPage" id="signPage" value="file" />
<input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<button type="button" id="mainSubmitButton">Submit</button>
the jQuery is as follows:
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
});
$("#finalDraft").change(function(){
$("#finalForm").submit();
}
after doing a final draft submit, when I click on the mainSubmitButton it loads uploadFile.php.
Does anybody know why this is happening, and what I can do to correct the problem?
Thanks in advance for your help.
Kate

Return "false" from the button click to cancel any default behaviour.
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
return false;
});

the reason for this, I think is because the element button you used is acting as a submit button, not as you intended it to act - like a regular button. Just switch it to
<input type="button">
and you should be all set.
check out http://reference.sitepoint.com/html/button for more info
Reference implementation.

Related

how to make the file upload selection block

I currently want the user to upload a file for some processing.
So, I have a form element as follows:
<form action="{{ url_for('test') }}" method="post" onSubmit="return submitDocument()">
<button class="ui left floated positive submit button" id="upload-button" type="submit">Upload Document</button>
</form>
There is a corresponding file input object as:
<input type="file" (change)="fileEvent($event)" class="inputfile" id="embedfileinput" accept="image/*, application/pdf, application/msword" style="display:none"/>
and then I have the javascript as:
function showProcessing() {
$('#processing').dimmer('show');
return true;
}
function submitDocument() {
document.getElementById('embedfileinput').click();
showProcessing();
return true;
}
The problem is that as soon as I click the upload button, the form gets submitted. What I would like to do is trigger the submission task after the file has been selected.
Is there a way to make this file selection blocking?
A few things. As soon as you click the submit button and the button is inside the form tag, your form is gonna be submitted. That's default behavior. To prevent it, put a onclick="clickListener(event)" in your button and call event.preventDefault() to avoid this behaviour. Second, doing so will NOT trigger a onsubmit event in you form. So there's no sense having such attribute in the form. Try this:
<form action="{{ url_for('test') }}" method="post">
<button class="ui left floated positive submit button" id="upload-button" type="submit" onclick="clickListener(event)">Upload Document</button>
</form>
in your javascript:
function clickListener(e) {
// call your custom code here
e.preventDefault();
}
Note that I removed onsubmit attibute from the form tag.
You can always call form.submit() to submit manually.
More details https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Jquery `.click` Submits all forms

I have a form:
<form class=" id="form-edit_usr" action="edit_usr.php" method="post" enctype="multipart/form-data">
Inside of that form i have another form:
<button id="usrPhoto" class="btn">
<img src="" width='100' height='140'>
</button>
<form id="uploadForm" method="post">
<input type="file" id="uploadPhoto" name="uploadPhoto" data-usr="" style="display: none;"/>
</form>
To the "main" for i have a "submit button"
<input type="submit" class="btn" value="Update" />
</form>
With Jquery i control the file input:
$('#usrPhoto').on('click', function(){
//Check if user is selected
selectedUsr = $('#choosen_usr_email').val();
if(selectedUsr){
//If user is selected open file dialog
$("#uploadPhoto").click();
}
})
My problem is when i press the #userPhoto element,
#uploadPhoto shall open file dialog, but it also submits my main form.
How can i prevent the .click() from submitting all forms/Buttons?
By the HTML specification. You cannot have a form inside another form.
Check your resulting html in your browser's inspector and you will see the "inner form" is missing.
You could break them in 2 separate forms or use pure JS to upload the file.
There's a question (and answers) about it here.
Maybe you can using the jQuery submit function
$('.button').on('click',function(){
$('.formID').submit();
});

Best way to form submission without using form action in JavaScript

I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.
If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>
I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/
You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}

Submit form to another page (which is different from the page used in ACTION)

I have a form like this:
index.php
<form method="post" action="send.php">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
So, if I enter something in textarea and clicked on "Send", it is submitted to "send.php" page. But I want to include another button for previewing it. That is, when this button is clicked, the above form is submitted to "preview.php" which will be opened in a new blank window/tab (original page ie. index.php will be there intact). This is to display a preview of the message, that the user is going to send.
I do not know how to do this.
Use Javascript to temporarily change the action and target:
<form method="post" action="send.php" id="idOfForm">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
<button onclick="doPreview();">Preview</button>
<script type="text/javascript">
function doPreview()
{
form=document.getElementById('idOfForm');
form.target='_blank';
form.action='preview.php';
form.submit();
form.action='send.php';
form.target='';
}
</script>
There is now an attribute for the submit input that handles this:
<input type="submit" formaction=”differentThanNormalAction.php”>
Give your form an ID (form1). The action of the current form can be controlled like this:
function setPreview() {
$('#form1').attr('target','_blank')
$('#form1').attr('action','http://yourpreviewurl.php')
$('#form1').submit()
}
function setSubmit() {
$('#form1').attr('target','')
$('#form1').attr('action','http://yourposturl.php')
$('#form1').submit()
}
Have two buttons, both type="button", one to call setPreview and another to call setSubmit
You can use JavaScript to change the action of the form when the button is clicked and then submit it.
Or simply submit the form via AJAX and then redirect after you get a response.
<form onreturn="someJavascriptFunction()" action="" method="">
creating a js function able to open this preview page

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George
You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks
<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.
If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>
<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.

Categories

Resources