Prevent Form Submission if dynamic field is blank....Php / Jquery / Ajax

Question

Hello friends i need your help,

As you can see in the below image i'm dynamically loading questions select box and questions answer options in drop-down list from mysql database based on asset title value. ( this is working fine )

But my main problem is i want user to select all question answers and then only run ajax function and insert database in mysql.

NOTE : Some assets have 1 question some have 3 and some assets have No questions thats why i didnt used below code.

if(assettitle && customquestion1 && customquestion2){ ajax etc*** [If i use this code then i'll be facing problem on assets who dont have any question.]

capcj · Accepted Answer · 2017-05-23 16:43:19Z

2

You can add a counter into some data-attr on the assets and validate that before AJAX in one shot.

$('.assets-selected').on('change', function(){
   $(this).data( "selecteds", $(this).find('option').length);
});

function checkAssets(){
   $('.assets-selected').each(function(){
       if (typeof $(this).data('selecteds') == undefined ||  $(this).data('selecteds') < 1) {
            return false;
       } else {
            return true;
       }
   });
}

if(checkAssets()) {
            //submit the form to server
            $.ajax({
                url : '../pages/php_action/addnewlead/creatlead.php',
                type : 'POST',
                data : form.serialize(),
                dataType : 'json',
                success:function(response) {


                    // remove the error 
                    $(".form-group").removeClass('has-error').removeClass('has-success');

                    if(response.success == true) {
                        $(".messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                          '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                          '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                        '</div>');

                        // reset the form
                        $("#newleadform")[0].reset();
                        // reload page after 7 sec.
                        setInterval(function () {
                        location.reload(null, false);
                        }, 7000);

                    } else {
                        $(".messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                          '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                          '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                        '</div>');
                    }  // /else
                } // success  
            }); // ajax subit               
        } /// if

Fetch Assets Questions & Ans from database (PHP) - Put the class I showed in my example

Look you're calling all questions once. Do a checking before do that to avoid errors and other problems

<?php  
 //load_data.php  
 $connect = mysqli_connect("localhost", "root", "", "test");  
 $output = '';
 if(isset($_POST["assetid"]))  
 {  

  if($_POST["assetid"] != '')
  {  
       $sql = "SELECT * FROM customquestions WHERE assetid = '".$_POST["assetid"]."'";

  }  
  else
  {  
       $sql = "SELECT * FROM customquestions WHERE assetid = 'akash'";

  }
  $result = mysqli_query($connect, $sql);
  $quesno = 1;

  while($row = mysqli_fetch_array($result))  
  {  
      //poor and ugly way to do something to filter, the best solution is the questions have a table 1 to N, where the 1 table is cover, main information and the N the questions, so each index from your array will be filled only with the questions that db has stored else will bring nothing and you can validate better the frontend, besides provides more scalability.
        if ($row['colqa1'] == '' && $row['colqa2'] == '' && $row['colqa3'] == '' && $row['colqa4'] == '' && $row['colqa5'] == '' && $row['colqa5'] == '' && $row['colqa6'] == '' && $row['colqa7'] == '' && $row['colqa8'] == '' && $row['colqa9'] == '' && $row['colqa10'] == ''){
             continue;
            //don't show dropdown if you don't have questions!  
       }
       $output .= '<div class="col-sm-6">';
       $output .= '<div class="form-group">';
       $output .= '<label for="campaignname">'.$row["cqname"].'</label>';
       $output .= '<select name="cq'.$quesno.'" size="5" class="form-control assets-selected" required>';
       // $output .= '<div style="border:1px solid #ccc; padding:20px; margin-bottom:20px;">'.$row["product_name"].'</div>';
       // $output .= '<tr><td>'.$row["cqname"].'<br></td>';
       $output .= '<option value="" required>Select Custom Question Answer</option>
                   <option value="'.$row["cqa1"].'">'.$row["cqa1"].'</option>
                   <option value="'.$row["cqa2"].'">'.$row["cqa2"].'</option>
                    <option value="'.$row["cqa3"].'">'.$row["cqa3"].'</option>
                    <option value="'.$row["cqa4"].'">'.$row["cqa4"].'</option>
                    <option value="'.$row["cqa5"].'">'.$row["cqa5"].'</option>
                    <option value="'.$row["cqa6"].'">'.$row["cqa6"].'</option>
                    <option value="'.$row["cqa7"].'">'.$row["cqa7"].'</option>
                    <option value="'.$row["cqa8"].'">'.$row["cqa8"].'</option>
                    <option value="'.$row["cqa9"].'">'.$row["cqa9"].'</option>
                    <option value="'.$row["cqa10"].'">'.$row["cqa10"].'</option>
                   </select>';
       // $output .= '<tr><td colspan="10"><hr></td></tr>';
       $output .= '</div></div></div>';
       $quesno++;
  }  
  echo $output;
 }  
 ?>

edited May 23, 2017 at 16:43

answered May 23, 2017 at 15:52

capcj

1,5351 gold badge18 silver badges24 bronze badges

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

7 Comments

Akash Sethi Over a year ago

Thanks for this carlos. i have re updated my question for you...Please re-check

capcj Over a year ago

I don't understand what in my answer not fit to you, can clarify to me, plz?

Akash Sethi Over a year ago

Amazing.. i made changes in php file that is working, but still facing the issue in jquery $('.assettitle').on('change', function(){ $(this).data( "cq1", $(this).find('option').length); }); function checkAssets(){ $('.assettitle').each(function(){ if (typeof $(this).data('cq1') == undefined || $(this).data('cq1') < 1) { return false; } else { return true; } }); }

capcj Over a year ago

What issue? Show me the error or be more specific, please

capcj Over a year ago

@AkashSethi Pay attention, you're puttin the cq1 as data name, is not very intuitive, other thing it's the option, you're taking all options, but you want the selected ones, so $(this).find('option:selected').length, check the data values on console if it's working and put some error here to allow me debug.

|

Collectives™ on Stack Overflow

Prevent Form Submission if dynamic field is blank....Php / Jquery / Ajax

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related