Load file into jquery dialog

Question

I just confused with jquery dialog and with php form submit

I have two forms, page1.php and page2.php

In page1.php, I have <a> link

<a id="addNew"> Add New </a>
<div id="myDiv"> 
       <!-- load 'page2.php' file using this div --> 
</div>

and when I click this link , load page2.php file in jquery dialog with form values.

This is my script

<script>
   $("#addNew").click(function() {
       $("#myDiv").load('page2.php').dialog({modal:true}); 
   });
</script>

These scripts works fine load with page2.php file.

Now my question is,

when I submit form values of page2.php it will be re-directed to page2.php. But I wants to stay with my page1.php.

How to I achieve this? Thanks in advance

Ohgodwhy · Accepted Answer · 2013-05-18 09:36:39Z

1

Seeing as how you didn't provide a form, one can only make assumptions.

<form id="some_form" action="page2.php" method="post">
    <input type="text" name="user_name"/>
    //a collection of form elements
<form>

Then use ajax, and capture the form submit event, while preventing it from it's default action

$(document).on('submit', '#some_form', function(e){
    e.preventDefault(); //stop form from redirecting, also stops sending of data
    var $this = $(this); // cache form object for performance
    $.ajax({
        url: $this.prop('action'),
        type: $this.prop('method'),
        data: {
          handle_form: 'ajax',
          form_data : $this.serializeArray()//array of objects
        },
        success:function(data){
            //data is what is returned from the server if successful
        }
    });
    return false; //just another example of stopping form submit, don't need both
});

Then in your page2.php file, just check for the existence of a field.

if(isset($_POST['user_name']) && $_POST['handle_form'] == 'ajax'):

    //your form is trying to be submit
    //handle the submission
    echo 'We submit the form!'; //is the 'data' in our success function

elseif(isset($_POST['user_name']) && !isset($_POST['handle_form'])):

    //regular form submission, no ajax, no javascript.

endif;

edited May 18, 2013 at 9:36

answered May 18, 2013 at 9:18

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

6 Comments

Ranjith Over a year ago

See, my input form values only in the page2.php not in page1.php. page1.php only have link to load jquery dialog with page2.php

Ohgodwhy Over a year ago

Yes, I've leveraged the .on() method which allows me to attach events to all future elements loaded into the page that match the 2nd argument, which is #some_form, regardless of it it existed at page load, or was added later. I've already thought of that for you.

Ranjith Over a year ago

And also I already write the code for submit form of page2.php using PHP request

Ohgodwhy Over a year ago

None of that matters. $_POST would still be available in $_REQUEST.

Ranjith Over a year ago

If I am going this way it will affect the normal PHP request of page2.php . right?

|

Daniel · Accepted Answer · 2013-05-18 09:16:01Z

0

You can use ajaxForm which will submit form using an ajax call when you loaded your page2. For example:

HTML:

<form id="login" action="YOUR_FILE" method="post">
    <label>Name:</label>
        <input type="text" name="name" /><br />

    <label>Password:</label>
        <input type="password" name="pass" /><br />

    <input type="submit" name="submit" value="Login" /> 
</form>

JavaScript:

function processJson(data) {
    // your code goes here
}
$("#login").ajaxForm({
     dataType:  'json',
     success:   processJson // what to do when call succeed 
});

Have a nice day!

answered May 18, 2013 at 9:16

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

Collectives™ on Stack Overflow

Load file into jquery dialog

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related