Monday, 24 April 2017

Jade load body based on Javascript button

I am trying to create a website using Javascript node and Jade, I am very new to this and am currently stuck. I have a page called 'formBuilder' when it loads it needs to display just a simple form on the left, I have that here in Jade:

form(method="post")#builder-form.form-horizontal.well
    h2
    h6#sub1 Would you like to build a new form or edit an existing one?
    hr
    .form-group
    .form-left-buttons
        button(type='button')#builder-form-btn1.btn.btn-default
    .form-group
    .form-left-buttons
        button(type='button')#builder-form-btn2.btn.btn-default
    .form-group
    .form-left-buttons
        button(type='button')#builder-form-btn3.btn.btn-default
    .form-group

Now, when a button is pressed I want another form to be loaded inline with this one. So, whereas the above form is on the left side of the page I would like the other form to be in the center-right of the page. The buttons are made in JavaScript and currently are simply:

// bind event listeners to button clicks //
var that = this;

//  Handle Home button pressed //

$('#btn-Home').click(function() {window.location.href = '/home';})

// Handle New Form //
$('#builder-form-btn1').click(function(){that.newForm(); });

// Handle Open Form //
$('#builder-form-btn2').click(function(){that.openForm(); });

// Handle Delete Form //
$('#builder-form-btn3').click(function(){that.deleteForm(); });


this.newForm = function()
{

}

this.openForm = function()
{

}

this.deleteForm = function()
{

}

I am not sure what to put inside the button click functions. I have tried creating a variable within the JavaScript and changing it but it has no effect, I have also tried making an AJAX GET request as well as a POST, I feel I may have done those wrong as well. I am really unsure about how to go about doing this, like I said earlier, I am very new to JavaScript, Jade and website programming to be honest.

Any and all help would be greatly appreciated.

Thanks in advance.



via Michael Ingram

No comments:

Post a Comment