JQuery Dialog seems removed the form element out from the original dom structure, thus causing the problem. The solution will be
1) Add an additional DIV or SPAN before your closing FORM tag(give it an ID),
2) Before the form submit, append the Dialog DIV back to the above created DIV or SPAN
Here's the sample code:
<!DOCTYPE html>
<html lang="en">
<?php
if($_POST['username']) echo "<br/> Username is " . $_POST['username'];
if($_POST['outerfield']) echo "<br/> Username is " . $_POST['outerfield'];
?>
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script>
//google.load("jquery", "1.5.1");
//google.load("jqueryui", "1.8.11");
</script>
<form id="form1" method='post'>
<input type="button" class="button" value="go dialog" onclick="GoDialog()" />
<input type='button' class='button' value='Check Value1' onclick='checkvalue("outerfield");'>
<input type='button' class='button' value='Check Value2' onclick='checkvalue("username");'>
<input type='button' class='button' value='Put It Back' onclick='putitback("username");'>
<br/> OuterField <input type='text' name='outerfield' size='20'>
<div class="dlg" id="msgDlg" style='display:none;'>
<br/>Name: <input type="text" name='username' />
<br/><input type="button" class="button" value="OK" onclick="$('#msgDlg').dialog('close');" />
</div>
<div id="beforesubmit" style="display:none"></div>
<script>
$(function () {
$('#msgDlg').dialog({
autoOpen: false,
modal: false,
width: 450,
height: 300,
draggable: true,
resizable: true
});
});
$("#form1").submit(function() {
$("#msgDlg").prependTo("#beforesubmit");
});
function GoDialog() {
var msgDlg = $('#msgDlg').dialog('open');
}
</script>
<br/><input type='submit' value='Submit'>
</form>
</body>
</html>
<script>
function checkvalue(fieldname){
if(document.forms[0][fieldname]==undefined){
alert(fieldname+' Undefined detected');
}else{
alert(fieldname+' - Okay');
}
}
</script><
2 comments:
headache with design related stuff especially the javascripts... try run as far as possible if u see Js... damn I just let it shit-ed on me
JS is fun provided your boss give u enough of time to code your project. A little bit of hiccup, will easily waste hours of time.
Post a Comment