We Keep Coding

Hiding button under condition in form in javascript

This is my first post so don't judge me if i do something wrong because i'm still learning but i have a question i'm making a form and i have a problem. When i left the button without any extra stuff when i tested the form i got as many entries as many times i clicked the button so i used a code snippet from here in JS and made the button so it disappears, problem is when i don't fill the form correctly it doesn't send the entry, so the question is how can i add the condition in form so the button only disappears when every field is written correctly? I would add the whole html but it's houndreds of lines of code now since it's pretty much where i test things here is the form code though.
My other thought was to maybe try to edit the php code, but to be honest i have no knowledge of that because my friend made that.
I also searched google and here for some tips but couldn't find any, thanks for help in advance.
$("#hideme").click(function(){
$(this).hide();
});
<form method="post" action="thankyou.php" style="overflow:hidden" class="accident-form4">
<input type="hidden" name="lang" value="pl">
<div class="form-group required">
<label for="name">Imię i nazwisko<span></span></label>
<input type="text" class="form-control inputToUpper" name="firstname" placeholder="Andrzej Kowalski" required="required" pattern=".*\S+.*" title="Wpisz swoje imię">
</div>
<div class="form-group required">
<label for="email">Email<span></span></label>
<input type="email" class="form-control" required="required" name="email" placeholder="np. andrzej.kowalski#gmail.com" title="Wpisz poprawny adres email!" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
<div class="form-group">
<label for="tel">Numer telefonu<span></span></label>
<input type="text" name="tel" placeholder="079 1234 5678" class="form-control" required="required" size="12" value="">
</div>
<label for="hour">Preferowana godzina kontaktu</label>
<select class="form-control" name="hour" placeholder="" title="" />
<option>Dowolna</option>
<option>Rano</option>
<option>Po południu</option>
<option>Wieczorem</option>
</select>
<input type="submit" name="lead" class="send" id="hideme" value="ROZPOCZNIJ CLAIM →">
</form>

you can simply check the value of the required fields before hiding the button.
$("#hideme").click(function(){
if (document.getElementsByName('firstname')[0].value != '' &&
document.getElementsByName('email')[0].value != '' &&
document.getElementsByName('tel')[0].value != '') {
$(this).hide();
}
});
or use your RegExp in Javascript again.
$("#hideme").click(function(){
if (document.getElementsByName('firstname')[0].value.match (/.*\S+.*/) &&
document.getElementsByName('email')[0].value.match (/[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/) &&
document.getElementsByName('tel')[0].value.match (/[0-9]+/)) {
$(this).hide();
}
});
that should to the trick (but i didn't test it).

addEventListener with a form element

I'm new with Javascript and I'm learning by myself. I have a problem with a form on my page. I just want to test with a simple javascript code that I can manipulate my input "type=submit" by adding a function to it to console.log a string when the form is submitted (I watched it on a video and I wanted to do it by myself).
Here is my code:
(function() {
"use strict";
document.getElementById('enviar').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
and this is my HTML code:
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>
The problem that I'm having here is that is not working at all.. my ID element is selected properly but I don't know what is wrong with my code. I created a variable and console my ID selected to see if I was getting the right element from the DOM and I'm getting in the console the right input element. please if someone knows why is not working.
plus: On my text input field I have a regular expression but I'm not getting the output I want.. the goal is that the user has to write at least two names (First and Last), so when they write just one it will be incorrect.. the problem that I'm having with this regular expression if when someone writes more than two names (First, Middle and Last) I DON'T want to make that an incorrect answer because technically is correct. So I need to make a better regular expression to get that result (when the user writes two or more names, not just two) but I don't know too much about Regular Expressions.

You are getting the element with the id enviar which is the submit button element. You need to be querying based on the form's element id which is escribenos. Try running the snippet below and you can see that it has the expected outcome.
(function() {
"use strict";
document.getElementById('escribenos').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you

Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};

First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});

this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

default value 'password' for input field, show it?

I'm using this js to display default password, when user clicks it automatically clears default value, if user deselects without entering anything default value re-appears.
I used it for all my fields, but obviously for password it is trickier! :)
How would you do it?
<input
type="password"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value='';}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />

Were you thinking of <input placeholder='Password' type='password'/> ?

This is your solution: http://jsfiddle.net/cgP5K/1/
<input
type="text"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value=''; this.type='password'}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />​

Try This out - http://roshanbh.com.np/examples/text-in-password/

You need to create a plain text input as a placeholder. This code will do that for you without exposing any variables to the global scope:
​<input id="pass-placeholder" type="text"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ value="Password" />
<script type="text/javascript">
(function(){
var pass_holder_el = document.getElementById('pass-placeholder');
var pass_el = document.createElement('input');
pass_el.type = 'password';
pass_el.onblur = function(){
if(!this.value)
this.parentNode.replaceChild(pass_holder_el, this);
}
pass_holder_el.onfocus = function(){
this.parentNode.replaceChild(pass_el, this);
pass_el.focus();
}
})();
</script>​
JSFiddle

Please use the below solution,
<input name="password" class="input"value="Password" size="20"
tabindex="20" onclick="if(this.value==defaultValue){this.value=''; this.type='password'} else if(this.value==''){this.value=defaultValue; this.type='text'} " onblur="if(this.value==''){this.value=defaultValue; this.type='text'}"/>
because first solution works well but if u empty the password field, it will not convert to its default value which is a text. So try above solution.

JQuery - Duplicate Field Input Text In Real Time

I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
This is the code I have:
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
$("#email").optionCopyTo("#mail");
Thanks!

You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
If that's right, try this:
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyup event.
I'd probably add a redundant blur event in case there's an autocomplete in the field.
$("#email").blur(function() {
$mail.val( this.value );
});

Since all your fields have unique ids, this is quite straight forward:
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
.change()
.val()

Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail").val($("#email").val()) should do what you want.

use keyup and change both.
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example
http://jsfiddle.net/6HmxM/785/

you can simply do this
$('#mail').text($('#email').val())