Submit a Form without redirecting - javascript

I want to submit a form without redirecting page. Form is submitted to third party so i can't make changes in php.
What I want to do is:-
Submit for without visiting third party page.
After successful submit show alert.
Current I am using hidden iframe and form target to hidden iframe but I am not satisfied. Is there is any better way to do this using javascript or jquery.
My Form:-
<form target="iframe" action="http://www.example.com" type="post" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
My Iframe:-
<iframe style="display:none" id="iframe"></iframe>

You need to use Ajax for that kind of request.
Please look at some tutorials, this for example http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html

Change the iframes id attribute to name:
<iframe style="display:none" name="iframe"></iframe>

You can use jquery here
<form action="http://www.example.com" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
and after in jquery you write like
// bind to the form's submit event
$('#myform').submit(function() {
alert("ok");
return true;
});

Consider using a PHP proxy.
Copy the script from here to anywhere you like on your own server.
Modify line 11 so that it points to the URL you are posting to at the moment.
// Destination URL: Where this proxy leads to.
$destinationURL = 'http://www.otherdomain.com/backend.php';
Then in your ajax script, change the URL to your proxy.php script.

Related

prevent redirect on form submit in HTML

I made a form in html that makes login request to this website: https://kintai.jinjer.biz/sign_in
Here is my html code:
<form method="post" class= "login-form" action="https://kintai.jinjer.biz/v1/sign_in">
<input class="login-input--text jcompanycode" id="company_code" name="company_code" type="hidden" value="1234" />
<input class="jemail login-input--text" name="email" type="hidden" value="1234" />
<input class="jpassword login-input--text" name="password" placeholder="パスワード" type="hidden" value="1234" />
<input type="submit" value= "submit" id= "submit" />
</form>
I wrote a javascript code to prevent redirect on submission of form.
<script>
$(document).ready(function(){
$('.login-form').submit(function(e){
e.preventDefault();
});
});
I want to prevent redirect on form submission.
However, when i add the javascript, the post request doesn't work.
Any ideas to send form data to server while remaining on current html page?
Note: please don't tell me to use ajax or jquery to make the login request.
I tried making post request using ajx/jquery a lot of times but it doesn't work. Perhaps due to same origin policy I presume.
HTML form redirect page is its feature.
If you want to avoid, please try to using formdata with ajax.
MDN FromData
MDN Fetch with FormData

Redirect to user defined location

I'm trying to write a form in which user writes a location and the page redirects there after submit. How can I accomplish that? I have problem to find out how to put something to action="" when I do not know the value yet. Something with this logic:
<form action="how-to-get-this-value">
<input name="location" type="text">
<input name="submit" type="submit">
</form>
I can use whatever I want to do this (javascript, css, php...).
You don't need to make a <form> to do this. Forms are used more often for processing data. Instead, you can use Javascript. There are many ways to do this, but if you want to use a <form>, the easiest way is to redirect the user when they submit the form as follows:
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<form id="form">
<input id="url" type="text">
<input type="submit" onClick="red(); return false" value="Submit">
</form>
Of course, you would probably want to add verification methods to make sure the user gets to where they want to get (ie typing "google.com" would take them to "https://www.google.com/" instead of "yourdomain.com/google.com/").
Alternatively, you can simply remove the <form> tags, and it will work the same.
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<input id="url" type="text">
<input type="submit" onClick="red()" value="Submit">
There are a lot of good answers for this question. But I advise you to do the following...
Create a HTML form like this:
Them submit it to the php page with this. This can also be the same page.

why this dijit.form doesnt submit?

Why this form wont submit?
<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="Cart.php" method="post">
<input type="text" name="searchName"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="searchName" />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioOne" value="full"/> <label for="radioOne">Full</label>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioTwo" value="short"/> <label for="radioTwo">Short</label>
Data Select
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="2">Data1</option>
<option value="1">Data2</option>
</select>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>
Some javascript too:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit/layout/AccordionContainer");
dojo.require("dijit/layout/BorderContainer");
dojo.require("dijit/layout/ContentPane");
</script>
Maybe its a stupid question, but ive been looking at it several hours and still cant figure it out.
Thanks in advance
I'm not sure what do you meet by won't submit. I moved your code into JS Bin (http://jsbin.com/iziwen/1/edit) and it works fine:
If you experience problems on the server side I suggest you change encType="multipart/form-data" to enctype="application/x-www-form-urlencoded" (or do not use it at all as it is the default value) - you do not need multipart/form-data, you are not sending files (see more here).
If this won't help, please specify won't submit more precisely.
EDIT: I do not use dijit/form/Form submit functionality, I just grab form data and send those via XHR to my web service, but I had a look at how submit functionality works and it seems so you need an <iframe> to use submit functionality. So this is what I changed:
A. Form definition - target:"formSubmitIframe" points to iframe id:
<form
id="myForm"
data-dojo-id="myForm"
data-dojo-type="dijit/form/Form"
data-dojo-props="action:'Cart.php', method:'post', target:'formSubmitIframe'"
>
B. Added iframe:
<iframe name="formSubmitIframe" src="about:blank"></iframe>
Once all works for you add style="display:none;" to iframe to hide it.
See it in action in JS Bin: http://jsbin.com/iziwen/7/edit
N.B.: I do not recommend submitting a form this way. If you do not need to go cross-domain or sending files, simply get form data via var data = dijit.byId("myForm").get("value"), so you will have form data in JSON and then send them up via dojo/xhr or dojo/request (for dojo 1.8+).
Also dojo/xhr is capable to send form just by providing a form id to it - here is a nice example: http://livedocs.dojotoolkit.org/dojo/xhr

How do you do the action for a form be null

When defining a <form>, it is possible to set the action tag.
How can I set it to null (#), so that it will not actually change the page?
A bit hard to understand but I think what you want is this:
<form action="#">
<!-- code here -->
</form>
A <form> tag without an action attribute will send the data to the page it was submitted from.
You only need to use the action attribute if you're sending the form data to a different page.
<form method="GET">
<input type="text" size="10" name="input" value="default">
<input type="submit" value="Submit">
</form>
(NOTE: This does not work on the file:/// protocol handler.)
For anyone else reading this, it is usually better to have your input or button object return false; when it's clicked. This will make sure the form doesn't follow an action, and instead stays on the page. It would be similar conceptually to what is being asked, as in it will stay on the current page.
This let's you handle submit options in javascript.
Here's an example of how you would submit an email address to your API route, alerting the user what is returned by the API call:
HTML:
<form>
<input type="text" name="email">
<button onclick="do_something(); return false;"
</form>
JAVASCRIPT:
var do_something = function(){
$.ajax({
url: "http://myapi.com/route",
type: 'POST',
data: $('form').serialize(),
context: document.body
}).done(function(data) {
alert(data);
});
};
You can set form action to null in the following way. This worked for me.
< form action ='' >
Try This
<form method="dialog">
<input type="text" size="10" name="input" value="default">
<input type="submit" value="Submit">
</form>

a href tag to place a link

I have to place a link to a webpage through an <a> .The webpage link contains some request parameters and I don't want to send it across through the browser directly (meaning I want to use something similar to POST method of FORM).
<a href="www.abc.do?a=0&b=1&c=1>abc</a>
I am using this inside a jsp page and is there a way to post it through javascript or any other way where I don't pass the request parameters through the url?
You can use links to submit hidden forms, if that's what you're asking.
Click Me
<form id="secretData" method="post" action="foo.php" style="display:none">
<input type="hidden" name="foo" value="bar" />
</form>
<script type="text/javascript">
function submitForm(formID) {
document.getElementById(formID).submit();
}
</script>
Use the form tag with hidden fields to submit your data:
GO !!
<form name="frm" action="www.abc.do" method="post">
<input type="hidden" value="your-data" name="whatever">
<input type="hidden" value="your-data" name="whatever">
<input type="hidden" value="your-data" name="whatever">
</form>
You can use AJAX for that. For example, with jQuery, you can use the post function:
clickMe
<script type="text/javascript">
$(function(){
$("#myMagicLink").click(function(){
$.post("www.abc.do", {"a":0, "b":1, "c":1});
});
});

Categories