Jquery overlay data input

Question

• Setup: website with data that can be manipulated (CRUD).
• Goal: click on add button to add and get a screen that asks data with 3 input fields.
• How: click on add button -> overlay form appears with 3 input fields -> click on "use data" button to add -> data appears in the table (new tr)

HTML:

<img id="addbutton" src="./images/addbutton.png" />

<table id="data">
<tr><td>Title</td></tr>
<tr><td>data 1</td><td>data 1</td><td>data 1</td></tr>
<tr><td>data 2</td><td>data 2</td><td>data 2</td></tr>
<tr><td>data 3</td><td>data 3</td><td>data 3</td></tr>
</table>

Overlay html:

<input type="text" name="dataField1">
<input type="text" name="dataField2">
<input type="text" name="dataField3">

Question: How can I do this with JQuery?

Answer 1

This solution isn't really best practice for hooking up javascript events/functions when using jQuery, but it should server well to illustrate the mechanisms you need:

The function to show the dialog:

function showModalDialog() {

    //Declare an overlay to fade out the primary view.
    var overlay = $('<div id="overlay" style="position:fixed;overflow:hidden; height: 100%; width: 100%;background-color: rgba(0,0,0,0.5);z-index: 1;" />');

    //Declare a dialog to hold the input fields.
    var dialog = $('<div id="modal" style="position:absolute;top: 50%; left: 50%;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:350px; z-index: 2;background-color: white;" />');

    //Add content to the dialog.
    dialog.append('<h3>Create</h3>');
    dialog.append('<label style="display: block;">Data field 1: <input type="text" id="dataField1" /></label>');
    dialog.append('<label style="display: block;">Data field 2: <input type="text" id="dataField2" /></label>');
    dialog.append('<label style="display: block;">Data field 3: <input type="text" id="dataField3" /></label>');
    dialog.append('<input type="button" id="btnCreate" value="use data" onclick="useData();" />');

    //Show the overlay and the dialog.
    $('html').prepend(overlay);
    $('html').prepend(dialog);
}

The function to get the values and add them to the table:

function useData() {

    //Get the values.
    var value1 = $('#dataField1').val();
    var value2 = $('#dataField2').val();
    var value3 = $('#dataField3').val();

    //Append the new values to the table.
    $('#data').append($('<tr />')
        .append($('<td />').html(value1))
        .append($('<td />').html(value2))
        .append($('<td />').html(value3))
        );

    //Remove the overlay and dialog.
    $('#overlay').remove();
    $('#modal').remove();
}

JsFiddle demonstrating the code, but updated to perform the hook-up of events in $(document).ready():

http://jsfiddle.net/AUTra/

Answer 2

Try this way

Script

$(document).on('click', '#addbutton', function () {
    $('#fpwd').bPopup({
        closeClass: 'b-close',
        speed: 450,
        transition: 'slideDown'
    });
});

function tab_data() {
    var x = $('#val1').val();
    var y = $('#val2').val();
    var z = $('#val3').val();
    if (x != null && y != null && z != null) {
        $('.b-close').click()
        var html = "<tr><td>" + x + "</td><td>" + y + "</td><td>" + z + "</td></tr>";
        $("#data").append(html);
        $('.reg_form')[0].reset();
    } else {
        alert("You must fill all the inputs")
    }
}

DEMO

I used this plugin http://dinbror.dk/bpopup/

Answer 3

$('#data').append("<tr><td>"+$('[name=dataField1]').val()+"</td><td>"+$('[name=dataField2]').val()+"</td><td>"+$('[name=dataField3]').val()+"</td></tr>")

or

var field1 = $('[name=dataField1]').val();
var field2 = $('[name=dataField2]').val();
var field3 = $('[name=dataField3]').val();
var html = "<tr><td>"+field1+"</td><td>"+field2+"</td><td>"+field3+"</td></tr>";


$("#data").append(html);