Pergunta

I'm trying to create a quiz that lets users answer questions such as name & sex. I've used and in html but now I want it so that when the user clicks 'submit' that data will be put into a paragraph like a mail merge.

For example;

name: Dave

Sex: Male

Click submit and text appears;

There once was a Male named Dave

so far my code for the form is;

<form method= "get" action="Results.html" target="_blank">
  <input type="radio" name="sex" value="">Male<br>
  <input type="radio" name="sex" value="">Female<br>
  Name:<input type="text" name="" id="name"><br>
  <input type="submit" id="submit">
</form>

I don't even know if what I'm trying to do is possible, everything I've looked up I can't get to work. Any help would be appreciated, thank you

edit

Some of the jquery I'm playing around with;

$(document).ready(function() {
  var text = '<p>Oh my god, I can't believe what<b>';
  text +=$('input[name=name] :checked').val();
  text +='</b>named<b>';
  var text = 'did last night. How do you get that drunk?';
  text += '</b></p>';
  $('#results').append(text);
});
Foi útil?

Solução 2

If you're not determined to have your paragraph open in a different window then this could be done quite easily with jQuery

var text = '<p>There once was a <b>';
text += $('input[name=sex] :checked').val();
text += '</b> named <b>';
text += $('#name').val();
text += '</b></p>';

$('#ResultsDiv').append(text);

You're going to have to play with this a little bit, opening the paragraph in a new window will be tricky. You're also going to have to add a jQuery reference to your header.

Outras dicas

You'll need to start looking at server-side languages, although this could also be achieved by using JavaScript and having the quiz client-side, which means the conditions and form handling is done on the browser itself.

For server-side, you could look at:

  • PHP
  • Ruby/Ruby on Rails
  • Go
  • Node.js

Since we don't write the code for you here, I advise that you start looking at one of those technologies to get you started. Once you're all setup and tried to give this a go, show us your code and we can help then.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top