how can i solve the double submit problem in javascript code

how can i solve the double submit problem in javascript code - javascript

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>

Related

how to push comment using javascript?

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>

Html in Python communicating with JavaScript in Python

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')

Submit form not connected to multiple fields

I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>

i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>

Validating form after error has been shown

I have a form where username and password are entered. If they are left blank an error is shown, however when one of the input box is filled in and the submit button is clicked the error that's there doesn't go away.
<script type="text/javascript">
function chck() {
var valid = true;
var pass = document.getElementById('password_box').value;
var user = document.getElementById('username_box').value;
if (user == '') {
document.getElementById('password-error').innerHTML = "* Please enter username to proceed...";
document.getElementById('username_box').style.borderColor = "#DC3D24";
document.getElementById('username_box').style.backgroundColor = "maroon";
valid = false;
}
if (pass == '') {
document.getElementById('user-error').innerHTML = "* Please enter password to proceed...";
document.getElementById('password_box').style.borderColor = "#DC3D24";
document.getElementById('password_box').style.backgroundColor = "maroon";
valid = false;
}else{
valid = true;
}
return valid;
}
</script>
</head>
<body>
<form action="checkup.php" method="post" name="checkup">
<div class="login-box">
<input type="text" placeholder="Username goes here.." id="username_box" class="box" name="username">
<input type="password" placeholder="Password goes here.." id="password_box" class="box" name="password"> <BR>
<input type="submit" class="button" id="submit_button" value="LogMeIn" onClick="return chck()">
<input type="button" class="button" id="clear_button" value="Clear">
</div>
</form> <BR>
<center>
<div class="error-area" id="message">
<p id="password-error">
</p>
<p id="user-error">
</p>
</div>
</center>
Only if I fill in both boxes, then the error goes away. I want to hide the error as soon as one of the boxes is filled in with text. Thanks for any help you can give me.

Try using HTML5......just add required attribute and to clear values use reset input
<form action="checkup.php" method="post" name="checkup">
<div class="login-box">
<input type="text" placeholder="Username goes here.." id="username_box" class="box" name="username" required title="* Please enter username to proceed...">
<input type="password" placeholder="Password goes here.." id="password_box" class="box" name="password" required title="* Please enter password to proceed..."> <BR>
<input type="submit" class="button" id="submit_button" value="LogMeIn" onClick="return chck()">
<input type="reset" value="Clear">
</div>
</form>
or if you want to achieve this with the existing code try using onfocus event to clear the error message. Hope this hepls

You could run chck() on the "keypress" event for your "username_box" and "password_box" elements.
Like so:
document. getElementById("username_box").addEventListener("keypress", function () {
chck();
}, true);
but update chck slightly to be:
function chck() {
var valid = true;
var pass = document.getElementById('password_box').value;
document.getElementById('password-error').innerHTML = "";
var user = document.getElementById('username_box').value;
document.getElementById('user-error').innerHTML = "";
document.getElementById('password_box').setAttribute("style", "");
document.getElementById('username_box').setAttribute("style", "");
if (user == '') {
document.getElementById('password-error').innerHTML = "* Please enter username to proceed...";
document.getElementById('username_box').style.borderColor = "#DC3D24";
document.getElementById('username_box').style.backgroundColor = "maroon";
valid = false;
}
if (pass == '') {
document.getElementById('user-error').innerHTML = "* Please enter password to proceed...";
document.getElementById('password_box').style.borderColor = "#DC3D24";
document.getElementById('password_box').style.backgroundColor = "maroon";
valid = false;
}
else{
valid = true;
}
return valid;
}

My javascript function is not working, when i click to submit my form

My javascript function is not working, when i click to submit my form.
can someone help with that? i think is everything all right, but it's not working for some reason i don't know.
<form action="<?php echo base_url();?>my_data" onsubmit="onSubmit()" method ="POST">
<p class = "my_data_text">Nome</p>
<input type="text" class="form-control" style="width:54%;" name= "changed_user_name" value = "<?php echo $this->session->userdata('nome_usuario');?>"></input>
<p class = "my_data_text">Email</p>
<input type="text" class="form-control" style="width:54%;" name = "changed_user_email" value = "<?php echo $this->session->userdata('email_usuario');?>"></input>
<p class = "my_data_text">Digite sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "changed_password"></input>
<p class = "my_data_text">Confirme sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "change_confirm_password"></input>
<button id ="btn_mydata_submit_incident" type="submit" class="btn btn-primary" >salvar</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function onSubmit(){
alert("email inválido");
var result =1;
var checar = document.querySelector("#changed_user_email");
var test = checar.value.indexOf("#");
if (test == -1){
alert("email inválido");
result =0;
}
var checar = document.querySelector("#changed_password");
var passw= /^[A-Za-z]\w{7,14}$/;
if(!checar.value.match(passw)){
alert("password inválido");
result =0;
}
if (result ==0){
return (false);
}
else{
return (true);
}
}
</script>

Try this:
<form action="<?php echo base_url();?>my_data" onsubmit="return onSubmit()" method ="POST">
<p class = "my_data_text">Nome</p>
<input type="text" class="form-control" style="width:54%;" name= "changed_user_name" value = "<?php echo $this->session->userdata('nome_usuario');?>"></input>
<p class = "my_data_text">Email</p>
<input type="text" class="form-control" style="width:54%;" name = "changed_user_email" id="changed_user_email" value = "<?php echo $this->session->userdata('email_usuario');?>"></input>
<p class = "my_data_text">Digite sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "changed_password" id="changed_password"></input>
<p class = "my_data_text">Confirme sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "change_confirm_password"></input>
<button id ="btn_mydata_submit_incident" type="submit" class="btn btn-primary" >salvar</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function onSubmit(){
var result =1;
var checar = document.getElementById("changed_user_email");
var test = checar.value.indexOf("#");
if (test == -1){
alert("email inválido");
result =0;
}
var checar = document.getElementById("changed_password");
var passw= /^[A-Za-z]\w{7,14}$/;
if(!checar.value.match(passw)){
alert("password inválido");
result =0;
}
if (result ==0){
return false;
}
else{
return true;
}
}
</script>

I think its because you're not using the input type="submit" but using button type="submit".
You should replace the submit button for this:
<input type="submit" value="salvar" class="btn btn-primary" id="btn_mydata_submit_incident"/>
Or just change the onSubmit javascript event for the onclick one.

another way you can try doing is
$('#button_id').click(function(){
onSubmit(); //call the function,return something true false value from function return and depending on that submit the form
$('#form_id').submit();
});
I hope,it helps you !!!

Use this code.. Working for me perfectly...
<form action="" onsubmit="onSubmit()" method ="POST">
<p class = "my_data_text">Nome</p>
<input type="text" class="form-control" style="width:54%;" name= "changed_user_name" value = ""></input>
<p class = "my_data_text">Email</p>
<input type="text" class="form-control" style="width:54%;" name = "changed_user_email" value = ""></input>
<p class = "my_data_text">Digite sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "changed_password"></input>
<p class = "my_data_text">Confirme sua nova senha</p>
<input type="password" class="form-control" style="width:54%;" name = "change_confirm_password"></input>
<button id ="btn_mydata_submit_incident" type="submit" class="btn btn-primary" >salvar</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function onSubmit(){
alert("email inválido");
var result =1;
var checar = document.querySelector("#changed_user_email");
var test = checar.value.indexOf("#");
if (test == -1){
alert("email inválido");
result = 0;
return false;
}
var checar = document.querySelector("#changed_password");
var passw= /^[A-Za-z]\w{7,14}$/;
if(!checar.value.match(passw)){
alert("password inválido");
result =0;
return false;
}
if (result == 0){
return (false);
}
else{
return (true);
}
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

how can i solve the double submit problem in javascript code - javascript

Related

how to push comment using javascript?

Html in Python communicating with JavaScript in Python

Submit form not connected to multiple fields

Validating form after error has been shown

My javascript function is not working, when i click to submit my form

Categories

Resources