I have an html form that places text field data into a Javascript array. The code is shown here:http://jsbin.com/maniwu/3/edit?html,js,output.
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
// Clear our fields
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>
But I want each embedded in Python 2.7 (windows, IDE: spyder) as shown below. How do I get them to communicate?
import js2py
js = ""
"
function classCollection() {
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
document.write(message)
}
classCollection()
""
".replace("
document.write ", "
return ")
result = js2py.eval_js(js)
print result
import webbrowser f = open('classInformation.html','w') records = """
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>""" f.write(records) f.close() webbrowser.open_new_tab('classInformation.html')
Related
what i would like are 2 input fields with a submit button.
the first field is the request for a username, the second field is a password.
if the user presses submit, the value of the fields should be below it.
but for a reason it doesn't quite work. if the user presses submit a second, then the result is written after it. and the intention is that the text of the first submit is completely replaced.
also the checker function does not work.
could anyone help?
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER() {
if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
user.title.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles.push(usernameInput.value);
titles.push(passwordBox.value);
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}
<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER()">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER()">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>
I changed your CHECKER() so it will check each input field. Your code was explicitly written to add and not replace content into your titles array. If you want the values to be replaced you will need something like the following:
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER(inp) {
if (!inp.value.match(/[a-zA-Z]$/) && inp.value != "") {
inp.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles=[usernameInput.value,
passwordBox.value];
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}
<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER(this)">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER(this)">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>
I have some code as below, a form validation for comment box on my web, I already linked it to validation javascript where the code notify them when they're input a wrong email structure or type the comment box over 140 char, and didn't insert the name it was like regex, and i would like to make another javascript internal to push the comment so after the user write the comment it will shown on the page, as shown bellow. But I got a little problem, where it couldn't show up my comment. Please if you read this question, tell me where did I do it wrong. Thank you so much
<script>
var comment = [];
var name= document.getElementById("nama");
var email= document.getElementById("email");
var message= document.getElementById("komen");
var messageBox = document.getElementById("display");
function insert(){
comment.push("Nama :" + name.value);
comment.push("Email : " + email.value);
comment.push("Message : " + message.value);
clearAndShow();
}
function clearAndShow (){
name.value = "";
email.value = "";
message.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += " " + comment.join("<br/> ") + "<br/>";
}</script>
<section>
<form name="RegForm" action="" onsubmit="return validation()" method="post">
Nama Anda :</br><input type=text name="Name" id="nama" size="35" placeholder="Nama"><br /><br>
Email :</br><input type=text name="EMail" id="email" size="35" placeholder="E-mail"><br /><br>
Komentar :</br><textarea rows="12" name="Comment" id="komen" cols="100" wrap="virtual" placeholder="Pesan"></textarea><br/><br>
<input type="submit" onclick="insert()" value="send" />
<input type="reset" value="Reset" name="Reset">
</form><br />
Your missing your #display. Add that should be fine:
let comment = [];
let name = document.getElementById("nama");
let email = document.getElementById("email");
let message = document.getElementById("komen");
let messageBox = document.getElementById("display");
insert = () => {
// You can push these all at once
comment.push(
`Nama :${name.value}`,
`Email : ${email.value}`,
`Message : ${message.value}`);
clearAndShow();
}
clearAndShow = () => {
name.value = "";
email.value = "";
message.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += " " + comment.join("<br/>") + "<br/>";
}
// remove this
document.querySelector('form[name=RegForm]').onsubmit = e => {
e.preventDefault();
}
<section>
<form name="RegForm" action="" method="post">
Nama Anda :</br>
<input type=text name="Name" id="nama" size="35" placeholder="Nama">
<br /><br> Email :</br>
<input type=text name="EMail" id="email" size="35" placeholder="E-mail">
<br /><br> Komentar :</br>
<textarea rows="12" name="Comment" id="komen" cols="100" wrap="virtual" placeholder="Pesan"></textarea><br/><br>
<input type="submit" onclick="insert()" value="send" />
<input type="reset" value="Reset" name="Reset">
</form>
</section>
<div id='display'></div>
Bear with my kindergarten introduction to Javascript and Phonegap.
I need a user to preview records captured before inserting them. Any work arounds? I have the implementation as follows:
function Preview() {
var vName = document.getElementById("name").value;
var vage = document.getElementById("age").value;
var vplace = document.getElementById("place").value;
var popup = window.open(view, 'Preview_records');
popup.document.write('Name:' + vName + '<br /> Age:' + vage + '<br /> Place: ' + vplace + '<br />');
}
<form id="view" method="POST" class="formular">
<label>Name</label>
<input type="text" name="name" id="name" /><br>
<label>age</label>
<input type="text" name="age" id="age" /><br>
<label>place</label>
<input type="text" name="place" id="place" />
<button onclick="Preview()">Preview</button>
</form>
When this window pops up, I want to have PROCEED button and CANCEL Button, where PROCEED will take me to an insertion function and CANCEL will drop back to edit form data.
Insertion function as
function Insertion() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(insertDT, errorZ, successY);
}
I don't know if something like this works in phonegap, but this would be my solution:
function preview() {
var vName = document.getElementById("name").value;
var vage = document.getElementById("age").value;
var vplace = document.getElementById("place").value;
var preview = document.getElementById("preview")
preview.innerHTML = 'Name:' + vName + '<br /> Age:' + vage + '<br /> Place: ' + vplace + '<br />';
var reset = document.getElementById("reset");
reset.style.display = "initial";
var submit = document.getElementById("submit")
submit.style.display = "initial";
reset.onclick = () => {
preview.innerHTML = "";
reset.style.display = "none";
submit.style.display = "none";
};
}
<form id="view" method="POST" class="formular">
<label>Name</label>
<input type="text" name="name" id="name" /><br>
<label>age</label>
<input type="text" name="age" id="age" /><br>
<label>place</label>
<input type="text" name="place" id="place" />
<button onclick="preview()">Preview</button>
<p id="preview"></p>
<input id="reset" type="reset" value="Cancel" style="display:none">
<input id="submit" type="submit" value="Proceed" style="display:none">
</form>
When I want to check my text type variable and display every char of it then it return numbers of value. And second problem when I give the variable to replace then it's undefined. Why is that, do you think?
<script>
function checkSpace(x) {
// alert(x.value.toString());
for (var charS in x.value.toString()) {
alert(charS);
}
return x.value.replace(" ", "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + "Title: " + replacedText2;
}
</script>
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form> <br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"> </div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5"></table>
</div>
</body>
charS is the index. x.value[charS] is the letter at the charS position.
Also replace(/ /g, "") will replace all spaces.
function checkSpace(x) {
// alert(x.value.toString());
for (var charS in x.value) {
alert(x.value[charS]);
}
return x.value.replace(/ /g, "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + " Title: " + replacedText2;
}
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form>
<br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"></div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5">
</table>
</div>
</body>
First of all, for..in iterates through object keys or array indexes. If you want to iterate through values, use for..of
Second, if you want to remove all spaces from string, use x.value.replace(/ /g, "") instead of x.value.replace(" ", "") wich will replace only the first space.
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form>
<br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"></div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5">
</table>
</div>
</body>
<script>
function checkSpace(x) {
// alert(x.value.toString());
for (var charS of x.value.toString()) {
alert(charS);
}
return x.value.replace(/ /g, "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + " Title: " + replacedText2;
}
</script>
I need some help: I have the following form:
<form id="myForm" method="post" action="?action=agc">
<input type="hidden" name="start_date" value="<?= $_POST['start_date'] ?>" />
<input type="hidden" name="end_date" value="<?= $_POST['end_date'] ?>" />
<input type="hidden" name="c_name" value="<?= $_POST['c_name'] ?>" />
<input type="hidden" name="cluster" value='<?= $abn_cluster[0] ?>' />
<input type="hidden" name="abn" value="abn" />
Add percent <br /><br />
ABN percent<br />
<input type="text" name="poll[option][0][percent]" class="toAdd"> <input type="text" name="poll[option][0][name]" value="<?= $_POST['c_name'] ?>_0_"> <input type="checkbox" class="optionBox" value="True" name="poll[option][0][control_sample]" /><br />
<script>
var optionNumber = 1;
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
var newOption2 = document.createElement("input");
var newOption3 = document.createElement("input");
var newLabel = document.createElement("label");
var newContent = document.createTextNode(" ");
var newContent2 = document.createTextNode(" ");
newOption.name = "poll[option]["+optionNumber+"][percent]";
newOption.type = "text";
theForm.appendChild(newOption);
theForm.appendChild(newContent);
newOption2.name = "poll[option]["+optionNumber+"][name]";
newOption2.type = "text";
newOption2.value = "<?= $_POST['c_name'] ?>_"+optionNumber+"_"
theForm.appendChild(newOption2);
theForm.appendChild(newContent2);
newOption3.name = "poll[option]["+optionNumber+"][control_sample]";
newOption3.type = "checkbox";
newOption3.className = "optionBox";
newOption3.value = "True"
theForm.appendChild(newOption3);
theForm.appendChild(document.createElement("br"));
optionNumber++;
}
</script>
</p>
</div>
<div class="modal-footer" id="appendform">
<button type="submit" class="btn btn-primary">Continue</button>
</form>
Now because some of the inputs are generated on request, I have no idea how to check the sum of the(.toAdd). And I basically need to make sure that it's equal to 100 before submitting. What would be a solution to my problem? Thanks.
Try
<form id="myForm" method="post" action="iap_crm_campaign.php?action=abngamecampaign" onsubmit="return validate()">
Then
function validate(){
var sum = 0;
for(var i = 0; i < optionNumber; i++){
sum += parseFloat(document.getElementsByName('poll[option][' + i + '][percent]')[0].value);
}
if( sum == NaN || sum != 100){
alert('Sum of percentage must be 100');
return false;
}
}
Demo: Fiddle
var total = 0;
var toAdds = document.getElementsByClassName("toAdd");
for (var i = 0; i < toAdds.length; i++) {
total += parseInt(toAdds[i].value, 0);
}
if (total == 100) {
// OK
} else {
// not OK
}
Also, your code for adding new options needs to set the class:
newOption.className = "toAdd";
you can use jquery
$(".toAdd").length
or in simple js
var myInputs= document.getElementsByTagName('input');
var noOfInputs =myInputs.length;
well this will give you the count of i/p elements through loop, for summing the values...
var sum;
$(".toAdd").each(function() {
sum=sum+$(this).val();
});