MultiSteps Form on WordPress Custom Plugin with Ajax

i need some help, please review this website and check this how is it working

Reference Site https://cellsavers.com/iphone-repair

i am making plugin like this, with multiple forms

  1. Mobile Brands: (Came from Database on form Brand Models: (showing
  2. data through Mobile Brands ID from database) Model Colors: (showing
  3. data through Brand Models ID from database) Mobile Problem / Issue:
  4. Select Issue Send Button:

    i have done this on simple php its working fine, please check below code for better understanding

    i create index.php file

    “>
    “>

    $(document).ready(function() {

    // submit form using $.ajax() method
    $('input[name=brandid]').click(function(e) { 
    //$('input[radio]').submit(function(e)
    
        e.preventDefault(); // Prevent Default Submission
    
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $(this).serialize() // it will serialize the form data
        })
        .done(function(data){
            $('#form-content').fadeOut('slow', function(){
                $('#form-content').fadeIn('slow').html(data);
            });
        })
        .fail(function(){
            alert('Ajax Submit Failed ...');    
        });
        return false;
    });
    

    });

    test.php file code

    get_results ( “SELECT * FROM brand_model WHERE brand_id = ‘$brand_id’ ” );

    while($row = mysql_fetch_array($run)) {
        $model_id = $row['model_id'];
        $model_name = $row['model_name'];
        $model_image = $row['model_image'];
    
        ?>
    

    “>
    “>

        <?php } ?>
    
    
        </form>
    </div>
    

    $(document).ready(function() {

    // submit form using $.ajax() method
    $('input[name=modelid]').click(function(e) { 
    //$('input[radio]').submit(function(e)
    
        e.preventDefault(); // Prevent Default Submission
    
        $.ajax({
            url: 'test2.php',
            type: 'POST',
            data: $(this).serialize() // it will serialize the form data
        })
        .done(function(data){
            $('#form-content').fadeOut('slow', function(){
                $('#form-content').fadeIn('slow').html(data);
            });
        })
        .fail(function(){
            alert('Ajax Submit Failed ...');    
        });
        return false;
    });
    

    });

    its working fine in php. but how to create like this on wordpress plugin?
    i tried alot but i am stucking on ajax url like this “url: ‘test.php’,”

Read more here: MultiSteps Form on WordPress Custom Plugin with Ajax

Leave a Reply

Your email address will not be published. Required fields are marked *