Hi, can i ask some help to all experts, I have a form and i want to submit the form via jQuery ajax and i want to open this “to_my_other_page.php” it will open a new window,is this possible?
Thank you in advance.
here is my code
$(function(){
$('#imgbttn').click(function(){
$.ajax({
type: 'post',
data: $('#myform').serialize(),
url:'to_my_other_page.php',
success: function(){
}
});
});
});
Hi jemz,
I have one solution for your problem.
Add a hidden anchor tag like <a id=“nextPage” target=“_blank” href=“to_my_other_page.php”>text</a>
and in
success: function(){
//Add below line, which will call a click event which will open to_my_other_page.php in a new tab
$(“#nextPage”).click();
}
Alternatively you could return the redirect url as part of the response and do this:
$.ajax({
type: "POST",
url: reqUrl,
data: reqBody,
success: function(data) {
window.location.href = data.redirect;
}
});
or even just hard code it into the success function. It all depends what you want to do.
There is a very good discussion of this topic here:
http://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call
hi, pullo, this url:‘to_my_other_page.php’, is a php file that will generate a pdf and i want that the pdf will be show in new window,
doing this will get ‘undefined’
window.location.href = data.redirect;
Thank you in advance 
Hi jemz,
After generation, the PDF will be available at a certain URL, e.g. www.myapp.com/pdf/1/
I would have your PHP script return this url upon successful PDF generation as part of the AJAX response, e.g.
{
"data": [
{"response":"www.myapp.com/pdf/1/"}
]
}
Then you can write:
success: function(data) {
window.location.href = data.redirect;
}
Please be aware though, that some people don’t have a PDF viewer installed/activated in their browser, so you might cause the file to get downloaded instead of viewed.
Hi pullo, can you show me please the upper part of this example code
{
“data”: [
{“response”:“www.myapp.com/pdf/1/”}
]
}
i am confuse. Thank you.
It was just an example of what you might return to your script, so that you are redirected on success.
Let’s put it another way: why do need to use AJAX for this.
Why can’t you set a normal link to (for example) generate-pdf.php and have this script generate a PDF and display the result?
I just want to try using jquery ajax,
Okay, i changed it to this way,and my problem is i could not get the text of the option example the “Manager”.
how can i get the text by using the submit() ?
Thank you in advance.
$('#myimgbttn').click(function(){
$('myform').submit();
});
<form id="myform" method="post" action="to_other_page.php" target="_blank">
<select>
<option value="001">Manager</option>
<option value="0002">Supervisor</option>
<option value="0003">Cashier</option>
</select>
</form>
Hi jemz,
You can’t.
.submit() is a shortcut for .trigger('submit') and is used to programmatically submit a form, not to get text.
What you can do, is set the selected attribute of the required option and have it submit with the form.
Something like this:
$('select option:eq(2)').prop('selected', true)
This will then submit the value of the option to your PHP script.
Hi pullo, so this what you mean?
$('#myimgbttn').click(function(){
$('select option:eq(2)').prop('selected', true);
$('myform').submit();
});
Yeah, that’s what I mean, but I’m struggling to imagine why you would want to do this.
Can you describe what you are trying to do?
Maybe there’s a better way.
Hi pullo, sorry for the late reply…
Okay i will describe i have a form and then inside my form i have <select> textbox and etc…now what i want to do is how am i going to submit the form to get the text of select via post and it will open to the new tab.
the value and text of the select option is requested via ajax,now if i am going to select the Lawyer i want the Lawyer to be post and submitted,…How can i achieve this ?
<form>
<div>
<label>Name</label>
<input type="text">
</div>
<div>
<label>Course</label>
<select name="course" id="course">
<option value="0001">Mechanical Eng</option>
<option value="0002">Nurse</option>
<option value="0003">Teacher</option>
<option value="0004">Policeman</option>
<option value="0005">Lawyer</option>
</select>
</div>
</form>
Thank you in advance.
Well, usually a user will select which ever option is appropriate and submit the form themselves.
If you have a form which a user shouldn’t interact with, then maybe a form is the wrong way to go in this case.
You don’t have to use jQuery’s ajax() function with a form.
You can also use it in conjunction with a click event and submit the data to your PHP script that way.
Could you explain why you need to use a form here.
What is it that you are actually trying to do?
Yes, this form is for the user,the user will select the appropriate option…now the user will submit the form
$('#submitIMg').click(function(){
$('#myformID').submit();
}
but in this code,only value of my select option will be posted but what i want is the text (teacher) on it not the value.
<select >
<option value="001">Teacher</option>
</select>
I already know how to get the selected option because you teach me how on how to get the the selected,something like this
var text=$('#myselectId option:selected').text();
OK, now I understand
It might be a silly question, but is there a reason why you don’t just set the option element’s value attribute to “Teacher”, “Policeman”, “Lawyer” etc?
Do you need the values “0001”, “0002”, “0003” etc. in your PHP script, too?
yes, that’s what i plan to put the teacher in the value,but i think i am going also need the value in my php script later…is there other way ?..if not so, i will just use what you suggested to put the teacher in the value.
You could set a hidden field in the form, then set the value of the hidden field to that of whatever the user has selected in the drop-down.
E.g.
<input type="hidden" id="myHiddenInput" name="jobTitle" value="">
Then:
$("#myForm").on("submit", funtion(){
$("#myHiddenInput").attr("value") = $('#myselectId option:selected').text();
});
I’m not at the PC right now, so I couldn’t test this, but the principle should still work.
Hi pullo, can i ask what is the difference in this code
$("#myForm").on("submit", funtion(){//here you use .on
});
$("#myForm").submit(funtion(){
});
is there difference ?
In this context .on() is synonymous with .click(), as we haven’t specified a selector.
So, it doesn’t matter which one you use.
However, if you have a dynamically generated element (for example coming from an AJAX call), you can use on to “delegate” the click event using a selector argument.
This replaces .live() in the latest jQuery.
E.g. this:
$(selector).live("click", function() {
...
});
has been replaced with this:
$("parent element").on("click", "selector", function() {
...
});
Here is an example:
Thank you pullo,