If value does not exist in WordPress DB table then input box border red

Question

I want to submit values to my WordPress MySQL database table table1 from all the textboxes. But before submit data, if the textbox value of match1, match2, match3 and so on, already exist in table2 (column name ref_code) then textbox border (or shadow) should turn green individually. If value does not exist in table2 (column name ref_code) then border should turn red of that specific match textbox.

Please take a look at my current code and give me valuable suggestion. (The given code is only to insert data in table1 but I want to search in table2 column:ref_code)

<?php   
    if (!empty($_POST)) {
        global $wpdb;
        $data = array(
            'order_id' => $_POST['order_id'],
            'raw_data'   => $_POST['raw_data']          
        );  
        for( $i=1; $i<6; $i++) :
            $data['match'.$i] = $_POST['match'.$i];
            $data['buy'.$i] = $_POST['buy'.$i];
            $data['percent'.$i] = $_POST['percent'.$i];
        endfor;     
        $success=$wpdb->insert( 'test1', $data, $format=NULL );
        if($success){
            echo "=> DATA SAVED" ; 
            ?>

<form method="post">
    <div class='mainIn'>Order ID<br>
    <input type="text" name="order_id"></div>
    <div class='mainIn'>Raw Data<br>
    <textarea type="text" name="raw_data"></textarea></div>     
    <br><br><div style='display:flex;flex-wrap:wrap'>
    <?php for( $i=1; $i<6; $i++) : ?>
        <div id='allpeaks' style='flex:0 0 100%'>
        Match<?php echo $i;?><input class='inCol' name='match<?php echo $i;?>'>
        Buy<?php echo $i;?><input class='inCol' name='buy<?php echo $i;?>'>
        Percent<?php echo $i;?><input class='inCol' name='percent<?php echo $i;?>'>
        </div><br><br>
    <?php endfor;?>         
    </div>      
    <br><input type="submit">
</form>

score 0 · Answer 1 · edited Mar 22 '22 at 18:53

0

You cannot render a style after the php runtime unless you use ajax to check if value exists.

Here you have a simple example of a html input, Javascript Ajax and SQL query:

https://www.w3schools.com/php/php_ajax_php.asp

You can use something like this. So after the user submit the value on input order_id, you can check with ajax if value exists. You will need a php file to check it:

<?php // This is yourcheck.php

$order_id = $_GET["order_id"];
$exists = $wpdb->get_var("SELECT ref_code FROM $wpdb->table2 WHERE ref_code = $order_id");
// Here check if value already exists in table2
if($exists){
$response = array("exists" => true);
echo json_encode($response); 
} else {
// Here insert your data in table1
//...
$wpdb->insert( 'table1', $data, $format=NULL );
}

?>

With your input you will need to include this script:

<script>
var order_id = document.getElementById("order_id").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  // Check if exists value in table2, if true change border color of input
   if(this.exists){
   document.getElementsByName("order_id")[0].style.borderColor = "red";
   }
  }
};
xmlhttp.open("GET", "test.com/yourcheck.php?order_id="+order_id, true);
xmlhttp.send();
</script>


<input type="text" name="order_id">

edited Mar 22 '22 at 18:53

Dharman

30,962
25
85
135

answered Mar 22 '22 at 18:47

Tecodifico

16
1

I forgot that you will need to prevent form submission until you get the response or biding when user text a value on input using some javascript method like onkeyup as it is shown in the w3schools example – Tecodifico Mar 22 '22 at 19:11
Sorry for the inconvenience, but my actually code is little complecated. And I have update my actual code. Can you please suggest me how can I make this happen for all the indidual `match` textboxes. I am in my learning phase. Your valuable response is highly appreciated. – Inspect iitd Mar 23 '22 at 06:10
I would also like to tell you that my php and ajax/html code is on same page as wordpress template.php, so should I make another page for php code? – Inspect iitd Mar 23 '22 at 06:27
You can use same example but passing more queries in the ajax url. Also, you are using Wordpress so you can use WP ajax framework and include yourcheck.php method in functions.php https://stackoverflow.com/questions/43557755/how-to-call-ajax-in-wordpress https://codex.wordpress.org/AJAX_in_Plugins – Tecodifico Mar 23 '22 at 07:15
Can you please suggest me working code for this so that I can understand it proeprly. It would really help me to improve and your valuable time is highly appreciated for this. – Inspect iitd Mar 23 '22 at 07:33

If value does not exist in WordPress DB table then input box border red

1 Answers1