I am working on a web application where I need to send the value from one form to more than one page.
My form is simple :
<form method="post">
<input type="text" name="name" value="">
...
</form>
I want the values from the form to be sent to :
'page1.php' which will replace the actual page containing the form displaying the message : data saved
'page2.php' which will open when I click the submit button to render the data as a PDF file
The problem is that I can only specify only one target using the action attribute of the form.
Anyone can helps ? Thanks in advance.
Could I use JavaScript or jQuery or other ?
You can do it using JavaScript and jQuery for example. The easiest way is send two ajax requests:
$('form').submit(function() {
$.ajax({
async: false,
method: 'POST',
url: 'page2.php',
data: $( this ).serialize(),
success: function() {
window.open("http://www.stackoverflow.com"); //this page will be open in new tab
}
});
$.ajax({
async: false,
method: 'POST',
url: 'page1.php',
data: $( this ).serialize(),
success: function() {
window.location.href = "http://stackoverflow.com"; //redirect to this page
}
});
});
You could use Jquery.post() with different URLs and the same data.
More about the usage is here: https://api.jquery.com/jquery.post/
Related
I'm using php and jquery and trying to get a notification to appear after a user submits a form. I'm using ajax for the form submission so that the page does not reload. I want the notification to contain some of the information from the form so they know if it has been entered already. The notification is just a hidden div that is shown when the ajax data is sent. Is there any PHP statements or something in javascript or JQuery that can do this?
Use ajax like this:
ajaxCall("formHandler.php", yourForm);
function ajaxCall(url, postData){
$.ajax(url, {
dataType: "json",
method: "post",
data: {postData}
success: function(data) {
// your Code, example:
document.getElementById("yourDIV").style.display="block";
});
return true;
}
Just a simple problem, I have used ajax to alert data which is echoed in PHP page. It is working fine except href link. a href link can't return, it returns whole code. For example, this is ajax code.
form.html
$("#ceb").submit(function(event){
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'post.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(returndata){
alert(returndata);
}
});
return false;
});
And this is php page post.php
echo "Thanks!, Please visit <a href='next.php'>this</a> page";
In alert window, it displays whole code <a href='next.php'>this</a> instead of link. I have tried assigning href link in php variable, but it doesn't work.
You can only display text in an alert function.
If you just want to redirect then you can use window.confirm
if (window.confirm('Clicking "ok" will redirect you . Are you Sure ? '))
{
window.location.href='https://stackoverflow.com/';
};
or as ankit suggested you can use custom plugins like bootstrap modals or jquery ui dialog
jQuery Example
The alert() dialog is not rendered in HTML, and thus the HTML you have embedded is meaningless.
You'd need to use a custom model to achieve that
I have a page (form.php) that is called via ajax when a user group is clicked in main page. form.php contains form fields (like date picker etc and other fields as per usertype selection in main page.
My issue is the when I click on any user type in main page form.php page load using ajax but date picker in this form is not working. I check all path and sequence but its not working.
here is my code
$.ajax({
type: "GET",
url: "services/forms.php",
data: {UserType: UserType},
success: function(data){
$('#assessmentform').html(data);
}
});
$.ajax({
type: "GET",
url: "/services/forms.php",
data: {'UserType': UserType},
success: function(data){
$('#assessmentform').html(data);
}
});
try this if this file in outside the services folder
I have a multi-tab feature incorporated with ajax calls.
show.html.erb
<a href="#tabs-2A<%= id %>"> # dynamically generated tabs within loop
$.ajax({
type: "GET",
url: "/controller1/method1",
dataType: "html",
data: { },
success: function (html) {
$(element).find("#id").append(html);
}
});
OnClick on any these tabs triggers ajax call. note: I have used append above.
partial which is getting appended, similar to actual one
<td><input type="checkbox" data-some_id="<%= #object.id %>", id="dots"/></td>
JS.
$('body').on("click", "#dots", function(){
$.ajax({
var some_id = $(".dot-checked").data('some_id');
type: "GET",
url: "/controller1/method2",
dataType: "json",
.....
});
});
So you can see there is ajax call within this partial.
Everything works fine.
But,
I'm running into multiple requests issue(onclick for checkbox), when you click on a same tab multiple times or even if we click on other tabs.
It's because of script that is getting appended every time for partial page request.
Number of duplicate requests(/controller1/method2) is equal to number of times tab is clicked.
How do I get over this?
If it's not clear, feel free to comment.
One way to solve this issue is to prevent the checkbox from being clicked twice when an AJAX call is in progress. Since you're working with a checkbox, it's usually better to use the change event handler, rather than click. This method will disable the checkbox until the AJAX call is complete.
$("#dots").on("change", function(){
$(this).prop('disabled', true); // disable on click/change
$.ajax({
type: "GET",
url: "controller/method",
dataType: "json",
complete: function() {
$('#dots').prop('disabled', false); // re-enable after AJAX is complete
}
});
});
That is ,I want to keep the original page while POST a form.
You could simply use the target attribute of the form:
<form method="post" target="_blank" action="...">
Note that even though this will work in all major browsers, it is deprecated and your page will not validate as per W3C standards.
There are two ways you can accomplish this. If the page can be reloaded, just post the form to the page you are currently on. If you want to submit the form with AJAX (no page reload), then a javascript library such as jQuery is recommended (to save you the trouble of manually constructing an XHR request. Here is an example of ajax with jQuery:
window.onload = function(){
$('.image').click(function(){
var image_id = $(this).attr('id');
$.ajax({
type: "POST",
url: "/ajaxpage.php",
data: {
id:image_id
}
success: function(data){
alert(data);
},
failure: function(){
alert('failed');
}
});
});
}
From the page you call here, you can echo a response that will be handled by the ajax success handler.