EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: martinh on May 22, 2018, 01:21:26 AM



Title: Submit form and show results in a panel?
Post by: martinh on May 22, 2018, 01:21:26 AM
Hi,

i think im having a bit of a blonde moment.

I have a form that i want to submit and send the data to a panel but i cannot seem to get it to work. I cannot get the data into the panel.

Code:
$('#fm').form('submit', {
url: 'new_panel.php',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
            $.messager.show({
                msg:'Reference required',
                timeout:4000,
                showType:'slide'
            });
}
return isValid;
},
success: function(){
var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
$('#dlgBlockRef').dialog('close');
    $('#addOrder').panel({
        title: 'Add New Order',
        closable: false,
        fit: true,
        closed: false,
        //href: 'new_panel.php?jobid=<?php echo $jobid ?>&blockref='+$('#block_ref').val()+'&delaypo='+$('#delay_po').val()+'&holdpo='+x+'&edit=0',
        href: 'new_panel.php',
    });
}
});

on the new_panel.php page, we use the following to get the data:

Code:
$varX = htmlspecialchars($_REQUEST['varX']);

what am i missing?

Regards,

Mart


Title: Re: Submit form and show results in a panel?
Post by: battlezad on May 22, 2018, 03:26:52 AM
Do you have used name-parameter in your form?

for example

<form id="login" method="post">
<table>
<tr>
<td>
   <input id="loginusername" name="username" class="easyui-textbox" style="width:100%;height:40px;padding:12px" data-options="required:true, prompt:'Username',iconCls:'icon-man',iconWidth:22">
</td>
...

Then you can use in PHP side
$username = stripslashes($_POST['username']);


Title: Re: Submit form and show results in a panel?
Post by: martinh on May 22, 2018, 03:32:53 AM
hi,

yes, here is the form i use:

Code:
<form id="fm" method="post" enctype="multipart/form-data" novalidate>
<div class="fitem" id="bref">
<input id="ref" name="ref" label="Block Reference" required class="easyui-textbox" labelWidth="200px" style="width:550px; height: 36px; line-height: 36px; padding-bottom: 10px;">
</div>
<div class="fitem">
<input id="note" name="note" label="Notes" labelWidth="200px" class="easyui-textbox" style="width:550px;height:150px; line-height: 36px; padding-bottom: 10px;" multiline="true" labelPosition="left">
</div>
<HR>
<div class="fitem">
<input id="delay" name="delay" label="Delay" labelWidth="200px" type="text" class="easyui-datebox" style="width:550px;" data-options="panelWidth:500,panelHeight:500,tooltip:{content:'Leave BLANK to send immediately',position:'bottom'}">
</div>
<div class="fitem">
<label class="textbox-label" style="width: 190px; height: 36px; line-height: 36px;">HOLD Indefinitely</label>
<input id="hold" name="hold" class="easyui-switchbutton" style="width:179px" data-options="onText:'Yes',offText:'No'">
</div>
</form>


Title: Re: Submit form and show results in a panel?
Post by: battlezad on May 22, 2018, 03:51:55 AM
Have you used Firebug or similar to check what parameters are posted?


Title: Re: Submit form and show results in a panel?
Post by: martinh on May 22, 2018, 03:55:01 AM
No, i am using chrome.

Is there a Firebug alternative for chrome?


Title: Re: Submit form and show results in a panel?
Post by: battlezad on May 22, 2018, 03:57:11 AM
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwj12fqrlJnbAhVCLZoKHRmnBxwQFggsMAA&url=https%3A%2F%2Fgetfirebug.com%2Freleases%2Flite%2Fchrome%2F&usg=AOvVaw2OfvCAws22s0foW-Fpjeqz


Title: Re: Submit form and show results in a panel?
Post by: juancitop on May 22, 2018, 05:54:04 AM
If you use Chrome donĀ“t need firebug, press F12 before you submit the form.


Title: Re: Submit form and show results in a panel?
Post by: martinh on June 05, 2018, 07:17:34 AM
Hi,

sorry for delay, had to work on another area first.

Anyways, still havnt been able to figure this out and here is the code i have so far.


index.php
Code:
<div id="addOrder" class="easyui-panel" closed="true"></div>
<div id="dlgBlockRef" class="easyui-dialog" style="width:600px;height:420px;padding:10px"
        data-options="
        title: 'Block/Section reference?',
    closed: false,
    cache: false,
    modal: true,
            buttons: [{
    text:'Ok',
    iconCls:'icon-ok',
    handler:function(){
        addOrder();
    }
},{
    text:'Cancel',
    iconCls:'icon-cancel',
    handler:function(){
    $('#fm').form('clear');
        $('#dlgBlockRef').dialog('close');
    }
}],
        ">
    <form id="fm" method="post" enctype="multipart/form-data" novalidate>
<div class="fitem" id="bref">
<input id="block_ref" name="block_ref" label="Block Reference" class="easyui-textbox" labelWidth="200px" style="width:550px; height: 36px; line-height: 36px; padding-bottom: 10px;">
</div>
<div class="fitem">
<input id="order_note" name="order_note" label="Order notes" labelWidth="200px" class="easyui-textbox" style="width:550px;height:150px; line-height: 36px; padding-bottom: 10px;" multiline="true" labelPosition="left">
</div>
<HR>
<div class="fitem">
<input id="delay_po" name="delay_po" label="Delay Procesing" labelWidth="200px" type="text" class="easyui-datebox" style="width:550px;" data-options="panelWidth:500,panelHeight:500,tooltip:{content:'Leave BLANK to process immediately',position:'bottom'}">
</div>
<div class="fitem">
<label class="textbox-label" style="width: 190px; height: 36px; line-height: 36px;">HOLD Order Indefinitely</label>
<input id="hold_order" name="hold_order" class="easyui-switchbutton" style="width:179px" data-options="onText:'Yes',offText:'No'">
</div>
</form>
</div>

<script type="text/javascript">
function addOrder(){
var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
//url: 'new_panel.php?jobid=<?php echo $jobid ?>&blockref='+$('#block_ref').val()+'&delaypo='+$('#delay_po').val()+'&holdpo='+x+'&edit=0',
$('#fm').form('submit', {
url: 'new_panel.php?action=1',
onSubmit: function(param){
param.edit = 0;
//param.test = $('#block_ref').val();
param.test = "testtttt";
var isValid = $(this).form('validate');
if (!isValid){
            $.messager.show({
                msg:'Block/Section reference required',
                timeout:4000,
                showType:'slide'
            });
}
return isValid;
},
success: function(data){
alert(data);
//data.test = "$('#block_ref').val()";
var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
$('#dlgBlockRef').dialog('close');
    $('#addOrder').panel({
        title: 'Add New Order',
        closable: false,
        fit: true,
        closed: false,
        href: 'new_panel.php?action=1',
    });
}
});
};
</script>



new_panel.php
Code:
<?php
$blockRef 
mysql_real_escape_string($_REQUEST['block_ref']);
$orderNote htmlspecialchars($_REQUEST['order_note']);

$delayPO mysql_real_escape_string($_REQUEST['delay_po']);
$holdOrder htmlspecialchars($_REQUEST['hold_order']);

$edit htmlspecialchars($_REQUEST['edit']);
$test htmlspecialchars($_POST['test']);


$action htmlspecialchars($_POST['action']);



if(
$action){
echo "test" $test "<BR>";
//exit;
} else {


echo 
"action" $action "<BR>";

echo 
"blockRef" $blockRef "<BR>";
echo 
"orderNote" $orderNote "<BR>";
echo 
"delayPO" $delayPO "<BR>";
echo 
"holdOrder" $holdOrder "<BR>";

echo 
"edit" $edit "<BR>";
echo 
"test" $test "<BR>";




$test2 $_POST['test'];
echo 
"test2" $test2 "<BR>";

}



?>



<a href="#" iconCls="icon-cancel" class="easyui-linkbutton" onclick="closePanel()">Close</a><BR>
<script>
function closePanel(){
$('#addOrder').dialog('close');
$('#dlgBlockRef').dialog('open');
}
</script>



So, we have the initial form where the user will enter details.
When the form is submitted, the data gets posted (can see this in the alert box)

However, when the "success" is fired, it just loads the new_panel.php page but cannot get any of the posted values.

how do i go about passing those details to the new panel?