Create a table in form and use data from it in a query Topic is solved

[tsignadze]

Hello,
I have been trying to achieve following logic for a week now and I can not manage it.

Here is what I am trying to do:
I will have a user open a form, on top of the form it will have input to how many fields they need (they will scan barcodes on items).
Lets say user chooses 20. I want 20 input fields to open and as user starts to scan form field 1, hence scanner adds /n new line after each scan, I want cursor to jump to second field.
After user finishes scanning, I want to grab all these values and put them into query to modify/add them.
I would be very thankful if someone can help me manage that. Please note, I do not excel at sql either, from what I can understand I will need a new temp table to fill form this form and do queries between my main table and this tmp table.

Also, I want same kinda logic but instead of scanning, user will have data in my clipboard spaced by new lines and when pasting into first field, I want the form to realise there are newlines on the end of each data and fill down to each field, instead of filling each cell with whole clipboard.

Hopefully I have managed to describe what I am trying to achieve with my limited English vocabulary and if necessary I can quickly mockup my forms into MSAccess to provide visual aid to understand me.

Thank you in advance!!!

[kev1n]

Hi,

You could certainly use a subform for that or another possibility is to create the fields on the fly with JavaScript:

1. Create an HTML form with a text input field for the number of fields the user wants, and a button to submit the form.
2. Use JavaScript to handle the form submission event, and dynamically create the desired number of input fields based on the user's input.
3. Listen for the "keydown" event on each input field, and if the user presses the "Enter" key (which should create a new line), move the focus to the next input field.
4. When the user has finished scanning all items, collect the values of all input fields into an array using JavaScript.
5. Send the array of values to your server-side script to modify or add the scanned data to your database.

Here's some sample code to get you started. Create a nuBuilder HTML object and add this code:

Code: Select all

<form>
  <label for="numFields">Number of Fields:</label>
  <input type="number" id="numFields" name="numFields" required>
  <button type="submit">Create Fields</button>
</form>
<div id="inputFields"></div>
<button id="submitBtn">Submit</button>

<script>
// Listen for form submission event
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // prevent default form submission behavior
  var numFields = parseInt(document.getElementById('numFields').value);
  createFields(numFields);
});

// Dynamically create input fields
function createFields(numFields) {
  var container = document.getElementById('inputFields');
  container.innerHTML = ''; // clear any existing input fields
  for (var i = 1; i <= numFields; i++) {
    var input = document.createElement('textarea');
    input.setAttribute('id', 'inputField' + i);
    container.appendChild(input);
    // Listen for "keydown" event to move focus to next field
    input.addEventListener('keydown', function(event) {
      if (event.keyCode === 13) { // Enter key
        event.preventDefault();
        var nextInput = document.getElementById('inputField' + (i+1));
        if (nextInput) {
          nextInput.focus();
        }
      }
    });
  }
}

// Listen for "click" event on submit button
document.getElementById('submitBtn').addEventListener('click', function() {
  var values = [];
  for (var i = 1; i <= numFields; i++) {
    var input = document.getElementById('inputField' + i);
    values.push(input.value);
  }
  // Send values to server-side script
  // (e.g. using AJAX or a form submission)
});
</script>

Note that this is just a rough outline and it's untested and you may need to customise the code to fit your specific requirements.
Once you've successfully tested the code and it's working, we can discuss the appropriate method for storing the data in the database.

[tsignadze]

Thanks for the help kevin, I could not manage to get focus on next field.
https://streamable.com/0uvzlt

[kev1n]

add this line of code

Code: Select all

console.log(event.keyCode);

after

Code: Select all

    input.addEventListener('keydown', function(event) {

to log the keys / key code. Then open the console (usually F12) and check if really a Enter Key is sent or if \n is represented by another key code.

[tsignadze]

Kevin, I have managed to get this far.
https://streamable.com/ykbpfj

I want to make 1 row, instead of 2, I have set input.setAttribute('rows', 1); but I does not work, can you help? here is my code

EDIT: I simply changed width of my HTML object and it worked somehow ... Please now help me how to manage this data in mysql.

Code: Select all

<form>
	  <label for="numFields">Number of Fields:</label>
	  <input type="number" id="numFields" name="numFields" required>
	  <button type="submit">Create Fields</button>
	</form>
	<div id="inputFields"></div>
	<button id="submitBtn">Submit</button>

	<script>
	// Listen for form submission event
	document.querySelector('form').addEventListener('submit', function(event) {
	  event.preventDefault(); // prevent default form submission behavior
	  var numFields = parseInt(document.getElementById('numFields').value);
	  createFields(numFields);
	});

	// Dynamically create input fields
	function createFields(numFields) {
	  var container = document.getElementById('inputFields');
	  container.innerHTML = ''; // clear any existing input fields
	  for (var i = 1; i <= numFields; i++) {
	    var input = document.createElement('textarea');
	    input.setAttribute('id', 'inputField' + i);
	    input.setAttribute('rows', 1);
	    input.setAttribute('cols', 30);
	    container.appendChild(input);
	    // Listen for "keydown" event to move focus to next field
	    input.addEventListener('keydown', function(event) {
	      if (event.keyCode === 13) { // Enter key
	        event.preventDefault();
	        var nextInput = this.nextSibling;
	        while (nextInput && nextInput.nodeType != 1) {
	          nextInput = nextInput.nextSibling;
	        }
	        if (nextInput) {
	          nextInput.focus();
	        }
	      }
	    });
	    // Listen for "paste" event to split pasted data into fields
	    input.addEventListener('paste', function(event) {
	      event.preventDefault();
	      var clipboardData = event.clipboardData || window.clipboardData;
	      var pastedData = clipboardData.getData('text');
	      var lines = pastedData.split('\n');
	      if (lines.length > numFields) {
	        alert('Pasted data has more lines than the number of input fields.');
	      } else {
	        for (var i = 0; i < lines.length; i++) {
	          var input = document.getElementById('inputField' + (i+1));
	          if (input) {
	            input.value = lines[i].trim();
	          }
	        }
	      }
	    });
	  }
	}

	// Listen for "click" event on submit button
	document.getElementById('submitBtn').addEventListener('click', function() {
	  var values = [];
	  var numFields = parseInt(document.getElementById('numFields').value);
	  for (var i = 1; i <= numFields; i++) {
	    var input = document.getElementById('inputField' + i);
	    values.push(input.value);
	  }
	  // Send values to server-side script
	  // (e.g. using AJAX or a form submission)
	});
	</script>

[kev1n]

Basically, you can store the field values in an array, use nuSetProperty() to set a hash cookie, call a Procedure that inserts the data into a table. I can give you more details later, I'm busy right now.

[tsignadze]

Not a problem! I will try to research and come up with something in the meantime.

[tsignadze]

Kev1n, I could not manage to do what I need. Waiting for your reply.

[kev1n]

When submit is clicked, run this JS to add all values of the textareas to an array:

Code: Select all

var textareaValues = [];

// Select all textarea elements whose ids start with "inputField"
$("textarea[id^='inputField']").each(function() {
  // Add the value of each textarea to the array
  textareaValues.push($(this).val());
});

// Set a Hash Cookie containing the scanned values
nuSetProperty('scan_values', btoa(JSON.stringify(textareaValues)));

// Call a procedure called "insert_scan_values"
nuRunPHPHidden('insert_scan_values', 0);

Create a procedure called "insert_scan_values":

... containing this PHP code:

Code: Select all

// Retrieve the base64-encoded string from the JavaScript code via an HTTP request or other means.
$encodedValues = '#insert_scan_values#' 

// Decode the base64-encoded string.
$jsonString = base64_decode($encodedValues);

// Parse the JSON string.
$values = json_decode($jsonString);

// Insert the values into your MySQL table.
$sql = "INSERT INTO mytable (value) VALUES (?)"; // change table name and column value
foreach ($values as $value) {
  nuRunQuery($sql, [$value]);
}
;

You might have to change the Insert statement if no auto increment key is used.

Let me know if something is unclear or you need more details .

[kev1n]

I would greatly appreciate it if you could let me know whether or not that solution was helpful. Your feedback is important to me, as it allows me to gauge the effectiveness of my recommendations and make any necessary adjustments.