0

Background I have a form that once submitted displays a bootbox dialog. If yes is selected on the form then the form detailed are posted.

Problem

Once yes has been clicked on on the dialog i would like a div to appear saying "thank you bla la"

My solution

I've added the div and hidden in using CSS 

.fConfirm { display:hidden; }

then in my js once the form as submitted i've tried to change the CSS properties by adding this line

$('.fConfirm').css({display:inline-block; height: 680px; width:940px;});

This line of code however kills the whole function and stops the dialog from appearing?

Am I approaching this the wrong way?

"fConfirm" Div

<div class="fConfirm"> <h2>Thank you</h2> <p>Columbus Car Finder Group will now start looking for your perfect car and will contact you by one of the contact methods you have given us. If you have any questions or would like to change anything about your search feel free to either call or send us an email. </p> </div>

JQuery

 $('#form1').submit(function(e) { var currentForm = this; e.preventDefault(); bootbox.confirm("Are you sure?", function(result) { if (result) { console.log("before display"); currentForm.submit(); $('.fConfirm').css({display:inline-block; height: 680px; width:940px; background: rgb(192, 192, 192); background: rgba(192, 192, 192, 0.5)); console.log("after display"); } }); });
Improve this question
3
  • 1
    Could it be the lack of quotes everywhere ? Commented Mar 11, 2014 at 20:22
  • 1
    Use selector $('.fConfirm') instead of $('.confirm'). Your div has class fConfirm. Commented Mar 11, 2014 at 20:22
  • @NicolaeOlariu Sorry no that was me making a change last min then not changing it properly on her. Edited question now. Commented Mar 11, 2014 at 21:03

4 Answers 4

Reset to default
3

Object properties are separated via a comma, not semi-colon. Also, be sure to quote the properties value for display -- it is currently trying to subtract variable block from variable inline:

$('.FConfirm').css({ display:"inline-block", height: 680, width: 940 });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

As you noticed when editing, the problem is not the px or lack thereof, but the lack of quotes around values that was causing the browser to think OP was trying to subtract the value of block from the value of inline - neither of which exist.
@NiettheDarkAbsol -- Yup, thanks for the clarification as well. Updated the answer.
IT was that indeed @tymeJV, Thank You.
2

You're better off using .addClass in this situation:

Hide class initially:

.fConfirm { display: none; }

Create a class to be added when you want to show:

.my_class { display:inline-block; height: 680px; width:940px; }

Use jQuery to fire:

$('.fConfirm').addClass('my_class');

The reason this is ideal is because it keeps your CSS separate from your JS, which will prove beneficial over time. If you're only using this class with JS, it would be OK to prepend the class with "js" (i.e. ".js-my_class")

Improve this answer

3 Comments

I need the class hidden until form is submitted. Thus why i have chosen to create class like you have done, but then change the CSS instead of adding it. Or am i misunderstanding your answer?
.fConfirm will still be hidden via your original post's CSS. The new class "my_class" will only be added when the jQuery above fires. I'll edit my answer to explain better.
Ahh i see, it's alway best to keep the CSS seperate from the HTML. I will change my implementation but the answer by @tymeJV answer my actual question. Thank you for showing me this better way of doing what i needed.
0

Wrap values in quotes, otherwise JS will think they are variables:

$('.fConfirm').css({display:'inline-block', height: '680px', width:'940px'});

Also, note that your div's class is actually fConfirm, neither FConfirm, nor confirm.

Improve this answer

1 Comment

Thank you for your response, however wrap all the values is not necessary in this occasion. And thanks for the head up on the typos, changed my code last minute and didn't update my question properly.
0

jQuery's submit function is just a way of intercepting the 'submit' event that is triggered when someone submits a form in whatever way.

The way i think of it is: "ok, we have this form called X and then, when someone triggers the submit of this form, don't act as it would normally do (lets prevent the default) and perform something different".

What you're doing is ok when talking about handling the submit event but you're calling .submit() at the end, which will then do what you don't want - perform the submit and then "kill the method".

See the fiddle: http://jsfiddle.net/knLkw/

tl;dr: don't call .submit later, but perform something async.

Improve this answer

2 Comments

Ciosta, You are correct in what you are saying, i'm yet to add the the ajax.post() to tell it what to do once prevented default. I'm experimenting with different implementation of submitting a form at the moment.
I do see what you mean though as soon as the form is submitted it posts the data, refreshing the page thus undoing the change of CSS style.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.