CODEWITHSUNDEEP
javascriptjquery
JorgeAlberto
JorgeAlberto

Reputation: 61

How to control buttons wih jquery

I'm new with jquery but I will try to explain my problem the best I can, this is my problem: I have one input, i will write one random question inside it for example- How old are you? I have 2 buttons the first one says: Put above and the second one is put below ... now I already have 2 questions and one checkbox with each question, if I write on the input and click the first button that question will be the first question "it will be above the other ones (it will include the checkbox)" and if I click the second button it will be below the other ones "it will include the checkbox"

The question is, how can I do that, I need to save all the row? or how Here is my source code, it's all that I have at this moment:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/file2.js"></script> 
</head>
<body>
<div id="id" class="mi_clase">
<input type="text" id="pregunta">
<button id="arriba" type="button">Poner arriba</button>
<button id="abajo" type="button">Poner abajo</button>
    <table><tbody>
    <tr>
    <td>Te gusta el cine?</td>
    <td><input type="checkbox" value="1"/></td>
    <td id="eliminar">Eliminar</td>
    </tr>
    <tr>
    <td>Te gusta los tacos?</td>
    <td><input type="checkbox" value="2"/></td> 
    <td id="eliminar">Eliminar</td>
    </tr>
    </tbody></table>
    <button id="guardar" type="button">Guardar</button>     
</div>
<div class="mi_clase">


</div>
</body>
</html>

And here is the js

$(document).ready(function() {
$("#guardar").click(function() {
var seleccionados = $.makeArray($(':checkbox').map(function(i, item) {
    if($(item).is(':checked'))
    return parseInt($(item).val());
}));

console.log(seleccionados);
});

$("#eliminar").click(function(){

});

$("#arriba").click(function(){
    var p = $("#pregunta").val();
    console.log(p);
    var td1 = $("<td></td>").text(p);
    var td2 = $("<td><input type='checkbox' value='2' /></td>");
    var td3 = $("<td></td>");
if(p != ""){

}
});

$("#abajo").click(function(){

if($("#pregunta").val() !=""){
$("tbody").append();
}
});

});

Upvotes: 0

Views: 491

Answers (2)

Bindrid
Bindrid

Reputation: 3735

Still not sure what you are trying to accomplish. I wrote some code that, After inserting the first row, with will prepend or append after the selected row. A radio button is used to select the target row. The radio button is also used targeting the row for the delete.

     <script type="text/javascript">

            $(document).ready(function () {

                $("#guardar").click(function () {
                    $(":radio:checked").closest("tr").remove();
                });

                $("#arriba").click(function () {
                    var p = $("#pregunta").val();
                    if (p.length > 0) {
                        var $tr = createRow(p);
                        // first added row, just put it at the bottom
                        if ($(":radio").length == 0) {
                            // no rows added yet
                            $("table tbody").append($tr);
                        }
                        else {
                            if($(":radio:checked").length == 0){
                                // rows added but now rows selected so put it first.
                                $($(":radio")[0]).closest("tr").before($tr);
                            }
                            else{
                                $(":radio:checked").closest("tr").before($tr);
                            }
                        }
                        $("#pregunta").val("");
                    }
                });

                $("#abajo").click(function () {
                    var p = $("#pregunta").val();
                    if (p.length > 0) {
                        var $tr = createRow(p);
                           // first added row, just put it at the bottom
                        if ($(":radio").length == 0 || $(":radio:checked").length == 0) {
                            // no rows added yet
                            $("table tbody").append($tr);
                        }
                        else {
                            $(":radio:checked").closest("tr").after($tr);
                        }
                        $("#pregunta").val("");
                    }
                });

            });
            function createRow(p) {
                var $tr = $("<tr></tr>");
                $tr.append("<td>" + p + "</td>")
                $tr.append("<td><input type='radio' name='rdo' value='2' /></td>");
                $tr.append("<td></td>");
                return $tr;
            }
        </script>

and 

     <form name="form" action="action.php" method="post" onsubmit="return validation()">
            <div id="id" class="mi_clase">
                <input type="text" id="pregunta">
                <button type="button" id="arriba">Put Above</button>
                <button type="button" id="abajo">Put Below</button>
                <table>
                    <tbody>
                        <tr>
                            <td>Te gusta el cine?</td>
                            <td><input type="checkbox" value="1" /></td>
                            <td id="eliminar">Delete</td>
                        </tr>
                        <tr>
                            <td>Te gusta los tacos?</td>
                            <td><input type="checkbox" value="2" /></td>
                            <td id="eliminar">Delete</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" id="guardar">Guardar</button>
            </div>
            <div class="mi_clase"></div>
    </form>

Upvotes: 1

Mohamed Amin
Mohamed Amin

Reputation: 26

I would suggest 2 things? 1.Put a visual to understand what do you want 2.Never Name selectors or variables on gibberish based :)

From what I'v understood that you need to delete rows based on checkbox marked, Right? If so.. its quit simple I made this codepen for you:

EDIT1: http://codepen.io/Mohamedamin/pen/vLJQEE

$('#down').on('click', function(){
  var question = $('#pregunta').val()
  $('.stuff').append(makeRow(question));
});
$('#up').on('click', function(){
  var question = $('#pregunta').val()
  $('.stuff').prepend(makeRow(question));
});

$('#save').on('click',function(){
   var checked = $('input:checked').closest('tr')
   console.log(checked)
});
function makeRow(question){
  var row = '<tr>' +
         '<td>' + question +'</td>' +
         '<td><input type="checkbox"/></td> ' +
         '</tr>'
  return row;
};

Upvotes: 1

Related Questions