CODEWITHSUNDEEP
javascripthtmlhtml-select
momo
momo

Reputation: 1045

Having trouble getting <select> value to form field

I have this page where there is a form with a drop-down list for options, then a dialog where you can change the details of the chosen option. I'm having trouble updating the dialog form (no default value) after having chosen an option from the drop-down list ( select tag).

The code might look a bit strange, it's auto-generated by parenscript and cl-who (Common Lisp libraries).

Code is as follows:

function openFuns(form) {
    var frm = getElementById('editPass');
    return frm.date.value = form.passList.options[form.passList.selectedIndex].value;
};
function init() {
    _js72 = document.getElementById('editPassDialog');
    document.getElementById('getPass').onclick = function () {
        return _js72.showModal();
    };
    return document.getElementById('submitPass').onclick = function () {
        return _js72.close();
    };
};
window.onload = init;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>Ashtanga Yoga Osaka | Student Page
    </title>
    <link type='text/css' rel='stylesheet' href='/style.css' />
    <script type='text/javascript'>
    </script>
  </head>
  <body>
    <div id='header'></div>
    <div id='container'>
      <form action='/edit-student' method='post' id='editStudent'>
        <p>Name
          <input type='text' name='name' class='txt' value='kaori kawai' />
        </p>
        <p>Email
          <input type='email' name='email' class='txt' value='[email protected]' />
        </p>
        <p>Passes
          <select name='passList'>
<option id='pass' value='(TYPE M DATE 2015-01-05T20:33:05.000000+09:00 AMT
                          17000)'>Jan 2015
</option>
<option id='pass' value='(TYPE W DATE 2014-12-29T20:00:38.000000+09:00 AMT 6000)'>Dec 2014
</option>
          </select>
          <button type='button' id='getPass' onclick='openFuns(this.form);' class='btn'>Get Pass
          </button>
        </p>
        <p>
          <input type='submit' value='Edit Info' class='btn' />
        </p>
      </form>
      <dialog id='editPassDialog'>
        <h1>Edit Pass
        </h1>
        <form action='edit-pass' method='post' id='editPass'>
          <p>Date bought
            <input type='text' name='date' class='txt' />
          </p>
          <p>Type
            <inut type='text' name='type' class='txt'></inut>
          </p>
          <p>Amount Paid
            <input type='text' name='amt' />
          </p>
          <p>
            <input type='submit' value='Edit Pass' class='btn' id='submitPass' />
          </p>
        </form>
      </dialog>
    </div>
  </body>
</html>

So the ideal behavior is that it would update the date field in the dialog with whatever the selected option is from the drop-down list "Passes", but that's not happening. I know that the form data is passed correctly to the function openFuns() because if I use console.log or alert it displays the information of the selected option.

Upvotes: 0

Views: 90

Answers (1)

hapass
hapass

Reputation: 320

So, here is the jsfiddle:

http://jsfiddle.net/e80gf0rq/1/

<body>
    <div id='header'></div>
    <div id='container'>
      <form action='/edit-student' method='post' id='editStudent'>
        <p>Name
          <input type='text' name='name' class='txt' value='kaori kawai' />
        </p>
        <p>Email
          <input type='email' name='email' class='txt' value='[email protected]' />
        </p>
        <p>Passes
          <select name='passList'>
<option id='pass' value='(TYPE M DATE 2015-01-05T20:33:05.000000+09:00 AMT
                          17000)'>Jan 2015
</option>
<option id='pass' value='(TYPE W DATE 2014-12-29T20:00:38.000000+09:00 AMT 6000)'>Dec 2014
</option>
          </select>
          <button type='button' id='getPass' class='btn'>Get Pass
          </button>
        </p>
        <p>
          <input type='submit' value='Edit Info' class='btn' />
        </p>
      </form>
      <dialog id='editPassDialog'>
        <h1>Edit Pass
        </h1>
        <form action='edit-pass' method='post' id='editPass'>
          <p>Date bought
            <input type='text' name='date' class='txt' />
          </p>
          <p>Type
            <input type='text' name='type' class='txt'></input>
          </p>
          <p>Amount Paid
            <input type='text' name='amt' />
          </p>
          <p>
            <input type='submit' value='Edit Pass' class='btn' id='submitPass' />
          </p>
        </form>
      </dialog>
    </div>
  </body>

JS:

_js72 = document.getElementById('editPassDialog');
    document.getElementById('getPass').onclick = function () {
        var frm = document.getElementById('editPass');
        var form = document.forms.namedItem("editStudent");
        frm.date.value = form.passList.options[form.passList.selectedIndex].value;
        return _js72.showModal();
    };
    document.getElementById('submitPass').onclick = function () {
        return _js72.close();
    };

The date is passed to the field. (the value of the option is passed) To pass html of the option use innerHtml property, like I did here:

http://jsfiddle.net/e80gf0rq/2/

Also, I suggest you use at least jquery/bootstrap for this. For example dialog element is only supported in chrome and opera: http://caniuse.com/#search=dialog

Upvotes: 1

Related Questions