Text box value not geting after ajax call

Question

I have a php page with two forms.In first form there have a button ,onclick() of the button call a function for validating the first form.if validations are all did theelse part of the function is below:

else
            {
                var cnt=$("#frmdocontact").serialize();
                $.ajax({  
                type: "POST",  
                url: "doitcontact.php",
                data: cnt,
                success: function(msg){
                var spt=msg.split('#$@$');
                $('#hid_uid').val(spt[0]);
                $('#hid_add_vehicle').val(spt[0]);
                $('#hid_saleid').val(spt[1]);

                //alert(msg);
            //console.log(contactSent);
            var pkg = $('input:radio[name=pkg]:checked').val();

            var $tabs = $('#tabs').tabs();
            var selected = $tabs.tabs('option', 'selected');
            $tabs.tabs('select', selected+1);
                //window.location="thankyou.php"
                }
                });

            }

after the else part worked ,the hd_saleid have value as OFKXM.The hd_saleid is in second form.

In second form there have file upload section ,that is done by using ajax upload.But in that ajax upload function the hd_saleid value is not getting.This is the code:

$(function(){
        var cntUp = 0;
        var btnUpload=$('#upload');
        var status=$('#status');
        var saleid = $("#hd_saleid").val();
        new AjaxUpload(btnUpload, {
            action: 'upload-file.php',
            data: {saleid: $("#hd_saleid").val()},
            name: 'uploadfile',
            onSubmit: function(file, ext){
                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
                    alert('Only JPG, PNG or GIF files are allowed');
                    return false;
                }
                status.text('Uploading...');
            },
            onComplete: function(file, response){
                //On completion clear the status
                status.text('image uploaded');
                cntUp++;
                //console.log(cntUp);
                //Add uploaded file to list
                if (response.toLowerCase().indexOf("success") >= 0 ) {
                //alert('success');
                //$('<li></li>').appendTo('#files').html('<img src="uploads/'+file+'" alt="" /><br />'+file).addClass('success');

                if(saleid){
                        $('<li></li>').appendTo('#files').html('<img src="uploads/'+saleid+'/'+file+'" alt="" /><br />'+file).addClass('success');
                    }else{
                        $('<li></li>').appendTo('#files').html('<img src="uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                    }

                }  else{
                    $('<li></li>').appendTo('#files').text(file).addClass('error');
                    //alert('error');
                }
            }
        });

    });

So how can i get the value hidden field of hd_saleid in ajax upload?

Answer 1

Yes, your problem is here:

var saleid = $("#hd_saleid").val();

saleid takes it's value from $("#hd_saleid").val() when the DOM is ready, so it takes his value at start and that's it. That why you had to add $("#hd_saleid").val() directly in AJAX Call.

And you could use:

onSubmit: function(file, ext){
    if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
        // extension is not allowed 
        alert('Only JPG, PNG or GIF files are allowed');
        return false;
    }
    this.setData({
        'saleid': $("#hd_saleid").val()
    });
    status.text('Uploading...');
},