mvc3 exchange items between listboxes - asp.net-mvc-3

I have two list boxes in my view with four arrows to exchange the items between them. I am using 4 buttons with type="submit" and handling it in the controller. Is there any way that i can do it with out postback?
<table style="width:90%; text-align:center">
<thead>
<tr>
<th>Unassigned State:</th><th>
</th><th>Assigned State:</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
#Html.ListBoxFor(model => model.UnAssignedSelected,
new MultiSelectList(Model.UnAssignedStates, "Id",
"Name", Model.UnAssignedSelected),
new { size = "6" })
</td>
<td valign="top">
<button style=" width:50px" name="button" value="oneRightArrow" type="submit"> > </button><br />
<button style=" width:50px" name="button" value="twoRightArrow" type="submit"> >> </button><br />
<button style=" width:50px" name="button" value="oneLeftArrow" type="submit"> < </button><br />
<button style=" width:50px" name="button" value="twoLeftArrow" type="submit"> << </button>
</td>
<td valign="top">
#Html.ListBoxFor(model => model.AssignedSelected,
new MultiSelectList(Model.AssignedStates, "Id",
"Name", Model.AssignedSelected))
</td>
</tr>
</tbody>


You can use jQuery for that.
Example: http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

Related

Laravel vue js 3 need to edit single record from table

I have this following:
<div class="modal-body" >
<form v-for="lead in editleads" id="" class="form-horizontal validate-form">
<input v-model="editl" type="text" class="form-control my-2 py-2" :placeholder="lead">
</form>
</div>
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-for="atr in column">
{{atr}}
</td>
<td>
<button #click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-pen-to-square"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
data() {
reurn {
headers: [],
leads: [],
...
}
},
editLead(id) {
axios.get('/leads/'+id+'/edit')
.then(response => {
this.editleads = response.data.leads
})
},
I want to edit each table record one by one. I mean to edit single record, but the problem is i return an array object from backend and i dont know how to edit each input. If i click now on form all input filled with same value. can someone help with this

How to set table cells values independently with using x-for alpine.js?

I am trying to make a table includes table in every row, and nested x-for is used with alpine.js.With clicking the button located in the lower right corner of the table, new row is added and all cells in the rows have the same value. I couldn't set the rows' values independently. Could you please help?
Thanks in advance for your help,
Cem
function handler() {
return {
fields1: [],
fields: [],
rows: [],
addRate() {
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
},
listField() {
this.fields.splice(0);
this.fields1.splice(0);
this.rows.push({
id: this.id++
});
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
this.fields.push({
value5: '3',
value6: '20',
value7: 'DC',
value8: '40',
value9: '523',
value10: '654',
value11: 'TEST',
value12: 'true',
value13: 'Class1',
value14: '5656',
value15: 'TRM78799',
id:'1'
});
},
}
};
function setDecimal(event) {
this.value = parseFloat(this.value).toFixed(3);
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container col-md-10 offset-md-1">
<div class="row" x-data="handler()" x-init="listField()">
<div class="col">
<table class="table align-items-center table-sm" style="text-align: center;">
<tr>
<template x-for="(row, index) in rows" :key="index">
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<tbody>
<template x-for="(field1, index) in fields1" :key="index">
<tr class="table-success">
<td style="width:100px;"><b>Type</b></td>
<td style="width:100px;">
<select x-model="field1.rType" class="custom-select" name="rType"
id="rType" required>
<option selected>---</option>
<option value="Type A">Type A</option>
<option value="Type B">Type B</option>
</select>
</td>
<td x-show="field1.rType==='Type A'" style="width:120px;">
<b>Type A Name</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.typeA" type="text" class="form-control"
name="typeA" id="typeA">
</td>
<td x-show="field1.rType==='Type A'" style="width:150px;">
<b>Value4</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.value4" type="text" class="form-control"
name="value4" id="value4">
</td>
<td x-show="field1.rType==='Type B'" style="width:120px;">
<b>From</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateFrom" type="Type B" class="form-control"
name="typeBDateFrom" id="typeBDateFrom">
</td>
<td x-show="field1.rType==='Type B'" style="width:150px;">
<b>To</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateTo" type="Type B" class="form-control"
name="typeBDateTo" id="typeBDateTo">
</td>
</tr>
</template>
</tbody>
</table>
</p>
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<thead class="thead-dark">
<tr>
<th>No</th>
<th style="width:20px;">Value5</th>
<th style="width:80px;">Value6</th>
<th style="width:150px;">Value7</th>
<th style="width:120px;">Value8</th>
<th style="width:120px;">Value9</th>
<th style="width:130px;">Value11</th>
<th style="width:180px;">Value12</th>
<th style="width:180px;">Value1</th>
<th style="width:180px;">Value2</th>
<th style="width:180px;">Value3</th>
</tr>
</thead>
<tbody>
<template x-for="(field, index) in fields" :key="index">
<tr>
<td x-text="index + 1"></td>
<td x-text="field.value5"></td>
<td x-text="field.value6"></td>
<td>
<p x-text="field.value7"></p>
<p
x-show="field.value7==='RFR' | field.value7==='RFRHC'">
<span x-text="field.value8"></span><span>
℃</span>
</p>
</td>
<td x-text="field.value9"></td>
<td x-text="field.value10"></td>
<td x-text="field.value11"></td>
<td x-show="field.value12">
<p>
<label><b>Value13 </b><span x-text="field.value13"></span></label>
</p>
<p>
<label><b>Value14 </b><span x-text="field.value14"></span></label>
</p>
</td>
<td x-show="!field.value12">
<p>
</p>
</td>
<td class="table-success">
<input x-model="field.value1" type="number" class="form-control"
onchange="setDecimal" min="0" max="10000000" name="value1"
id="value1" step="0.001" value="0.000" required>
</td>
<td class="table-success">
<select x-model="field.value2" class="custom-select" name="value2"
id="value2" required>
<option selected>---</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</td>
<td class="table-success">
<input x-model="field.value3" type="text" class="form-control"
name="value3" id="value3">
</td>
</tr>
</template>
</tbody>
</table>
</p>
</template>
</tr>
<tr>
<td colspan="12" class="text-right"><button type="button" class="btn btn-info"
#click="listField()">+ Add Row</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.2/dist/alpine.min.js" defer></script>

Fckeditor to ckeditor4

Issue:
Starting off my issue is that my content does not appear for me to edit.
I can see it on my front end, but not the backend.
Likely due to the old fckedit program.
Im trying to figure out the next step to replace the old FCKeditor within my page with ckeditor4.
My site was custom built from scratch (I didn't build it). I have the ckeditor4 loaded in my include folder and I was able to test it using my URL.
However, I can't get it to work on the page or show my content that is not reachable on the backend.
Here is my page coding:
{include file='siteadmin/header.tpl'}
{include file='siteadmin/left.tpl'}
<h1>{if $action eq 'add'}Add{else}Edit{/if} Page</h1>
<form method="post" action="{$_conf_vars.ADMIN_URL}index.php?opt={$opt}&a={$action}{$qstr}" name="frm" id="frm" enctype="multipart/form-data">
{if $show_msg ne ''}
{$show_msg}
{/if}
<input type="hidden" name="page_id" id="page_id" value="{$page_id}" />
<input type="hidden" name="alias_id" id="alias_id" value="{$alias_id}" />
<input type="hidden" name="page_title" id="page_title" value="{$page_title|#StripSlash}" />
<input type="hidden" name="adapters" id="adapters" value="1" />
<input type="hidden" name="btn" value="{$action}" />
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="listdata">
<tr>
<td><div align="right">Page Title:<span class="star">*</span></div></td>
<td><input type="text" id="page_title" name="page_title" value="{$page_title|#StripSlash}" maxlength="300" style="width:532px;"/></td>
</tr>
<tr>
<td><div align="right">Page Alias:<span class="star">*</span></div></td>
<td><input type="text" name="page_alias" maxlength="100" id="page_alias" value="{$page_alias|#StripSlash}" size="60" />
<em>(a-z, 0-9, hyphen (-) only)</em></td>
</tr>
<tr>
<td valign="top"><div align="right">Description:<span class="star">*</span></div></td>
<td>
{php}
$sBasePath = $_conf_vars['ROOT_URL'].'include/fckeditor/';
$oFCKeditor = new FCKeditor('page_body') ;
$oFCKeditor->BasePath = $sBasePath ;
$oFCKeditor->ToolbarSet ="Default";
$oFCKeditor->Value = StripSlash($this->get_template_vars('page_body')) ;
$oFCKeditor->Height = 500;
$oFCKeditor->Width = 700;
$oFCKeditor->Create() ;
{/php}
</tr>
<tr>
<td width="31%"><div align="right">Meta Title:</div></td>
<td width="69%"><textarea name="meta_title" id="meta_title" rows="4" cols="100">{$meta_title|#StripSlash}</textarea></td>
</tr>
<tr>
<td><div align="right">Meta Keywords:</div></td>
<td><textarea name="meta_keywords" id="meta_keywords" rows="4" cols="100">{$meta_keywords|#StripSlash}</textarea>
<br/><small> <small>Separated by commas</small></small></td>
</tr>
<tr>
<td><div align="right">Meta Description:</div></td>
<td><textarea name="meta_desc" id="meta_desc" rows="4" cols="100">{$meta_desc|#StripSlash}</textarea></td>
</tr>
<tr>
<td width="270"> </td>
<td width="689" align="right"> {if $action eq "add" or $action eq "more"}
<button type="submit" onclick="document.frm.btn.value = 'success';">Add and Go To Listing</button>
<button type="submit" onclick="document.frm.btn.value = 'more';">Add More</button>
{else}
<button type="submit" onclick="document.frm.btn.value = 'update';">Update and Go To Listing</button>
{/if}
<button type="button" onclick="window.location.href='index.php?opt={$opt}{$qstr}'">Cancel</button></td>
</tr>
</table>
</form>
{include file='siteadmin/footer.tpl'}
Thank you,
leon

how to remove validation message created by validator when reseting form in laravel octobercms

form validation:
Component
public function onContact()
{
$input = post();
//$contact = Contact::create($input);
$rules = [
'name' => 'required|alpha',
'designation' => 'required',
'note' => 'required',
'contactNo' => 'required|numeric|max:10',
'emailIdText' => 'required|email',
'companyName' => 'required'
];
$validator = Validator::make($input, $rules);
if ($validator->fails()) {
throw new ValidationException($validator);
} else {
$contact = new Contact;
$contact->name = $input['name'];
$contact->designation = $input['designation'];
$contact->note = $input['note'];
$contact->inquiry_about = $input['option'];
$contact->email_id = $input['emailIdText'];
$contact->contact_no = $input['contactNo'];
$contact->company_name = $input['companyName'];
$contact->save();
}
}
default.htm
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<input type="reset" id="resetbtn" class="contactBtn" value="Reset">
</td>
</tr>
</tbody>
</table>
</form>
form validation is perfectly fine but i want to reset form along with validation error message how can i do this?
when clicking to reset button input in input fields resets but error msgs are still shown......................................................
what should i do

Here, use this JavaScript code to clear out all of your tags that have an error class.
<script>
function clearErrors() {
var form = document.getElementById('myform').querySelectorAll('span.Error');
for (i=0; i<=form.length; i++) {
form[i].innerText = '';
}
}
</script>
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<button type="reset" onclick="clearErrors()">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>

Did you try to hide the elements with the class 'error' with jQuery by clicking on the reset button ?
Another method is to change the reset button with an empty href. By clicking on the button it will refresh the page and the form I guess.

Coldfusion forms and image upload with cffile

I'm learning some Coldfusion, and I'm having trouble with this small form based application I'm building for a coworker.
Here is the first page: http://pastebin.com/aLPYHPsF
As you can see, what I want to do is get the user input and take that input and output it to html. The text stuff works fine, but I can't get the image to upload! What I want to do is have the user click upload, get a confirmation, then click submit and they are sent to the generated html (cfm) page. On the page is a resized version of the image they uploaded.
Please tell me what I'm doing wrong! Right now when "upload" is clicked, the form just dumps.

It's because of you forgot to assign enctype="multipart/form-data" to your first cfform. I've edited some of your coding. Check it out.
<cfset strPath = ExpandPath( "./" ) />
<cfset strPath = GetDirectoryFromPath(GetCurrentTemplatePath()) />
<table width="100%">
<tr>
<td align="center">
<cfform name="ecaform" action="ecagenerator.cfm" enctype="multipart/form-data">
<table style="font-family: arial; font-size: 9pt">
<tr><td height="30px" align="center" colspan="2" style="background-color: #020058; color: #FFFFFF; font-family: arial;">
<b>ECA Newsletter Creation Form</b>
</td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td>Earned from:</td>
<td>
<cfinput
type="radio"
name="earnedfrom"
value="UC">
UC
<cfinput
type="radio"
name="earnedfrom"
value="ECA">
ECA
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<cfinput
name="firstname">
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<cfinput
name="lastname">
</td>
</tr>
<tr>
<td>Instructor's Name:</td>
<td>
<cfinput
name="instructorname">
</td>
</tr>
<tr>
<td>Date (MM/DD/YYYY):</td>
<td>
<cfinput
name="date">
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<cfinput
type="radio"
name="sex"
value="male">
Male
<cfinput
type="radio"
name="sex"
value="female">
Female
</td>
</tr>
<tr>
<td>Certificate Type:</td>
<td>
<cfinput
type="radio"
name="certtype"
value="Private">
Private
<cfinput
type="radio"
name="certtype"
value="Recreational">
Recreational
<cfinput
type="radio"
name="certtype"
value="Commercial">
Commercial
</td>
</tr>
</table>
<table style="font-family: arial; font-size: 9pt; margin-top: 20 px;">
<tr>
<td>
Upload the photo:
</td>
</tr>
<tr>
<td>
<cfif isDefined("form.fileUpload")>
<cffile action="upload"
fileField="fileUpload"
destination="#strPath#"
accept="image/*">
<cfimage action="resize"
width="200"
height="200"
source="#strPath##file.serverfile#"
destination="#strPath##file.serverfile#"
overwrite="yes">
<img src="<cfoutput>#file.serverfile#</cfoutput>">
</cfif>
</td>
</tr>
<tr>
<td>
<form enctype="multipart/form-data"
method="post">
<input type="file"
name="fileUpload" /><br /><br />
<input type="submit"
value="Submit"
action="ecagenerator.cfm" />
</form>
</td>
</tr>
</table>
<table style="margin-top: 20px;">
<tr>
<td>
<cfinput
type="submit"
name="Submit"
value="Submit">
</td>
</tr>
</table>
</cfform>
</td>
</tr>
</table>

You might want to look into using <cfdiv> for the image upload section. Basically you want the form for image uploading be inside the <cfdiv>, so that the form is submitted through ajax. Have the image form action post to a previewImage.cfm that uses <cffileupload>, validate with isImageFile() if it is an image file, then use <cfimage> to resize it and display a thumbnail (may use action="writetobrowser"). The easiest way to associate the uploaded image with the parent form would be storing the file path in Session I guess, if you don't want to code up extra Javascript.

Resources