0

I started using jquery and jquery-ui. I am facing a problem trying to submit a form that is inside a tab. Once i hit 'submit', the page refresh itself, the tabs are gone, and the url is changed to the tab's function url. the submit button is working, and i get the desired result. However, it is not on the same page as the tabs.

Does anyone have any idea on how to keep the page from refreshing?

example of my problem:

I have a page called 'index.php' with 3 different tabs. one of the tabs is called 'submit form' where there I have a form using POST method, it is taking its source from 'form.php'. once i hit the 'submit' button, the page refreshes, the url changes from 'www.example.com' to 'www.example.com/form.php', i get the result there, but the page is "plain", means that its not under a tab, just a normal page.

I hope I explained myself correctly.

Thanks!

EDIT: here is my submission code:

$submit = $_POST['submit'];
$name= $_POST['name'];

if($submit){
echo 'submitted <br><br>';
echo "hello $name";
}
Baruch
  • 1,548
  • 5
  • 21
  • 42
  • You did explain the problem quite good. But you missed the section of 'what have you tried' – hjpotter92 Apr 14 '12 at 04:46
  • I went to the jquery website and checked the tab section and didn't find an answer, also, i checked this website and googled my problem. I didn't find anything that helped, and also, I didnt understand their explanation. – Baruch Apr 14 '12 at 04:48
  • it has nothing to do with jquery ui the problem is in your php – COLD TOLD Apr 14 '12 at 04:56

2 Answers2

0

Capture the form submission in jQuery and then stop it with preventDefault();

$(function(){
  $('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });
});

EDIT:

i should add that I chose to use on(); as opposed to the default submit(). This is because the form may or may not be available at DOM.ready.

Ohgodwhy
  • 44,803
  • 8
  • 64
  • 95
0

In answer to your 2nd question: "what if I wanned to run this information returned through a php code in the same tab, how could I do that?"

Have your php script return values as JSON like: $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
echo json_encode($row); Then you can have javascript do whatever you wish with the returned values, such as -

    $.ajax({
        url: 'sc_getData.php?id=' + ID,
            type:'GET'
    })
    .done(function(myData) { // data = array returned from ajax 
        myData = JSON.parse(myData);    
        for (var i in tFields){
            thisSourceField = sFields[i];
            thisTargetField = tFields[i];
            targetID = '#' + thisTargetField;
            thisValue = myData[thisSourceField];
            $(targetID).val( thisValue );
            console.log(targetID + ': ' + thisValue);
        }
})

I've setup arrays for Target and Source Fields. The source field arrays match the field names returned by the php script while the target field arrays will match the form field id's to be filled with the returned values.

CompuSolver
  • 39
  • 3