Pass data to another URL using javascript

Question

I want to first detect whether at least three out of ten textboxes are filled, and then pass the response data to the next URL.

I achieved the first step by using <input type="button" value="CONTINUE" onclick='myfunction();'> where myfunction specifies that

function myfunction() {
  if (response<3) {
    location.href = "URL";
  }
  else {
    alert("Please give at least three responses.");
  }
}

However, I don't know how to do the second step.

I used to use <form method="POST" action="URL">when the input type was "submit". But since now I am using "button" in order to have the onclick where I can incorporate the alert, what I can do to pass the data to another URL?

Below are all the code I have:

<html>
<body>      
<div align="center">

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 1: </td>
       <td><textarea rows="3" name="th_1" cols="60" id="th_1"></textarea></td>
       </tr>
    </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 2: </td>
      <td><textarea rows="3" name="th_2" cols="60"id="th_2"></textarea></td>
       </tr>
      </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 3: </td>
     <td><textarea rows="3" name="th_3" cols="60"id="th_3"></textarea></td>
     </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 4: </td>
     <td><textarea rows="3" name="th_4" cols="60"id="th_4"></textarea></td>
     </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 5: </td>
      <td><textarea rows="3" name="th_5" cols="60"id="th_5"></textarea></td>
      </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 6: </td>
       <td><textarea rows="3" name="th_6" cols="60" id="th_6"></textarea></td>
       </tr>
    </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 7: </td>
       <td><textarea rows="3" name="th_7" cols="60"id="th_7"></textarea></td>
       </tr>
    </table>


  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 8: </td>
       <td><textarea rows="3" name="th_8" cols="60"id="th_8"></textarea></td>
       </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 9: </td>
     <td><textarea rows="3" name="th_9" cols="60"id="th_9"></textarea></td>
     </tr>
   </table>
  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 10: </td>
     <td><textarea rows="3" name="th_10" cols="60"id="th_10"></textarea></td>
     </tr>
   </table>
</div>


<p align="center"><input type="button" value="CONTINUE" onclick='checknumber();'></p>

<script>

function formHasAtLeast(answersCount) {
  let count = 0;
  for (let i = 1; i <= 10; i++) {
    const textBoxValue = document.getElementById('th_' + i).value;
    if (textBoxValue.trim() !== '') count++;
    if (count === answersCount) return true; 
  }
  return false;
}

function checknumber() {
  const minAnswers = 3;
  if (formHasAtLeast(minAnswers)) {
    location.href='URL';
  }
  else {
    alert("Please enter at least 3 thoughts before you can continue.");
  }
}

</script>
</body>
</html>

Re-reading your question I see that I overlooked part of what you were saying regarding removing the `
` construct from your code. See my updated answer. — cssyphus, Oct 03 '20 at 20:08

score 0 · Answer 1 · answered Oct 03 '20 at 19:00

0

first you must add an id to your form like <form method="POST" id="myForm" action="URL"> now you can do it by bellow code:

function myfunction() {
  if (response<3) {
    document.getElementById("myForm").submit();
  }
  else {
    alert("Please give at least three responses.");
  }
}

answered Oct 03 '20 at 19:00

Mehrzad Tejareh

635
5
21

For each textbox I have an id for it, so in total there are 10 ids. I tried your code by putting an id for the whole form, but it didn't work. I wonder whether it is because I have in total 10 ids. – Ruth Oct 03 '20 at 19:19
could you tell me what is `response` ? where defined it ? and could you add your form html to your question ? – Mehrzad Tejareh Oct 03 '20 at 19:21
thanx my friend ... there is no `form` tag in your code ! – Mehrzad Tejareh Oct 03 '20 at 19:40
1

So it is necessary to have a form tag in order to pass the data to the next URL? Actually I added a form tag, but is wasn't working. – Ruth Oct 03 '20 at 19:41
if you wants to POST data to a url you should not remove form tag ... only when you wants to pass data by GET method you can do it by window.location ... – Mehrzad Tejareh Oct 03 '20 at 19:42
YES ... exactly . – Mehrzad Tejareh Oct 03 '20 at 19:43
if you test it and my answer is ok ... you makes me happy to vote my answer and check my answer is true – Mehrzad Tejareh Oct 03 '20 at 20:02

score 0 · Answer 2 · answered Oct 03 '20 at 19:05

0

If your inputs are inside a tag and the form has an id attribute like:

<form id="myForm" ...></form>

You can than submit the form with

document.getElementById('theForm').submit();

answered Oct 03 '20 at 19:05

Gunnar Radzom

86
1
5

cssyphus · Answer 3 · 2020-10-03T20:06:33.847

This is called form validation and is done by interrupting the submit process, testing the user-entered values, and returning either true (go ahead and submit) or false (cancel submit and return control to the user, usually with an accompanying error message).

The simplest way is to add an onSubmit="" attribute to your <form> tag:

<form action="respond.php" method="post" onsubmit="return validateData()">

In the validateData() function (can be named anything you want), you can check the value of each field and either return false if something is missing, or return true to continue with submitting the form.

Here are some articles that will explain things in more detail:

https://www.formget.com/javascript-onsubmit/

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Note that it is not strictly necessary to have a <form> tag in your code. Re-reading your question, I note that you replaced the <form> structure with a normal <button>. In that case, you can use AJAX to submit your data to the next page. In fact, this is far more common today and also allows you to keep everything on one page, running javascript to validate user inputs at each stage of the application's flow.

Here is an article about AJAX vs Forms. AJAX vs Form Submission

On the other hand, if all you want to do is detect the user clicking on the button and then run some javascript that grabs the user-entered data, validates it, and then changes the page content... you can do that with a straight-forward event handler:

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Pass data to another URL using javascript

3 Answers3