0

I want save SVG data in a database. I will try with a simple submit and also with AJAX. I also set content-type="image/svg-xml"

I will check data with print_r($_POST); SVG Content displayed here when I will try to store on db svg value as null.

<?php echo form_open('admin/shape/add',array('class' => 'form-horizontal', 'name' => 'catfrm', 'id' => 'catfrm')); ?>
  <div class="box-body">
    <div class="col-md-8">
      <div class="form-group">
        <label class="col-sm-2 control-label">Title&nbsp;<span class="error">*</span></label>
        <div class="col-sm-10">
          <input type="text" name="title" value="" id="title" class="form-control" />
        </div>
      </div>
      <!-- form-group -->
    </div>
    <div class="col-md-8">
      <div class="form-group">
        <label class="col-sm-2 control-label">Content&nbsp;<span class="error">*</span></label>
        <div class="col-sm-4" id="shape_priview" height="30px">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,100,100"><polygon points="50 0, 0 100, 100 100"></polygon></svg>
        </div>
        <div class="col-sm-6">
          <textarea name="content" id="shape_content" class="form-control"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,100,100"><polygon points="50 0, 0 100, 100 100"></polygon></svg></textarea>
        </div>
      </div>
      <!-- form-group -->
    </div>
  </div>
  <div class="box-footer" align="center">
    <button type="submit" class="btn btn-success">Add</button>
    <button type="reset" class="btn btn-dark" onclick="window.location.href = '<?php echo site_url('admin/shape'); ?>'">Cancel</button>
  </div>
<?php echo form_close();?>

$(document).ready(function() {
  $("#shape_content").on("change keyup paste", function() {
    $("#shape_priview").text('');
    var shape_content = $("#shape_content").val();
    $("#shape_priview").html(shape_content);
  });
  $("#catfrm").validate({
    rules: {
      title: {
        required: true,
      }
    },
    messages: {
      title: {
        required: "Title is required",
      }
    },
    submitHandler: function(form) {
      $("#catfrm").submit(function(event) {
        event.preventDefault();
        var content = $("#shape_content").val();
        var title = $("#title").val();
        alert(content);
        $.ajax({
          type: "post",
          url: "<?php echo site_url('admin/shape/add'); ?>",
          data: {
            "title": title,
            "content": content
          },
          contentType: "application/json",
          success: function(responseData, textStatus, jqXHR) {
            alert(responseData);
            alert("data saved")
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
          }
        })
      });
    }
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Reena Mori
  • 647
  • 6
  • 15
  • PHP does not populate $_POST if you send any other Content-Type than `application/x-www-form-urlencoded` or `multipart/form-data`. If you want to send JSON, then see https://stackoverflow.com/questions/18866571/receive-json-post-with-php – 04FS Feb 18 '19 at 09:41
  • And FYI, this is not valid textarea content to begin with. You can not put additional _elements_ into a textarea, it needs to be _text_. `<`, `>` and `&` should be properly encoded in that textarea content. – 04FS Feb 18 '19 at 09:42
  • @04FS i did not get your last point can you please explain more. – Reena Mori Feb 18 '19 at 10:04
  • A textarea element needs to contain _text_, and _only_ text. You put SVG elements inside it instead, which is technically wrong, and you are relying on the browser’s error correction here to fix that for you. Don’t put _tags_ in there, but replace the mentioned characters with the appropriate HTML entities. – 04FS Feb 18 '19 at 10:07
  • @04FS i solved my issue using simple form submit and we can write tag inside textarea ex tinymce editor and ckeditor – Reena Mori Feb 18 '19 at 11:03

0 Answers0