About ME: select a checked /selected check box along with values and call controller (Checkbox will be single selected)

Cshtml:
@{
ViewBag.Title = "EmailListIndex";
}

<style>
.custom_check {
display: inline-block;
position: relative;
}

.checkbox-round {
width: 1.3em;
height: 1.3em;
border-radius: 50%;
border: 1px solid #ddd;
-webkit-appearance: none;
}

.checkbox-round:checked .tick:before {
}

.label_bold {
font-weight: bold !important;
color: black;
}

.label-check {
margin-left: 21px;
}

.loaderModal {
position: fixed;
margin-left: -5% !important;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
display: none;
}

.center {
z-index: 1000;
margin-top: 300px !important;
margin-left: 632px !important;
padding: 10px;
width: 40px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}

/*.center img {
height: 128px;
width: 128px;
}*/
</style>

<h2>Email List</h2>
<br />
<br />

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<form>
<div id="erroMessage" class="form-group">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnHideModal" class="btn btn-default Font">
Close
</button>
</div>
</div>
</div>
</div>

<div id="divLoader" class="loaderModal">
<div class="center">
<img src="~/images/ajax-loader.gif" alt="Loading"/>
</div>
</div>

<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })

<fieldset id="radioaccounttype" class="atype">
<div>
<b>Please select your account type</b>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="chk_Cash" value="Cash" class="label-to-bold-if-checked" name="radioaccounttype" />
<label for="chk_Cash"></label>
</div>
<label class="label-check font lblcolor">
Cash - Customers are non-house accounts and pay with cash,check,or credit card
</label>
</div>

</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="chk_House" value="House" class="label-to-bold-if-checked" name="radioaccounttype" />
<label for="chk_House"></label>
</div>
<label class="label-check font lblcolor">
House - account customers that have the ability to charge an account at the store
</label>
</div>
</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="chk_CashNHouse" value="Cash and House" class="label-to-bold-if-checked" name="radioaccounttype" />
<label for="chk_CashNHouse"></label>
</div>
<label class="label-check font lblcolor">
Cash and House
</label>
</div>
</div>
</div>

</fieldset>

<fieldset id="radiopromotion" class="protype">
<div>
<b>What type of promotion are you sending ?</b>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="checkboxGeneral" value="General Offer" class="label-to-bold-if-checked chkYes" name="radiopromotion" />
<label for="checkboxGeneral"></label>
</div>
<label class="label-check font lblcolor">
General Offer
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="checkboxAce" value="Ace Brand" class="label-to-bold-if-checked chkYes" name="radiopromotion" />
<label for="checkboxAce"></label>
</div>
<label class="label-check font lblcolor">
Ace Brand
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="checkboxLawn" value="Lawn & Garden" class="label-to-bold-if-checked chkYes" name="radiopromotion" />
<label for="checkboxLawn"></label>
</div>
<label class="label-check font lblcolor">
Lawn & Garden
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="checkboxLawnGdn" value="Lawn & Garden/Outdoor Living" class="label-to-bold-if-checked chkYes" name="radiopromotion" />
<label for="checkboxLawnGdn"></label>
</div>
<label class="label-check font lblcolor">
Lawn & Garden/Outdoor Living
</label>
</div>
</div>

</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="checkboxPaint" value="Paint" class="label-to-bold-if-checked chkYes" name="radiopromotion" />
<label for="checkboxPaint"></label>
</div>
<label class="label-check font lblcolor">
Paint
</label>
</div>
</div>
</div>
</fieldset>

<div class="dvgroup" style="display: none">
<fieldset id="radiogrouptarget" class="grptype">
<div>
<b>What type would you like to target ?</b>
</div>


<div id="groupTypeAce" style="display: none">
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="Group0" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="Group0"></label>
</div>
<label class="label-check font lblcolor">
All Ace Brand Customers,Fill to Quantity:All active cutomers puchasing Ace branded
<br />
products in the past yr,then fill with active customers to quantity requested
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="Group1" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="Group1"></label>
</div>
<label class="label-check font lblcolor">
All Ace Brand Customers:All active cutomers puchasing Ace branded products in the
<br />
past yr
</label>
</div>
</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="Group2" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="Group2"></label>
</div>
<label class="label-check font lblcolor">
Top Ace Brand Customers,Fill to Quantity:Atleast $75 spend on Ace branded products in
<br />
the past yr,then fill with active customers to quantity requested
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="Group3" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="Group3"></label>
</div>
<label class="label-check font lblcolor">
Top Ace Brand Customers:Atleast $75 spend on Ace branded products in the past yr
</label>
</div>

</div>
</div>
</div>


<div id="groupTypeGeneralOffer" style="display: none">
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general1" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general1"></label>
</div>
<label class="label-check font lblcolor">
Top Customers: Customer Value 20-30
</label>
</div>
</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general2" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general2"></label>
</div>
<label class="label-check font lblcolor">
Top & Avg Customers: Customer Value 13-30

</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general3" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general3"></label>
</div>
<label class="label-check font lblcolor">
Top & New Customers: Customer Value 20-30 & New Customers from the past 6 months
</label>
</div>
</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general4" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general4"></label>
</div>
<label class="label-check font lblcolor">
Top, Avg & New Customers: Customer Value 13-30 & New Customers from the past 6 months
</label>
</div>

</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general5" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general5"></label>
</div>
<label class="label-check font lblcolor">
All Active Customers: Customer Value 6-30
</label>
</div>

</div>
</div>

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="general6" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="general6"></label>
</div>
<label class="label-check font lblcolor">
All Customers: Customer Value 0-30

</label>
</div>

</div>
</div>
</div>


<div id="groupTypeLawn" style="display: none">
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawn1" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawn1"></label>
</div>
<label class="label-check font lblcolor">
Top Lawn & Garden Customers: At least $75 spend on Dept. 7 products in the past yr

</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawn2" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawn2"></label>
</div>
<label class="label-check font lblcolor">
Top Lawn & Garden Customers, Fill to Quantity: At least $75 spend on Dept. 7 products in the past yr, then fill with active customers to quantity requested

</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawn3" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawn3"></label>
</div>
<label class="label-check font lblcolor">
All Lawn & Garden Customers: All active customers purchasing Dept. 7 products in the past yr

</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawn4" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawn4"></label>
</div>
<label class="label-check font lblcolor">
All Lawn & Garden Customers, Fill to Quantity: All active customers purchasing Dept. 7 products in the past yr, then fill with active customers to quantity requested

</label>
</div>

</div>
</div>
</div>


<div id="groupTypeLawnG" style="display: none">
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawnG1" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawnG1"></label>
</div>
<label class="label-check font lblcolor">
Top Lawn & Garden & Outdoor Living Customers: At least $75 spend on Dept. 7 and Commodity Group 88 products in the past yr
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawnG2" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawnG2"></label>
</div>
<label class="label-check font lblcolor">
Top Lawn & Garden & Outdoor Living Customers, Fill to Quantity: At least $75 spend on Dept. 7 and Commodity Group 88 products in the past yr, then fill with active customers to quantity requested
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawnG3" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawnG3"></label>
</div>
<label class="label-check font lblcolor">
All Lawn & Garden & Outdoor Living Customers: All active customers purchasing Dept. 7 or Commodity Group 88 products in the past yr
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="lawnG4" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="lawnG4"></label>
</div>
<label class="label-check font lblcolor">
All Lawn & Garden & Outdoor Living Customers, Fill to Quantity: All active customers purchasing Dept. 7 or Commodity Group 88 products in the past yr, then fill with active customers to quantity requested
</label>
</div>

</div>
</div>
</div>


<div id="groupTypePaint" style="display: none">
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="paint1" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="paint1"></label>
</div>
<label class="label-check font lblcolor">
Top Ace Paint Customers: At least $75 spend on Merch Class 162 in the past yr
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="paint2" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="paint2"></label>
</div>
<label class="label-check font lblcolor">
Top Ace Paint Customers, Fill to Quantity: At least $75 spend on Merch Class 162 in the past year, then fill with active customers to quantity requested
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="paint3" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="paint3"></label>
</div>
<label class="label-check font lblcolor">
All Ace Paint Customers: All active customers purchasing Merch Class 162 in the past year
</label>
</div>
</div>
</div>
<br />

<div class="form-group">
<div class="checkbox">
<div class="custom_check">
<div class="round">
<input type="checkbox" id="paint4" class="label-to-bold-if-checked chkYes" name="radiogrouptarget" />
<label for="paint4"></label>
</div>
<label class="label-check font lblcolor">
All Ace Paint Customers, Fill to Quantity: All active customers purchasing Merch Class 162 in the past year, then fill with active customers to quantity requested
</label>
</div>

</div>
</div>
</div>
</fieldset>
</div>

<div id="countDiv" style="display:none;">

</div>


<div class="form-group">
<div class="col-md-offset-2 col-md-10" style="margin-left: 0.666667% !important;">
<b>
<input type="submit" value="ADD TO CART" style="background-color:#007DB3; color:#ffffff;" class="btn btn-default Font" />
</b>
</div>
</div>
</div>
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

<script src="~/Scripts/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$("input[name='radiopromotion']").click(function () {
if ($(".chkYes").is(":checked")) {
if ($(this).attr("id") == "checkboxAce") {
$('#groupTypeAce').show();
$('#groupTypeGeneralOffer').hide();
$('#groupTypeLawn').hide();
$('#groupTypeLawnG').hide();
$('#groupTypePaint').hide();
}

else if ($(this).attr("id") == "checkboxGeneral") {
$('#groupTypeGeneralOffer').show();
$('#groupTypeAce').hide();
$('#groupTypeLawn').hide();
$('#groupTypeLawnG').hide();
$('#groupTypePaint').hide();
}

else if ($(this).attr("id") == "checkboxLawn") {
$('#groupTypeLawn').show();
$('#groupTypeGeneralOffer').hide();
$('#groupTypeAce').hide();
$('#groupTypeLawnG').hide();
$('#groupTypePaint').hide();
}

else if ($(this).attr("id") == "checkboxLawnGdn") {
$('#groupTypeLawnG').show();
$('#groupTypeLawn').hide();
$('#groupTypeGeneralOffer').hide();
$('#groupTypeAce').hide();
$('#groupTypePaint').hide();
}

else if ($(this).attr("id") == "checkboxPaint") {
$('#groupTypePaint').show();
$('#groupTypeLawnG').hide();
$('#groupTypeLawn').hide();
$('#groupTypeGeneralOffer').hide();
$('#groupTypeAce').hide();
}

var group = $('.dvgroup').show();
//$(':input[type="submit"]').prop('disabled', true);
}
else {
$(".dvgroup").hide();
}
});
});

$("input:submit").on('click', function () {

//first Question ans
// var totalChkboxCntfirst = $("#radioaccounttype").find('.form-group').find('[type="checkbox"]').length;
var firstQuestionans;
$("#radioaccounttype").find('.form-group').find('[type="checkbox"]').each(function () {
if ($(this).is(':checked')) {
firstQuestionans = $(this).parent().next().text().trim();
}
});

//second Question ans
// var totalChkboxCntSecond = $("#radiopromotion").find('.form-group').find('[type="checkbox"]').length;
var secondQuestionans;
$("#radiopromotion").find('.form-group').find('[type="checkbox"]').each(function () {
if ($(this).is(':checked')) {
secondQuestionans = $(this).parent().next().text().trim();
}
});

//third Question group ans
// var totalChkboxCntSecond = $("#radiogrouptarget").find('.form-group').find('[type="checkbox"]').length;
var thirdQuestionans;
$("#radiogrouptarget").find('.form-group').find('[type="checkbox"]').each(function () {
if ($(this).is(':checked')) {
thirdQuestionans = $(this).parent().next().text().trim();
}
});

$.ajax({
url: "/MailingListQuestions/SaveList",
type: "POST",
data: { 'accounttype': firstQuestionans, 'promotiontype': secondQuestionans, 'grouptype': thirdQuestionans },
dataType: "json",
traditional: true,
success: function () {
alert("ajax request to server succeed");
}
});
});

//disable
//$(document).ready(function () {
// $(':input[type="submit"]').prop('disabled', true);
// $('input[type="text"]').keyup(function () {
// if ($(this).val() != '') {
// $(':input[type="submit"]').prop('disabled', false);
// }
// });
//});

$("input:checkbox").on('click', function () {
var $box = $(this);
if ($box.is(":checked")) {
$box.parents("fieldset").find("label.label-check").removeClass('label_bold');
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
$box.parents('.custom_check').find('.label-check').addClass('label_bold');
}
else {
$box.parents("fieldset").find("label.label-check").removeClass('label_bold');
$box.prop("checked", false);

}
});

$("#radiogrouptarget input:checkbox").on('click', function () {
$("#divLoader").show();
debugger;
var $box = $(this);
var accounttype;
var promotiontype;
$("input:checkbox:checked").each(function () {
if ($(this).attr("id") == "chk_Cash" || $(this).attr("id") == "chk_House" || $(this).attr("id") == "chk_CashNHouse") {
accounttype = $(this).val();
}
else if ($(this).attr("id") == "checkboxGeneral" || $(this).attr("id") == "checkboxAce" || $(this).attr("id") == "checkboxLawn" || $(this).attr("id") == "checkboxLawnGdn" || $(this).attr("id") == "checkboxPaint")
promotiontype = $(this).val();

});

if ($box.is(":checked")) {
var data = JSON.stringify({
'accountType': accounttype,
'promotiontype': promotiontype
});

$.ajax({
type: 'Post',
url: '/api/TerdataListCount/PostListCount/?accountType=' + accounttype + '&promotiontype=' + promotiontype,
dataType: 'json',
//data:data,
//data: { 'accountType': accounttype, 'promotiontype':promotiontype},
success: function (data) {
var obj = jQuery.parseJSON(data);
if (obj.errorMessage != null || obj.errorMessage != '') {
$("#loginModal").modal('show');

$('#erroMessage').html("<p>" + obj.errorMessage + "<p>");

}
else {
$('#countDiv').show();

$("#countDiv").html(" <p>This list will send to approximatly" + obj.errorMessage + "recipients</p>");
}

$("#divLoader").hide();
// $("#loginModal").modal('show');
},
error: function (data) {
$("#divLoader").hide();
$("#loginModal").modal('show');
}
});
$("#loader").hide();
}
else {
$box.parents("fieldset").find("label.label-check").removeClass('label_bold');
$box.prop("checked", false);
}
});

//$("input:submit").on('click', function () {
// alert("Clicked");
// $("input:checkbox:checked").each(function () {
// alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
// });
//});

$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});

$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
// window.location.href = "http://http://localhost:3327/"
});
});

</script>

-----------------------
Controller:
[HttpPost]
public ActionResult SaveList(string accounttype, string promotiontype, string grouptype)
{

var resgrouptype = String.Join(" ", grouptype.Split(new string[] { " " }, StringSplitOptions.RemoveEmptyEntries)).Replace("\n","");
// var result = grouptype.Trim().Replace("\n ", "");
objAppSession.SaveSessionData(accounttype, promotiontype, resgrouptype);
return RedirectToAction("Index", "MailingListQuestions");
}

About ME

Tuesday, 17 April 2018

select a checked /selected check box along with values and call controller (Checkbox will be single selected)

No comments:

Post a Comment

About Me