HTML form on submit and javascript not working

Question

I've looked over many threads and can't seem to find a working solution for my problem. I am new to javascript and am looking for assistance in allowing my page to run javascript and submit a form by clicking one submit button. I am using codeigniter, and am calling a javascript function called uploadEx(); to submit a canvas to a directory. Submitting to the directory works by itself but not as the same button as the submit for the form. If someone could help me make the button share both actions that would be great.

<div>

    </div>

    <form method="post" accept-charset="utf-8" name="form1">
        <input name="hidden_data" id='hidden_data' type="hidden"/>
    </form>

    <script>
        function uploadEx() {
            var canvas = document.getElementById("canvasSignature");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form1"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/inc/img/inspection/upload_data.php', true);
            document.forms["form"].submit();

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                   //alert('Succesfully uploaded');
                }

            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };
    </script
<div align="center">

  <?php if( !function_exists('form_open')): ?>
  <?php $this->load->helper('form'); ?>
  <?php endif;?>
  <form  id="form" onClick="uploadEx(); return true;" method="post">



  <?php echo form_label('Trailer Number','trlr_num'); ?>
  <?php echo form_input(array('name'=>'trlr_num','type'=>'text')); ?>

  <?php echo form_label('Seal','seal'); ?>
  <?php echo form_input(array('name'=>'serial_num','type'=>'text')); ?>


  <?php echo form_fieldset_close(); ?>
  <br />

  <input type="submit" name="submit" value="submit" content="submit"/>
<?php echo form_close(); ?>

magowan90 · Accepted Answer · 2015-04-17 21:33:29Z

1

I was able to resolve my problem by using Imran Qarner's suggestion by moving the onsubmit event out of the php code that calls codeigniter.

answered Apr 17, 2015 at 21:33

magowan90

14711 bronze badges

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

Comments

Imran Qamer · Accepted Answer · 2015-04-16 17:36:21Z

0

Have u tried onsubmit event instead of onclick? i think so it will work for you. moreover what is the functionality of your first <form>.......</form> ?

answered Apr 16, 2015 at 17:36

Imran Qamer

2,2633 gold badges33 silver badges54 bronze badges

1 Comment

magowan90 Over a year ago

I attempted onsubmit instead of onclick and it will not run. If I create an input as a checkbox and onclick then it runs the function every time I click like expected. If I try onsubmit in that same scenario it does not go through. Also, I am using the first form to post data to my upload_data.php file. That file takes the image and decodes to base64, renames it, and places it in a directory.

Collectives™ on Stack Overflow

HTML form on submit and javascript not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related