Jquery dialog+ajax problem

Hi,

i have two fields in my form like txtuser and txtpass, i've used jquery to show these fields in a dialog.
i want to submit these fields to php file so that i can verify username and pass, i tried to use ajax with jquery.

but when i submit these fields after clicking ok button it posts null value. whether the input fields are moved out of form when show the dialog?

anybody knows the solution for this??

 

Hi friends,

This is the html code for the two input boxes:
<div id="log_panel">
<form name="log_form" method="get">
<input name="log" id="log" type="button" value="sign in" />
<input name="txtuser" type="text" class="textpart" id="txtuser" />
<input name="txtpass" type="text" class="textpart" id="txtpass" />
<input name="btnlog" type="button" class="predict_button2" id="btnlog" value="login" />
</div>
I've used following code to show this log panel in jquery dialog:
$(document).ready(function(){
//to show the div as a popup
$('#log').click(function(){
$('#log_panel').dialog({
modal:true,
width:605,
height:300,
title:"Log in"
});
});
//to make ajax call
$('#btnlog').click(function(){
$.ajax({
type : 'GET',
url : 'auth.php',
data: {
name : $('#name').val()
},
success : function(data){
alert(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
}); //for ajax
$('#log_panel').dialog('close');
}); //to close the click function
}); // to close the document.ready.

auth.php contains follwoing code:

<?php
echo $_GET['name'];
?>

The problem is when i click the login button it makes the ajax call, but it shows empty values
after the ajax request.
I heard some where when we show the form fields in a jquery dialog it's moved out of the form. i think that may be the problem but how can i resolve this..

anyone knows? Thanks...

 

Here is your problem:

data: {
name : $('#name').val()
},

There is no input in your HTML with name ID?

If you do this:

data: {
name: $('#txtuser').val()
},

Then it is going to send the value in this box:

<input name="txtuser" type="text" class="textpart" id="txtuser" />

Make sure you use the ID_OF_INPUT if you are using the ID selector (#).

 

Thanks PHPMaster for your reply,
i've corrected the name problem, but when i alert the txtuser.value it resulted in undefined. so ,i changed my approach and using
$("input").each, i traversed each of the input element in that form , assigned the value of the txtuser by checking this.id.

Here is the code:
var user;var pass;
$("input").each(function(){
if(this.id=="txtuser")
{ user=this.value; this.value='';}
else if(this.id=="txtpass")
{ pass=this.value; this.value='';}
});
$('#log_panel').dialog('close');
i triggered this code after clicking the login button.

Thanks for your timely reply

 

Make sure you alert $('#inputID).val() and not $('#inputID').value..

 

i think using $('#inputID').value won't work, $('#inputID').val() is correct. but when i traversing using "each" method, this.value is working. I think outside that function $('#inputID').value won't work.. is that correct??