Passing Variables Between Javascript and Python

Question

I am attempting to pass the value of an integer from within a javascript function to a server side python script. I have tried to find a way to pass this value directly from the javascript to python but have not yet been successful, so instead I have tried to create a hidden element which contains the value of my int within my html form with the javascript function. Then using the action 'POST' with the Python Bottle framework I have tried to copy the value to my python script. However, the int is being processed as being of NoneType, rather than an int, and so I cannot use it within the processing script. The part of my JS function which creates the element with the int named instance is as follows

function newItem(){
  instance++;

  var oldInput = document.getElementById("itemInfo");
  var parent = oldInput.parentNode;
  var newDiv = document.createElement("div");

  var item = document.createElement("INPUT");
  var qty = document.createElement("INPUT");
  var color = document.createElement("INPUT");
  var count = document.createElement("HIDDEN");

  item.name = "item" + instance;
  qty.name = "qty" + instance;
  color.name = "color" + instance;
  count.value = instance;
  newDiv.appendChild(item);
  newDiv.appendChild(qty);
  newDiv.appendChild(color);
  newDiv.appendChild(count);

The HTML form with the 'POST' method

<form method ="post" class="form" action = "/newguest" method = 'post'>
   Name: <input type="text" name="name"/>


   <p>Item: <input type="text" name="item"/> 
   Qty: <input type="text" name="qty"/>
   Color: <input type="text" name="color"/></p>
   <div class="itemInfo" id="itemInfo"></div>
    <input type ="button" value="Add Item" onclick="newItem();"/>


   <p>Phone: <input type="text" name="phone"/>
   Email: <input type="text" name="email"/>
   Artwork: <input type="file" name="file"/>
   <p>Quote: <input type="text" name="quote"/></p>
 </p>
   <p>Notes: <textarea cols="40" rows="10"></textarea>
 </p>
   <input type="submit" value='Add Order'/>
 </form>

And finally the python script on the server side

 @bottle.route('/newguest', method = 'POST')
def insert_newguest():
    name = bottle.request.forms.get("name")
    email = bottle.request.forms.get("email")
    item = bottle.request.forms.get("item")
    qty = bottle.request.forms.get("qty")
    color = bottle.request.forms.get("color")
    count = bottle.request.forms.get(count)
    itemDict = dict()
    qtyDict = dict()
    colorDict = dict()
    for num in range(1, count):

    itemkey = "item" + str(num)
    qtyKey = "qyt" + str(num)
    colorKey = "color" + str(num)
    itemDict[itemKey]= bottle.request.forms.get("item"+str(num))
    qtyDict[qtyKey] = bottle.request.forms.get("qty"+str(num))
    colorDict[colorKey] = bottle.request.forms.get("color"+str(num))

When attempting to add information with the 'POST' method, I receive the following error:

Answer 1

You are probably getting this message because your hidden field hasn't been created correctly.

• Firstly, I can't see you actually adding the newDiv to the DOM in your code above.

• Secondly - is the HTML form you have provided hard coded? If so then why are you hardcoding a form and then creating the fields again in javascript? This seems a bit weird.

• Thirdly and most importantly, as a hidden field is just an <input> , you need to replace

   var count = document.createElement("HIDDEN"); 

  With:

   var count = document.createElement("INPUT"); count.setAttribute('type', 'hidden'); count.setAttribute('name', 'count'); count.setAttribute('value', my_count_variable); 

See this answer and an example jsFiddle . Now when you submit the form your count field should be populated in the Python script.

As an aside, this kind of request is often handled by AJAX. The idea is the same its just that you don't need to refresh the browser to send your count to the Python server. You can see an example of how to do this without jQuery here .