Controller and javascript function not working together

Question

I have a form which onsubmit calls Controller function which leads to saving the data in the database. On the same button, I need to call a Javascript function. The function works separately but with the controller, it doesn't owrk.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Content</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="<?php echo base_url(); ?>stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="<?php echo base_url(); ?>stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="<?php echo base_url(); ?>stylesheets/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
        <link href="<?php echo base_url(); ?>stylesheets/bootstrap-theme.css" rel="stylesheet" type="text/css">
        <script type="text/javascript">
            function addinfo()
            {
                //Create an input type dynamically.   
                element = document.createElement("button");
                element.className='btn btn-default';
                var t=document.createTextNode("Edit");
                element.appendChild(t);
                element.id=t;
                //var account=document.getElementById('newaccname').value;

                var foo = document.getElementById("acc");
//                //Append the element in page (in span).  
                foo.appendChild(element);
//                    var d = document.getElementById('acc');
//                    d.appendChild(i);
            }
        </script>
    </head>

    <body>
        <?php
        echo form_open(base_url() . 'index.php/accounts_controller/addAccount   ', array('name' => 'myform'));
        ?>
        <div id='boxed'>
            <button type="button" name="addaccount" id="addaccount" class="btn btn-default" data-toggle="modal" data-target="#myModalacc">Add Account</button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModalacc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Add Account</h4>
                    </div>
                    <div class="modal-body">
                        <h5>New Account:</h5>
                        <input type="text" name="newacc" id="group" placeholder="Account"> 
                        <h5>Account Name:</h5>
                        <input type="text" name="newaccname" id="group" placeholder="Account Name"> 
                        <h5>Account Type:</h5>
                        <select id='acc' name='acc'>
                            <option value='Facebook'>Facebook</option>
                            <option value='Twitter'>Twitter</option>
                            <option value='Google+'>Google+</option>
                            <option value='LinkedIn'>LinkedIn</option>
                            <option value='Instagram'>Instagram</option>
                            <option value='Pinterest'>Pinterest</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <!--                        <button type="submit" name="addgroup" class="btn btn-primary" id="add" data-dismiss="modal">Add</button>-->
                        <button type="submit" name="addaccount" class="btn btn-default" onclick="addinfo()"/>Add
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div id="acc" style="width:500px;height:100px;border:1px solid #000;"></div>
        <?php
        echo form_close();
        ?>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="<?php echo base_url(); ?>javascripts/bootstrap.min.js"></script>
        <script src="<?php echo base_url(); ?>javascripts/bootstrap.js"></script>
    </body>
</html>

what is Your controllers folder structuer? and what is the name of Your controller? — Ripa Saha
– Ripa Saha, Commented Feb 14, 2014 at 6:09
Is it an AJAX call..?? No, I think..Then how the javascript can work while your page is redirected to the action page... — Sherin Jose
– Sherin Jose, Commented Feb 14, 2014 at 6:16

vignesh.D · Accepted Answer · 2014-02-14 06:09:07Z

0

Codeigniter

Define form and

can you add (onsubmit=return false ) in your form

Before u submit your form u can run your javascript function in view page itself

answered Feb 14, 2014 at 6:09

vignesh.D

7784 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

upjc Over a year ago

But I heard that form_open() and form tag both shouldn't be used.

vignesh.D Over a year ago

dont use form_open for that,use normal form action ,id and this onsubmit,,,it ll work

vignesh.D Over a year ago

did u gave onsubmit="return false"

upjc Over a year ago

Ya, on the button I gave onclick=addinfo() and in form tag I wrote onsubmit="return false"..

vignesh.D Over a year ago

can you give your full code now, within addinfo() function ,u first describe a javascript function what u want to process

|

Community · Accepted Answer · 2017-05-23 12:29:22Z

I don't think your code is bad, but your approach.

If you want to do some javascript after submitting a form, use AJAX, there's not many other options, maybe a form within an iframe, the one I mention at the end of the answers or some mystical trick, but you have the tools to do it right: js framework jQuery,using an MVC framework built with a robust server-side language (PHP) so again, use AJAX

Should be like dozens of questions/answers << ok maybe not that much>> about submitting forms with AJAX (few less with codeigniter) here in stackOverflow (I will update this answer with links during the day).

Learning how to use AJAX with CodeIgniter

CodeIgniter Ajax form - submitting form

I try to submit form by jQuery ajax() in Codeigniter ... but nothing happen ...:(

php - codeigniter ajax form validation

codeigniter and ajax contact form

And since you're already loading jQuery, use jQuery for the AJAX call.

Does exist the chance to use "document.referrer" to know if you page was loaded by your controller, then execute you js with $(document).ready(), I haven't tried that, but even if it works don't use it.

Collectives™ on Stack Overflow

Controller and javascript function not working together

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related