form to not connect to google sheet

Asked

Viewed 39 times

0

Hello I need some help I’m making a form following these steps Link and it’s not working I created by following the steps that are on this site . But I think the problem is in my code and why it’s not working 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag3</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica a RAPIDEZ do atendimento? </h1>
  <div>
    <label>Fraco</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Fraco" placeholder="Field 3"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Normal" placeholder="Field 3"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Bom" placeholder="Field 3"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Muito Bom" placeholder="Field 3"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag2</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica a VARIEDADE dos nossos produtos?</h1>
  <div>
    <label>Fraco</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Fraco" placeholder="Field 2"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Normal" placeholder="Field 2"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Bom" placeholder="Field 2"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Muito Bom" placeholder="Field 2"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag1</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
    <form id="test-form">
  <h1>Como classifica a QUALIDADE dos nossos produtos?</h1>
  <div>
    <label>Fraco</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Fraco" placeholder="Field 1"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Normal" placeholder="Field 1"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Bom" placeholder="Field 1"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Muito Bom" placeholder="Field 1"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>

I can’t even go to the 2 page . this giving the results in the address bar, do I have to change the method to post? last part of the code .

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag6</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Para Acabar</h1>
<div>
    <label>Deixe um comentário</label>
    <input type="text" name="Deixe_comentario" placeholder="Field 6"/>
  </div>

  <div>
    <label>Contacto</label>
    <input type="text" name="Contacto_email" placeholder="Field 7"/>
    
</div>
  
  <div>
    <button type="submit" id="submit-form" onclick="location.href='index8.html';">Submit</button>
</div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag5</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica o nosso espaço?</h1>
  <div>
    <label>Fraco</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Fraco" placeholder="Field 5"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Normal" placeholder="Field 5"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Bom" placeholder="Field 5"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Muito Bom" placeholder="Field 5"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag4</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>E quanto à QUALIDADE do atendimento?</h1>
  <div>
    <label>Fraco</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Fraco" placeholder="Field 4"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimentos" id="submit-form" alt="Normal" placeholder="Field 4"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Bom" placeholder="Field 4"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Muito Bom" placeholder="Field 4"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>

javascript html jquery form

1 answer

0

I believe you have to put the jquery file in your project.

Can be downloaded or included by CDN: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var $form = $('form#test-form'),
  url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

I hope it helped!

  • is still not working and goes to the second page is still blocked

Browser other questions tagged javascript html jquery form

You are not signed in. Login or sign up in order to post.