Fill Form and Disable Inputs

- still needs cleanup, but is functional

Author: FeXd

quick-weblog.js

@@ -1,5 +1,7 @@
 function getArticle(url, api_key) {
 
+  disableForm();
+
   const base_url = 'https://article-extractor2.p.rapidapi.com/article/parse?url=';
 
   const options = {
@@ -19,8 +21,33 @@ function getArticle(url, api_key) {
   })
 	.then(response => {
     console.log(response);
+
+    document.getElementById("quick-weblog-title").value = response.data?.title;
+    document.getElementById("quick-weblog-image_url").value = "Image via " + response.data?.souce;
+    document.getElementById("quick-weblog-image_description").value = response.data?.title;
+    document.getElementById("quick-weblog-quote").value = response.data?.description;
+
+    enableForm();
   })
 	.catch(err => {
     console.error(err);
+    enableForm();
   });
 }
+
+function toggleFormElements(enable) {
+  const form= document.getElementById("quick-weblog");
+  const formElements = form.querySelectorAll("input, select, textarea");
+
+  formElements.forEach(element => {
+    element.disabled = !enable;
+  });
+}
+
+function enableForm() {
+  toggleFormElements(true);
+}
+
+function disableForm() {
+  toggleFormElements(false);
+}

quick-weblog.php

@@ -66,27 +66,27 @@ function quick_weblog_form() {
     <form id="quick-weblog" method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
       <div>
         <label for="url"><?php _e( 'Post URL', 'quick-weblog' ); ?></label>
-        <input id="quick-test-input" type="text" name="url" id="url" required>
+        <input id="quick-test-input" type="text" name="url" id="quick-weblog-url" required>
       </div>
 
       <div>
         <label for="title"><?php _e( 'Post Title', 'quick-weblog' ); ?></label>
-        <input type="text" name="title" id="title" required>
+        <input type="text" name="title" id="quick-weblog-title" required>
       </div>
 
       <div>
         <label for="image_url"><?php _e( 'Image URL', 'quick-weblog' ); ?></label>
-        <input type="text" name="image_url" id="image_url" required>
+        <input type="text" name="image_url" id="quick-weblog-image_url" required>
       </div>
 
       <div>
         <label for="image_description"><?php _e( 'Image Description', 'quick-weblog' ); ?></label>
-        <input type="text" name="image_description" id="image_description" required>
+        <input type="text" name="image_description" id="quick-weblog-image_description" required>
       </div>
 
       <div>
         <label for="quote"><?php _e( 'Quote', 'quick-weblog' ); ?></label>
-        <textarea name="quote" id="quote" rows="6" required></textarea>
+        <textarea name="quote" id="quick-weblog-quote" rows="6" required></textarea>
       </div>
 
       <div>
@@ -96,7 +96,7 @@ function quick_weblog_form() {
 
       <div>
         <label for="tags"><?php _e( 'Tags', 'quick-weblog' ); ?></label>
-        <input type="text" name="tags" id="tags" required>
+        <input type="text" name="tags" id="quick-weblog-tags" required>
       </div>
 
       <div>