Jquery + form submit... in a need of fresh set of eyes

Question

Hello,

I do struggle with it as hell. Can someone tell me what is wrong with that code.

In a word: CI + jquery form submit. I try to add inline row.

• java part

      var pair = $('#pair').attr('value');
      var entry = $('#entry').attr('value');
      var exit = $('#exit').attr('value');
      var buysell = $('#buysell').attr('value');
      var pl = $('#pl').attr('value');
  var dataString = 'pair='+ pair +'&entry='+ entry +'&exit='+ exit +'&buysell='+ buysell +'&pl='+ pl;
    $("form#submit").submit(function() {
          $.ajax({ 
              type: "POST",
              url: "<?php echo base_url();?>journal/add",
              data: dataString,
              success: function(){
                      $("#message").text("Added").fadeOut(4000, function() {
                          $(this).css('display','block').text("");
                      });
              }
          });
  });
  

• controller part (works if not using java, and yet it's too simple not to work)

      $data['pair'] = htmlspecialchars(trim($_POST['pair']));
      $data['entry'] = htmlspecialchars(trim($_POST['entry']));
      $data['exit'] = htmlspecialchars(trim($_POST['exit']));
      $data['buysell'] = stripslashes(trim($_POST['buysell']));
      // Insert_data
      $this->journal_model->add_trade($data);
  

If someone will be able to help, please do... :(

Cheers,

/Jacek

Answer 1

the one think that jumps out at me is the php echo statement. is this in a php file? if not, that's your problem.

Answer 2

Try using $('form').serialize() instead of manually creating data string. If any of the fields are empty, your manually created dataString may not be correct. For example, if the buysell field was empty, the dataString would be pair=data&entry=data2&exit=data2&buysell=&pl=data3, as you can see buysell is empty, and this dataString is not valid.

$("form#submit").submit(function() {
    $.ajax({ 
        type: "POST",
        url: "<?php echo base_url();?>journal/add",
        data: $('form').serialize(),
        success: function(){
                $("#message").text("Added").fadeOut(4000, function() {
                    $(this).css('display','block').text("");
                });
        }
    });
});

This can also be written using the $.post() shorthand.

$.post('<?php echo base_url();?>journal/add', $('form').serialize(), function(){
    $("#message").text("Added").fadeOut(4000, function() {
        $(this).css('display','block').text("");
    });
});

Answer 3

After some woking out... I have it working in IE (wow :O ) but not in Safair/FF/Chrome :S

Function looks like that now:

    $("form#add_trade_form").submit(function() {
        dataString = $("form#add_trade_form").serialize();
        $.ajax({
            type: "POST",
            url: "<?php echo base_url();?>journal/add",
            data: dataString,
            cache: false,
            lsuccess: function() {
                $("#message").html("Saved... ").fadeOut(4000, function() { 
                    $(this).css('display', 'block').text("");
                });
            }

        });

    });

Any ideas?

PS. Thanks Rocky ... it moved me forward...