Hi,
I have a Bootstrap modal setup as below, with DIVs that are supposed to be linked to the Kendo UI divs.
However, upon clicking the submit button, the form is not hidden (visible: hideMain) and the message is not presented (visible: confirmed). Despite the divs and JS being setup correctly.
What should happen is that when "send message" is clicked, the form div should hide and the message div should appear.
I have a Bootstrap modal setup as below, with DIVs that are supposed to be linked to the Kendo UI divs.
However, upon clicking the submit button, the form is not hidden (visible: hideMain) and the message is not presented (visible: confirmed). Despite the divs and JS being setup correctly.
What should happen is that when "send message" is clicked, the form div should hide and the message div should appear.
<!-- Button to trigger modal -->
<
a
href
=
"#emailModal"
role
=
"button"
class
=
"btn btn-primary"
data-toggle
=
"modal"
>Email Us</
a
>
<!-- Modal -->
<
div
id
=
"emailModal"
class
=
"modal hide fade"
tabindex
=
"-1"
role
=
"dialog"
aria-labelledby
=
"emailModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
aria-hidden
=
"true"
>×</
button
>
<
h3
id
=
"emailModalLabel"
>Email Us</
h3
>
</
div
>
<
div
class
=
"modal-body"
>
<!-- Email Form -->
<
div
data-bind
=
"visible: hideMain"
>
<
form
>
<
fieldset
>
<
p
><
label
>Title</
label
><
br
/>
<
select
data-bind
=
"source: titles, value: title"
></
select
><
br
/>
<
label
>First Name</
label
><
br
/>
<
input
type
=
"text"
data-bind
=
"value: firstName"
/><
br
/>
<
label
>Last Name</
label
><
br
/>
<
input
type
=
"text"
data-bind
=
"value: lastName"
/><
br
/>
<
label
>Company Name </
label
><
br
/>
<
input
type
=
"text"
data-bind
=
"value: companyName"
/><
br
/>
<
label
>Email Address</
label
><
br
/>
<
input
type
=
"text"
data-bind
=
"value: emailAddress"
/><
br
/>
<
label
> Phone Number</
label
><
br
/>
<
input
type
=
"text"
data-bind
=
"value: phone"
/><
br
/>
<
label
>Subject Name</
label
><
br
/>
<
select
data-bind
=
"source: subjects, value: subject"
></
select
><
br
/>
<
label
>Message Body</
label
><
br
/>
<
textarea
data-bind
=
"value: message"
cols
=
"100"
rows
=
"10"
></
textarea
></
p
>
</
fieldset
><
br
/>
<
p
><
label
class
=
"checkbox"
><
br
/>
<
input
type
=
"checkbox"
data-bind
=
"checked: agreed"
> I agree to your terms & conditions and privacy policy<
br
/>
</
label
></
p
>
<
div
class
=
"form-actions"
>
<
p
><
button
data-bind
=
"enabled: agreed, click: register"
class
=
"btn btn-primary"
>Send message</
button
></
p
>
</
div
>
</
form
>
</
div
>
<!-- End Email Form -->
<!-- Confirm Message -->
<
div
data-bind
=
"visible: confirmed"
>
<
p
><
span
data-bind
=
"text: message"
></
span
></
p
>
</
div
>
<!-- End confirm Message -->
</
div
>
<
div
class
=
"modal-footer"
>
<
button
class
=
"btn"
data-dismiss
=
"modal"
aria-hidden
=
"true"
>Close</
button
>
<!-- <button class="btn btn-primary" data-bind="enabled: agreed, click: register">Save changes</button> -->
</
div
>
</
div
>
<!-- end modal -->
$(document).ready(
function
() {
//jQuery(document).ready(function($) {
var
viewModel = kendo.observable({
title:
"Mr"
,
titles:[
"Mr"
,
"Mrs"
,
"Ms"
,
"Dr"
,
"Sir"
,
"Prof"
],
firstName:
""
,
lastName:
""
,
companyName:
""
,
emailAddress:
""
,
phone:
""
,
subject:
"Sales Request"
,
subjects:[
"Sales Request"
,
"Literature Request"
,
"Recruitment Question"
,
"Comment"
,
"Other Request"
],
message:
""
,
agreed:
false
,
confirmed:
false
,
hideMain:
true
,
messageID:
""
,
register:
function
(e) {
var
that =
this
;
$.post(
"http://myurl/tools/email_form.php"
,{
"title"
:viewModel.get(
"title"
),
"firstName"
:viewModel.get(
"firstName"
),
"lastName"
:viewModel.get(
"lastName"
),
"companyName"
:viewModel.get(
"companyName"
),
"emailAddress"
:viewModel.get(
"emailAddress"
),
"phone"
:viewModel.get(
"phone"
),
"subject"
:viewModel.get(
"subject"
),
"message"
:viewModel.get(
"message"
)
},
function
(data) {
that.set(
"messageID"
, data.message);
console.log(data.message);
},
"json"
);
e.preventDefault();
this
.set(
"confirmed"
,
true
);
this
.set(
"hideMain"
,
false
);
},
startOver:
function
() {
this
.set(
"confirmed"
,
false
);
this
.set(
"agreed"
,
false
);
this
.set(
"hideMain"
,
true
);
this
.set(
"firstName"
,
""
);
this
.set(
"lastName"
,
""
);
this
.set(
"companyName"
,
""
);
this
.set(
"emailAddress"
,
""
);
this
.set(
"phone"
,
""
);
this
.set(
"subject"
,
"Sales Request"
);
this
.set(
"message"
,
""
);
this
.set(
"messageID"
,
""
);
this
.set(
"title"
,
"Mr"
);
}
});
kendo.bind($(
"form"
), viewModel);
});