Develop Reference

how to handle file input from an HTML form using py-script?

I am using pyscript implement Python3 code into HTML files. I am currently trying to have a user submit a form and then I will run an algorithm on the data that is inside the form, ideally a .txt file.
Here is my table
<div class="container border big" style="display: block" id="formDiv">
<iframe name="k" style="display: none"></iframe>
<form target="k">
<label for="numberOfTables">Number of Tables</label>
<input
type="number"
class="form-control"
id="numberOfTables"
aria-describedby="numberOfTables"
placeholder="Number of Tables as an integer"
/>
<label for="studentList">
List of Students with name, sex, group number (example file here)
</label>
<input
type="file"
class="form-control"
id="studentList"
aria-describedby="studentList"
placeholder="Student list as a .txt file"
/>
<br />
<div id="fileInput"></div>
<input
type="submit"
id="button"
class="btn btn-primary"
py-click="test()"
value="Display Tables"
/>
</form>
</div>
I am able to access "numberOfTables" once the form is submitted through the following code:
<py-script>
def test():
number = Element("numberOfTables").value
</py-script>
But how would I access the information in the file? If I try to just do Element(studentList).value, then i get the string C:\fakepath\filename.txt.

How to close only current popup in Javascript and Jquery?

I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.

My suggestion would be to use the break function. That will exit the current loop.

Hide and Show Input Mask

When running this solution to hide and show an input mask, on page load I am seeing both input boxes. My script has been placed on the bottom of the page as last script. I am basically hiding and showing one or the other input box based on the checkbox. All appears to be working perfectly on jsfiddle and this code snippet, yet on Chrome, Android browser, Firefox and Safari both input boxes display on page load. After I toggle the checkbox, then it works properly. Not sure what is causing it to show both input boxes on page load. Any help wold be appreciated.
var showPass=false;
$('#c').change(function(){
showPass = ($('#c:checked').length>0);
if (showPass){
$('#p').hide();
$('#transaction_id').show();
}else{
$('#transaction_id').hide();
$('#p').show();
}
});
$('#p').change(function(){
if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
if (showPass) $('#p').val($('#transaction_id').val());
});
#transaction_id{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
<input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>

After trial and error, I found the solution. Just needed to initially hide the 2nd input:
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="(999) 999-9999" style="display:none" autofocus />
Simple solution. I have also fixed the code snippet for anyone who wants to use it.

how to get values when using javascript in form [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am a beginner in java-script, I would like to send my values to another page with using java-script .
my codes :
<form id="contact-form" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" /></label>
<label><span class="text-form">email</span><input type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button"href="savenazar.php" onClick="document.getElementById('contact-form').submit()">send</a>
</div>
</fieldset>
</form>
now how can I get name,phone .. values in savenazar.php page ?

The following code will help you achieve what you are looking for and it does it with AJAX so no need to refresh the page
<form id="contact-form" method="post" enctype="multipart/form-data"> <fieldset>
<label><span class="text-form">name</span><input name="name" id="name" type="text" /></label>
<label><span class="text-form">email</span><input id="email" type="text" /></label>
<label><span class="text-form">phone</span><input id="mobile" name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button id="submit">send</a>
</div>
</fieldset>
</form>
add the following js to your file or include it
$('#submit').click(function() {
name = document.getElementById('name').value;
email = document.getElementById('email').value;
mobile = document.getElementById('mobile').value;
$.post('savenazar.php', {'name': name, 'email': email, 'mobile'" mobile}, function(data) {
var parsed = JSON.parse(data);
var html = 'HTML to show when data is passed';
<!-- following are your divs -->
$('#requestStatus').append(html);
}).success(function() {
$('#comment').val('');
$('#sentSuccess').html('data Sent!').show().delay(5000).fadeOut();
}).fail(function() {
$('#sentFailed').html('data not sent').show().delay(5000).fadeOut();
});
});
// In savenazar.php
<?php
$name = $_GET['name'];

You need to add action="savenazar.php" attribute to the form and use <input type="submit"> instead of <a>. The email textbox also needs name="email" attribute
<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" />
</label>
<label><span class="text-form">email</span><input name="email" type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<input type="submit" class="button" value="send" />
</div>
</fieldset>
</form>
then in savenazar.php you can get the values by using $_POST["x"] where x is the name attribute of the input tag you want to get from. For example you can get name by $_POST["name"] because the name textbox has name="name" attribute. You can get email by $_POST["email"] because the email textbox has name="email" attribute. You can get phone by $_POST["mobile"] because the phone textbox has name="mobile" attribute, and so on.
Alternatively you can also use the <a> tag like in your previous code and set the href attribute to # as mentioned by #Ghost in the comment below
<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" />
</label>
<label><span class="text-form">email</span><input name="email" type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button" href="#" onClick="document.getElementById('contact-form').submit()">send</a>
</div>
</fieldset>
</form>

You would require some knowledge of server side programming, in this instance PHP.
Handling POST data server-side should be taken seriously as this is easily the most prominent security hole in most new websites.
A simple PHP script to view POST data would be:
<?php
if ($_POST) {
echo '<pre>';
var_dump($_POST);
echo '</pre>';
}
?>
"Security measures" must be taken when it comes to ensuring the validity of client-side input
Prevent SQL Injection (If storing in MySQL use mysqli_real_escape_string())
Form Flooding (Captcha is the most popular choice to prevent this)
Taking what ekad added you can then access the POST data using $_POST['name'] etc.
I recommend looking up some beginner tutorials, here is a good one to get started: PHP Forms

JQuery getting dynamic values and populate hidden form fields

I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!

You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});