ace0930

@bcworkz Thank you for the detailed explanation and really appreciate your patience!

Update: it now returns <empty string> in the console with the below code:

<form id="contact-form" method="post">
   <input type="hidden" name="action" value="form_handling">
   <input id="fname" placeholder="First Name" type="text" name="fname">
   <input id="lname" placeholder="Last Name" type="text" name="lname">
   <input id="email" placeholder="Email Address" type="email" name="email">
   <input id="phone" placeholder="Phone Number" type="tel" name="phone">
   <textarea id="message" placeholder="Your Message..." name="message" rows="3"></textarea>
   <input id="submit-form" type="submit" value="Submit"> 
</form>

With this in the functions.php:

function form_handling() {
   $first_name = sanitize_text_field( $_POST['fname'] );
   $last_name = sanitize_text_field( $_POST['lname'] );
   $email = sanitize_email( $_POST['email'] );
   $phone = sanitize_text_field( $_POST['phone'] );
   $message = sanitize_textarea_field( $_POST['message'] );
   $mail = '[email protected]';
   $subject = 'New Submission';
   $data = $first_name . ' ' . $last_name . ' ' . $email . ' ' . $phone . ' ' . $message;
   $headers = 'From: Company <[email protected]>';

   wp_mail( $mail, $subject, $data, $headers );

   wp_die();
}

wp_enqueue_script(
   'example',
   'https://local.test/script.js',
   array(),
   null,
   true
);

And JavaScript that uses fetch():

const contactForm = document.querySelector('#contact-form'),
   btnSubmit = document.querySelector('#submit-form'),
   ajaxData = new FormData(contactForm);

btnSubmit.addEventListener('click', function(e) {
   e.preventDefault();

   fetch('https://local.test/wp-admin/admin-ajax.php', {
      method: 'POST',
      body: ajaxData
   }).then( res => res.text() )
   .then( data => {
      console.log( data );
   }).catch( err => {
      console.log(err);
   });
})

@bcworkz I see your points but I don’t understand this, is it a typo?

It helps keep your overall page speed down by not loading up code on the “init” action

I think the page will speed up if handle the form for a specific hook like ajax_post instead of using the init which checks every request for everything?

Why do you say the page speed will go down (slower) if we don’t load it through init?
Should it be ‘It helps keep your overall page speed down by loading up code on the “init” action.’ or ‘It helps keep your overall page speed up by not loading up code on the “init” action’?

@bcworkz Found solution admin_post_nopriv_{action}

But what’s the benefit of using admin_post_nopriv_{action} to handle the form instead of the traditional way like below which uses the currently executing script with get_permalink()?

<form action="<?php echo get_permalink() ?>" method="post">
   <input type="submit" value="Submit">
</form>

and with the init hook

add_action( 'init', 'capture_form' );

function capture_form() {
   // Do something
}

@bcworkz I have found the problem, it only occurs when I log out of WordPress.Why is that so…May I know how to solve this?

@weboccults Thanks, but I already tried that before…

@clayp

If you do not use ESC-URL, it can no longer protect against attacks

That’s the question I’m asking, what attack is it if I don’t use esc_url?

This function removes invalid characters, removes dangerous characters, and encodes characters as HTML entities.

Yeah, but if I’m the one who wrote the URL and I know it’s clean, why do I still need to use esc_url? Unless it’s other people submitting this like @asadiy4n mentioned ‘inputs and sent data’ then I understand because it’s like sanitization.

@catacaustic Sorry because I’m not good at explaining, but I found a quick solution:

https://wordpress.stackexchange.com/questions/369218/check-if-row-exists-before-inserting

By selecting the data and compare it with NULL.

@catacaustic No, you misunderstood. Have a look at here with details: https://stackoverflow.com/questions/72640407/wordpress-maybe-create-table-check-if-table-existed

@catacaustic I just realized that I’ve already read the reference you have provided in the past. It doesn’t mention the problem I’m asking about?…

@catacaustic I’ve used the wrong words, I mean there will be 10 identical ‘data’, not the table. Thanks for the reminder, I’ve updated the question. And I will have a look at the reference you have provided. Thank you so much!

@diondesigns @threadi Working like a charm, thank you so much!

@diondesigns If I put it into one line like:
update_option( 'my_cachebuster', date( 's-d-m-Y', time() ) );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .'/style.css', array(), get_option('my_cachebuster'), 'all' );

I’m not sure this will impact the performance because the version number is changing every second when I inspect the page source. How do I only update the file when the file is updated like the input value is successfully saved into the file by file_put_contents?

Something like this?

update_option('my_cachebuster', time());

if( isset( $_POST['color'] ) ) {
   file_put_contents(
      plugin_dir_path( __FILE__ ) . 'css/styling.css',
      'body { background-color: ' . $_POST["color"] . '; }'
   );

   get_option('my_cachebuster');
}

@threadi Yes, the form is in the backend and not frontend. Can you elaborate more or maybe give some reference on how to generate the CSS file every time something changes in the content of the table? I haven’t heard of this and therefore have no idea how to actually do this.

@diondesigns But is there any similar way to get the specific data like get_var? I’m developing a plugin and I think I cannot know the database credential of the user who installs it. Any example is much appreciated to accomplish what I’m doing as I’ve shown.

@threadi I actually made one form and users can field the form to update the information, I store this information in the database. I then use the value of the column to style on the frontend.

For example, the first input of the form is main color, when the user field with blue, it is then saved to the database, I then pull this value to style the site.

Its’ MySQL btw.