Well im working on a small php script and i have a problem.
ive made an edits that allows me to post infos in ajax but after the post i want to clear the fields of the form.
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
});
return false
})
});
</script>
In the submit handler you can call reset() on the form to set it back to the state it was in on load:
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
$('#form')[0].reset();
});
return false
})
Use
$("#form")[0].reset();
or
document.getElementById("form").reset();
Try Giving blank value to all fields
$("#form").find("input[type=text], input[type=password], textarea").val("");
If you have checkbox and selectbox also
$(':input','#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Use the reset() to reset the form:
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php",
$(this).serialize(),
function(a){
$("#info").html(a);
$('#form')[0].reset();
})
;return false})});
</script>
Related
i want to know how add two events in the same ajax
<script type="text/javascript">
$(document).ready(function(){
$('#department').on('change',function(){
var deptID = $(this).val(); console.log(deptID);
if(deptID){
$.ajax({
type:'POST',
url: BASE_URL+'User/listHospital',
data:'id='+deptID,
success:function(html){
$('#hospital').html(html);
$('#specialisation').html('<option value="">Select hospital</option>');
$('#special').html('<option value="">Select hospital</option>');
}
});
</script>
here i had used on change event i want to add one more event on focus what should i do for it please help
I don't completely understand your question but, is this how you want it?
$("#department").on({
'change': function(){
//ajax here
}
'focus': function(){
//ajax here
}
});
How do i load data into textfields after clicking a checkbox & after doing it, i need to disable that textbox, but again as i uncheck it, need to remove that data & make the textbox enable to manually enter data. I tried this code,i'm new to jquery/ajax, can't figure out how to solve this problem.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").removeAttr("disabled");
else
$("#txtaddress").attr("disabled" , "disabled");
// here, i don't know how do i assign $row['address'] to txtaddress by
// using php mysql
});
});
</script>
<!-this is my html code-->
<form>
<input type="checkbox" id="chk" name="chk">Same as home address?
<input id="txtaddress" name="txtaddress" disabled type="text">
</form>
Try the following,
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").val(""); //reset the textbox
$("#txtaddress").removeAttr("disabled");
else {
$.ajax({
type: 'GET',
url: destinationUrl, // your url
success: function (data) { // your data ie $row['address'] from your php script
$("#txtaddress").val(data); //set the value
$("#txtaddress").attr("disabled", "disabled");
}
});
}
});
});
</script>
From your php script you can echo $row['address'], so the data in success function can be put into textbox in ajax
javascript code:
$(document).ready(function(){
$('#chk').click(function(){
var txt = $("#txtaddress");
($(this).is(":checked")) ? txt.attr("disabled" , true) : txt.attr("disabled" , false);
});
});
I hope this is what u meant.. Hope this might help... :)
$('#chk').click(function(){
if(! $(this).is(":checked")){
$("#txtaddress").removeAttr("disabled");
$("#txtaddress").val('');
}
else{
$.ajax( {
url: "get_row_details",
type: "POST", //or may be "GET" as you wish
data: 'username='+name, // Incase u want to send any data
success: function(data) {
$("#txtaddress").val(data); //Here the data will be present in the input field that is obtained from the php file
}
});
$("#txtaddress").attr("disabled" , "disabled");
}
});
From the php file echo the desired $row['address'].This value will be obtained at the success of the ajax function
A bit of a tricky one here
Is there a way i can join the two scripts below into one so when the form is posted it actually loads both the different named url's into the 2 different named divs
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/edit-profile-top.php', $("#profile").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/welcome-menu.php', $("#profile").serialize(), function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
I am not sure if this is even possible but would be great if it was :)
Many thanks
Just put the contents of the second submitHandler into the first one:
submitHandler: function(form) {
var jqxhr1 = $.post('brides_Includes/edit-profile-top.php', $("#prof...
function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
});
}
var jqxhr2 = $.post('brides_Includes/welcome-menu.php', $("#pro...
function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$.when(jqxhr1, jqhxr2).done(function() { $("#profile")[0].reset(); });
}
<script>
function ajax_loadpage(loadUrl,output_container)
{
$.post
(
loadUrl,
{language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
);
}
ajax_loadpage("url1.php","#div1");
ajax_loadpage("url2.php","#div2");
</script>
the first parameter should be supplied with the URL you want to load, the second will be the name of the id of the element you want to load it into.
I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});
I have no idea what's wrong with my code to call another PHP file via jQuery.ajax function. Need some help in identifying the error.
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
function do_cart(){
alert('testing');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
$('#form').submit();
}
});
}
Do I miss anything here? I have no need to pass data over to the PHP file, I just need the function inside the PHP file get called.
edit 2: now I required some alert boxes.
<script type ="text/javascript">
$('#submit').live('click',function(event){
//event.preventDefault();
do_cart();
alert('Ridirecting to paypal');
});
function do_cart(){
alert('please wait');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
//$('#form').submit();
}
});
}
</script>
It would be good if I can reduce the box to only 1 or none.
It works for me.
http://sandbox.phpcode.eu/g/8ed34.php
be sure you put this script AFTER definition of #submit or be sure you put
your code to
$(function(){
//yourcode
});
Try $('#submit').live('click', function(event){...
Change this
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
To
$('#submit').click(function(event){
do_cart();
event.preventDefault();
});