jQuery Submit form if change input value - javascript

I'm used jquery.form plugin,
it's working and good
but when change input value.. it's submitted good! but redirect me to my uploader.php file, i don't want redirect me, i need to get result in div.result,
to understand me, please look to my code:
HTML
<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="uploader" value="" draggable="true">
<input name="submit" type="submit" class="submit" value="Upload">
<div class="result"></div>
</form>
uploader.php file:
<?php
if( isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){
echo 'done!';
}
?>
jQuery code:
jQuery(document).ready(function() {
$('#uploader').change(function(){
$(".result").html('');
$(".result").html('wait..');
$("#uploader").ajaxForm({
target: '.result',
success: function()
{
$('.result').hide().slideDown('fast');
$('#uploader')[0].reset();
},
});
});
});
I need to echo 'done' in .result div, i don't want to redirect me to uploader.php page.

Is it actually doing anything when you change the input value? I mean is it submitting the form? Or does that only happen when you click the submit button?
It seems to me that your script doesn't really do anything. It listens for an onchange event on the form element, but that event, in my experience, is never fired on a <form>. So you just have an HTML form submitting with no aid of script.
On top of that I'm not sure you can submit a multipart/form-data form with script, for security reasons. Maybe I'm wrong about that, but either way, how about using an iframe instead?
<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe">
<input id="file" type="file" name="uploader" value="" draggable="true">
<input name="submit" type="submit" class="submit" value="Upload">
<div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div>
</form>
To be honest I don't know if an onload works on an iframe these days, I haven't tried it in years. Failing that, remove <div class="result"> and the corresponding </div> and put them into the output of uploader.php, along with the animation script.

Working with .ajaxSubmit({})
jQuery(document).ready(function() {
$('#file').change(function() {
$(".result").html('');
$(".result").html('wait..');
$("#uploader").ajaxSubmit({
target: '.result',
success: function()
{
$('.result').hide().slideDown('fast');
$('#uploader')[0].reset();
},
});
});
});
Thanks everybody.

As your form's action is uploader.php so,the page will be redirected to uploader.php after submitting. so you need change action and use ajax to update the div.result.
check these links once.
http://www.formget.com/form-submission-using-ajax-php-and-javascript/
http://blog.teamtreehouse.com/uploading-files-ajax

Related

Firing a form submit when completion is clicked on places autocomplete [duplicate]

I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>

Nothing happens with JavaScript form submission

Can anybody tell me Why I click on button to submit form -> it works, but when I use javascript to auto submit -> it failed ?
I have this form on aaa.com, it submit to bbb.com/result.jsp (another domain)
<form id="myForm" name="myForm " method="post" action="www.bbb.com/result.jsp">
<input name="var01" value="var01 ">
<input name="var02" value="var02 ">
<input type="submit" name="searchButton" value="Search">
</form>
Manually click on Search button, result.jsp works fine.
When I added following script, result.jsp page doesn’t work
<script>
document.getElementById("myForm").submit();
</script>
Your form has id="myForm" but your JavaScript is looking for myform. IDs are case-sensitive.
Changing that makes it work.
As I remember, the HTML id attribute is case-sensitive. You are calling the .submit() method on myform while your form id is myForm.

Can't get jQuery form submit to work

For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>

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

Unbinding form submit to iframe with jQuery

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.

Categories

Resources