javascript - Storing and outputting form data -


i'm creating url-shortener, having issues getting jquery form values can output shortened url text.

here form using:

<form name="urlform">     <input type="text" name="url">     <button id="submit" type="button">submit</button>     <p>result:         <!-- output area. -->         <span id="url-output"></span>   </p> </form>

and here javascript using process form-data:

 // receive form when "submit" button clicked     $('form[name=urlform]').submit(function (event) {         console.log('form submitted');         // data in form         // there many ways data using jquery (you can use class or id also)         var formdata = {             //element[attribute=value]             'name': $('input[name=url]').val(),         };     // process form     $.ajax({         type: 'post', // define type of http verb want use (post our form)         url: '/createshorter', // url want post         data: formdata, // our data object         datatype: 'json', // type of data expect server         encode: true     })          // using done promise callback         .done(function (data) {             // log data console can see             console.log(data);              // here handle errors , validation messages         });      // stop form submitting normal way , refreshing page     event.preventdefault(); });

i believe problem lies within how collecting data in formdata variable. despite looking @ documentation, , several different attempts, nothing seems output relevant values. taking bad approach?

how can parse form information need?

the snippet non-functioning (strict security), review plunker instead. plunker demonstrates use of made form, use of plain javascript xmlhttprequest(), post real test server , receiving json in response. details commented in snippet.

snippet (non-functioning)

<!doctype html>  <html>    <head>    </head>    <body>  <!--use id , name, although name isn't used in instance, can useful under different circumstances-->    <form id='urlform' name="urlform">      <input type="text" id='url' name="url">      <!--use input type submit button instead, automatically trigger submit event once clicked-->      <input id="submit" type="submit">      <br/>      <label>result:        <!--using real output element allows display data value property or content methods such innerhtml or textcontent-->        <output id="urloutput"></output>      </label>    </form>        <script>      // reference form      var f1 = document.getelementbyid('urlform');      // reference output      var o1 = document.getelementbyid('urloutput');      // when submit event triggered...      f1.onsubmit = function(e) {        // prevent form submitting        e.preventdefault();        // reference xhr object        var req = new xmlhttprequest();        // post server        req.open('post', 'http://httpbin.org/post', false);        // reference formdata object        var formdata = new formdata(f1);        req.send(formdata);        o1.value = req.response;      }    </script>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

i have little problem on project. , turns out query result returns nothing when value of first name or last name has 'ñ' in it. here's code config.php: <?php ini_set('mssql.charset', 'utf-8'); header('content-type: text/html; charset=utf-8'); $servername = "192.168.1.21"; /* ip add of db server */ $connection = array("database" => "db", "uid" => "?", "pwd" => "***"); $conn = sqlsrv_connect($servername, $connection); if(!$conn){ echo "connection not established."; die(print_r(sqlsrv_errors(), true)); } ?> myquery: $idnumber = $_post["idnum"]; $response = array(); $query2 = "select clname, cfname, cmname, cqualifier student cidno = '$idnumber'"; try{ $stmt2 = sqlsrv_query($conn, $query2); } catch(pdoexeption $ex){ $response["success"] = 0; $response["message"] = "d...
Read more

php - trouble displaying mysqli database results in correct order -

i have table in database stores events , date expire. want display events on website display current events first expired events after? i have tried following sql $sql = "select noticeid, notice, noticedesc, noticeimg, noticedate, expirydate tbl_notices group noticeid ,expired order expirydate asc"; but returns expired results first due expirydate being ordered asc in query. my tbl_notice structure looks this noticeid => int(4) notice => varchar(100) noticedesc => text noticedate => timestamp noticeimg => varchar(40) expirydate => datetime expired => int(1) 0 current or 1 expired my php code is $sql = "select noticeid, notice, noticedesc, noticeimg, noticedate, expirydate tbl_notices group noticeid ,expired order expirydate asc"; $result = mysqli_query($conn,$sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { ...
Read more

C++ Linked List -

i trying create linked list download txt file , use linked list handle file line line. when handling downloaded linked list operations performed on such text editor would. encountering problems however. seems "node(string value)" section of code has wrong though original node() declaration no arguments passes. unable figure out quite is. node.h class node { public: node(); node(string value); void setnext(node *nextnode); // allows user set "next" pointer of node points friend class linkedlist; private: string data; // data box node* next; // pointer box }; node.cpp # include <string> # include "node.h" using namespace std; node::node() { data = ""; next = null; } node::node(string value) { data = value; next = null; } void node::setnext(node *nextnode) // allows user set "next" pointer of node points { this->next = nextnode; } your #include <string> ...
Read more