CODEWITHSUNDEEP
javascriptcsshtmlforms
user5932649
user5932649

Reputation:

Uncaught TypeError in HTML/CSS/JS

I'm trying to replicate a form builder similar to http://bootsnipp.com/j87klPolka/formbuilder3.html.

I'm fairly new to HTML/CSS/JS so I'm not sure if I'm doing this right. I'm just trying to do the frontend of this, so storing the data for the form being created isn't an issue right now. Thanks! Below is the code:

 <html>
<head>
    <title>Form Builder</title>
    <link rel="stylesheet" type="text/css" href="Sign_in.css">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/landing-page.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">


<style>
#div1 {width:50%; height:50%; padding:50px; border:1px solid #aaaaaa;}

</style>    
<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

</script>
</head>

<body>
    <form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->
    <legend>Hello</legend>

<ul id="drag-elements">
    <li draggable="true" ondragstart="drag(event)">
    <!-- Text input-->
    <div class="form-group" >
        <label class="col-md-4 control-label" for="textinput">Text</label>  
        <div class="col-md-4" >
        <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
        </div>
    </div>
    </li>

    <li draggable="true"  ondragstart="drag(event)">
    <!-- Password input-->
    <div class="form-group" draggable="true" ondragstart="drag(event)">
      <label class="col-md-4 control-label" for="passwordinput">Password Input</label>
      <div class="col-md-4">
        <input id="passwordinput" name="passwordinput" type="password" placeholder="placeholder" class="form-control input-md">
        <span class="help-block">help</span>
      </div>
    </div>
    </li>
    </fieldset>
    </form>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>

</body>

Upvotes: 0

Views: 221

Answers (1)

Hatchet
Hatchet

Reputation: 5428

Your <li>s are draggable, but they have no id set, which you are trying to access in your drag method. Simply set an id to each of the draggable list items to make it work.

https://jsfiddle.net/Hatchet/3y3xyg0b/

Upvotes: 2

Related Questions