-1

I have this form which is used for posting message whose js file is as follows. I want to prevent default action of the form and submit using ajax ::::

function iFrameOn()
{
 richTextField.document.designMode = 'On';
}
function iBold()
{
 richTextField.document.execCommand('bold',false,null);
 
}
function iItalic()
{
 richTextField.document.execCommand('italic',false,null);
 
}

function iLink()
{
 var linkURL = prompt('Enter the URL for this link:','http://');
 richTextField.document.execCommand('CreateLink',false,linkURL);
 
}

 
function submit_form(){
  var theForm = document.getElementById('myform');
  theForm.elements["message"].value = window.frames['richTextField'].document.body.innerHTML;
  
  $('#myform').submit();
  
  $('#myform').submit(function(e) {
   e.preventDefault();
   var formData = new FormData(this);
   console.log($('#myform').attr('action'));
    $.ajax({
    type:'POST',
    url: $(this).attr('action'),
    data:formData,
    cache:false,
    contentType: false,
    processData: false,
    success:function(data){
     console.log(data);
    },
    error: function(data){
     console.log("error");
     console.log(data);
    }
   });
  });
 }
 else
  alert("Your message is empty");
}
**THE FORM IS**
<form method="POST" action="dmessage3.php" name="myform" id="myform" class="form1" >  
<textarea name="message" id="myTextArea" cols="100" rows="14" style="display:none;"></textarea>
<iframe name="richTextField" id="richTextField"  ></iframe>

<div id="toolbar" class="toolbar">
<input type="button" onClick="iBold()" value="B" class="tools" >
<input type="button" onClick="iItalic()" value="I" class="tools">
<input type="button" onClick="iLink()" value="Link" class="tools">
</div>

<input type="hidden" name="id1" value="1">
<input type="hidden" name="id2" value="2">
<input name="myBtn" type="button" value="Submit data" onClick="javascript:submit_form();">
</form>

But the form is not posting using ajax

rapidRoll
  • 300
  • 1
  • 9

1 Answers1

1

If you want to use the e.preventDefault(), you'll need to use it in a jQuery .on() kind of call. Not on an onClick in the html. Or, if you're going to use the onclick in your html, then you'll need to add a return false; at the end of that function. Here is a link if you want to know more about this.

Here is a version that should work for you (depending on which jQuery version you're using). I wasn't sure what the else {} clause at the end of your submit_form() function was for, but I removed it (an else-clause needs an if-clause preceding it to be valid).

function submit_form(){
    var theForm = document.getElementById('myform');
    theForm.elements["message"].value = window.frames['richTextField'].document.body.innerHTML;

    var formData = new FormData(this);
    console.log($('#myform').attr('action'));
    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            console.log(data);
        },
        error: function(data){
            console.log("error");
            console.log(data);
        }
    });
}

$('#myBtn').on('click', function(e) {
    e.preventDefault();
    submit_form();
});

And with this code, just remove the onClick attribute from your html-form button, like so:

<input name="myBtn" type="button" value="Submit data" />

And also make sure you have either a closing tag to all your html tags that need a closing tag, or add a / at the end of your tag like the line above to make it a self-closing tag.

Community
  • 1
  • 1
3abqari
  • 228
  • 1
  • 2
  • 10
  • The code is working fine with textarea but with iframe it's not responding...Please suggest something – rapidRoll Jun 27 '15 at 10:45
  • What use is your iframe inside the form? Can you take it outside the form html-tags? – 3abqari Jun 27 '15 at 11:02
  • An iFrame is essentially a window to another browser session. The contents of the iFrame are not actually inside your page, therefore you cannot submit them as part of a form. – 3abqari Jun 27 '15 at 11:04
  • I have put the contents of iframe in textarea /// theForm.elements["message"].value=window.frames['richTextField'].document.body.innerHTML; ///// It's like important to use iframe coz i have made text editor – rapidRoll Jun 27 '15 at 12:06
  • Can you put the iFrame above the `
    ` tags? It's technically not part of the form, except in your javascript.     – 3abqari Jun 27 '15 at 12:13