Question 53846 in Javascript Question posted in
A very good W3school tutorial can be found here.

New to javascript and I am trying to automate form making

I need help displaying the form. I have a divider in my body with the id="anketler". I want to put my form there.

<script>
    class soru {
        constructor(ques, opt1, opt2, opt3, opt4) {
            this.ques = ques;
            this.opt1 = opt1;
            this.opt2 = opt2;
            this.opt3 = opt3;
            this.opt4 = opt4;
            this.opts = [opt1, opt2, opt3, opt4];
        }
    }
    function createForm(x) {
        let form = document.createElement('form');
        for (let i = 0; i <= 3; i++) {
            let input = document.createElement('input');
            input.type = 'radio';
            input.id = x.opts[i];
            input.name = x.opts[i];
            input.value = x.opts[i];
            form.appendChild(input);
            let label = document.createElement('label');
            label.for = x.opts[i];
            label.innerText = x.opts[i];
            form.appendChild(label);
        }
        let submit = document.createElement('button');
        submit.type = submit;
        submit.value = Gönder;
        form.appendChild(submit);
        document.getElementById('anketler').appendChild(form);
    }
    const yeni_soru = new soru(
        'Soru1: En salak bekarlar diyarı üyesi ?',
        'Egemen',
        'Atakan',
        'Batuhan',
        'Kerem'
    );
    createForm(yeni_soru);
</script>
Tags:

2

Answers


  1. 0

    Life would be a lot easier had you given your form a name!

    let form = document.createElement('form');

form.name='TheForm';

    Then one could just…

    anketler.innerHTML=document.TheForm.innerHTML;

    But under the circumstances I suppose we can use…

    anketler.innerHTML=document.forms[0].innerHTML;  // a zero-based collection of all document forms so change to the right form number/index if more than one.
    Login or Signup to reply.
  2. 0

    In the code you provided, problem lies in the following lines:

    submit.type = submit;
submit.value = Gönder;
    • For submit.type you have to assign a String: 'submit'.
    • Same for submit.value. But due to submit being a button, for the ‘Gönder’ text to appear as the button’s label, you have to assign the string to submit.innerText instead.

    Here´s the result:

    class soru {
  constructor(ques, opt1, opt2, opt3, opt4) {
      this.ques = ques
      this.opt1 = opt1
      this.opt2 = opt2
      this.opt3 = opt3
      this.opt4 = opt4
      this.opts = [opt1, opt2, opt3, opt4]
  }
}

function createForm(x) {
  const form = document.createElement('form')
  for (let i=0; i<=3; i++) {
    const input = document.createElement('input')
    input.type = 'radio'
    input.id = x.opts[i]
    input.name = x.opts[i]
    input.value = x.opts[i]
    form.appendChild(input)
    let label = document.createElement('label')
    label.for = x.opts[i]
    label.innerText = x.opts[i]
    form.appendChild(label)
  }
  const submit = document.createElement('button')
  // Assign 'submit' as a String
  submit.type = 'submit'
  // For the button text to appear, change its innerText property (instead of .value)
  submit.innerText = 'Gönder'
  form.appendChild(submit)
  document.getElementById('anketler').appendChild(form)
}

const yeni_soru = new soru(
  'Soru1: En salak bekarlar diyarı üyesi ?',
  'Egemen',
  'Atakan',
  'Batuhan',
  'Kerem'
)

createForm(yeni_soru)
    body{
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #ccc;
}

#anketler{
  width: 200px;
  background-color: #eee;
  padding: 20px;
}

#anketler form{
  width: 100%;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-gap: 10px;
}

#anketler form button{
  grid-column: span 2
}
    <html>
  <body>
    <div id="anketler">
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search