0

I am trying to create a form which will take the user input to create a query for database. I have three buttons: And, Or, Run.

I am creating dynamic elements on click of buttons And and Or.enter image description here

The div search_list is the container for containing the elements. I need the form to be submitted on click of Run.

The weird thing is, whenever I click on any button the form gets submitted. How do I stop it ? Please let me know If you need more info.

Thanks

        <html>
        <head>
        <script type="text/javascript">

            var count = 0;
            function loadfirst(){
                count=1;
                addFilter('');
            }
            function addFilter(flag){
                var div = document.querySelector("#search_list"); 
                tr = document.createElement("tr");
                select = document.createElement("select");
                var sear_value = document.createElement("input");
                var and_or = document.createTextNode(flag);
                tr.id='tr_'+count;
                select.id='sl_'+count;
                sear_value.id='sear_value_'+count;

                select.options.add( new Option("user id","user_id", true,true) );
                select.options.add( new Option("First name","first_name"));
                select.options.add( new Option("Last name","last_name"));
                select.options.add( new Option("Course","course"));

                sear_value.type="text";

                if(count<=1){
                    var bt_and= document.createElement("button");
                    bt_and.id='and';
                    var bt_label = document.createTextNode("And");
                    bt_and.appendChild(bt_label);
                    bt_and.addEventListener('click', function() {
                        addFilter('and');
                        return false;
                    });

                    var bt_or= document.createElement("button");
                    bt_or.id='or';
                    var bt_label = document.createTextNode("Or");
                    bt_or.appendChild(bt_label);
                    bt_or.addEventListener('click', function() {
                        addFilter('or');
                        return false;
                    }); 
                }
                else{
                    var bt_rem= document.createElement("button");
                    bt_rem.id='rem_'+count;
                    var bt_label1 = document.createTextNode("x");
                    bt_rem.appendChild(bt_label1);
                    var tr_id = 'tr_'+count;

                    bt_rem.addEventListener('click', function() {
                    var element= document.getElementById(tr_id);
                        element.parentNode.removeChild(element);
                        return false;
                    });
                }

                tr.appendChild(and_or);
                tr.appendChild(select);
                tr.appendChild(sear_value);
                if(count<=1){
                    tr.appendChild(bt_and);
                    tr.appendChild(bt_or);
                }
                else{
                    tr.appendChild(bt_rem);
                }
                div.appendChild(tr);

                count++;
            }

            function getFilter(){

                alert();

            }




        </script>
        </head>

        <body onload="loadfirst()">

        <span id='manage_stud_header' class= 'list_header'>

            <label><?php echo $module_name;?></label>
            &nbsp;&nbsp;
            <center>
                <form>
                <div id='search_list' class='search'></div>
                <button id="run_filter" type="submit">Run</button>
                </form>
            </center>

        </span>
        </body>
        </html>

2 Answers 2

2

The default type for buttons is "submit", so you have to explicitly say you want a plain button:

var bt_and= document.createElement("button");
bt_and.type = "button";

This way it won't submit the form when clicked. (unless of course you tell it to :))

1
  • 1
    I was such a fool. It was such a small thing, which i forgot :) Feb 9, 2015 at 5:40
0

you have to change

 <button  id = "run_filter"  type = "submit" > Run </button> 

in

 <input  id = "run_filter"  type = "submit" value="Run" />

and then if the behaviour of click on button is forced to reload the page try to change button on other form element or see e.preventdefaulT of jquery

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.