I'm trying to duplicate a field input like this in JSFiddle
But when I save the below in a html file, it is not working.
Can someone please assist?
<html>
<head>
<script>
$(function() { // <== Doc Ready
$("#email").change(function() { // When email is changed
$('#mail').val(this.value); // copy it over to mail
});
});
</script>
</head>
<body>
<input type="text" name="email" id="email" />
<input type="text" name="mail" id="mail" />
</body>
</html>
Your function is working as expected.
The only issue with your code was the jQuery was not loaded to the snippet.
But instead of change, if you use keyup or input, you could see the changes right on time
Change will be triggered only when you focus away from your input.
$(function() { // <== Doc Ready
$("#email").on('keyup', function() { // When email is changed
$('#mail').val(this.value); // copy it over to mail
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />
<input type="text" name="mail" id="mail" />
This code will run for sure.
$(document).ready(function() {
$('#email').keyup(function(e){
$('#mail').val(e.target.value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />
<input type="text" name="mail" id="mail"/>
Related
so here is what trying to get i need only a way to add ( onsubmit="submitted=true") to the form via javascript
and thank you guys
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var submitted=false;
</script>
<iframe name="invisibleFrame" id="invisibleFrame" style="display:none;" onload="if(submitted)
{window.location='Confirmation.html';}">
</iframe>
<form action="https://link.com" method="post" target="invisibleFrame" onsubmit="submitted=true;" id="contact_form" autocomplete="on">
<label for="entry.164" class="phone" >phone</label><br>
<input type="text" name="entry.1647992981" placeholder="phone" required><br>
<label for="entry.1">name</label><br>
<input type="text" name="entry.1" placeholder="name" required><br>
<label for="entry.7">city</label><br>
<input type="text" name="entry.7" placeholder="city" required><br><br>
<button type="submit" class="order-button">submit</button>
</form>
</body>
</html>
actually im not good at all in coding so i just trying to get something done . thank you guys
Use addEventListener() to add a listener that does what you want.
<script>
document.querySelector("form").addEventListener("submit", function() {
submitted = true;
});
</script>
If you just want to make the iframe load the confirmation page when you submit the form, you can do that in the listener instead of setting the variable.
<script>
document.querySelector("form").addEventListener("submit", function() {
let iframe = document.querySelector("#invisibleFrame");
iframe.src = "Confirmation.html";
iframe.style.display = 'block';
});
</script>
I m applying two validation but both are not work
required validatation not work on input attribute
function validatation() not work
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="signup.js"></script>
<script type="text/javascript">
function validatation() {
debugger
if (document.PersonalInform.txtfname.value == "") {
debugger
alert("Please provide your first name!");
document.PersonalInform.Name.focus();
return false;
}
}
</script>
</head>
<body>
<form id="txtPersonalInformation" name="PersonalInform" onsubmit="return (validatation());">
<h1>Personal Information</h1>
First Name:<input id="txtfname" name="txtfname" type="text" /><br/>
Middle Name:<input id="txtmname" name="txtmname" type="text" /><br/>
Last Name:<input id="txtlname" name="txtlname" type="text" /><br/>
<input id="btnnext" type="button" value="Next" />
</form>
</body>
</html>
OR
Below Validation Also Not Work
First Name:<input id="txtfname" name="txtfname" type="text" required /><br/>
signup.js
$(document).ready(function () {
$('#btnnext').click(function (event) {
$("#txtPersonalInformation").load("ContactInformation.html");
});
});
I add this line in web.config file
web.config
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
</appSettings>
I want to perform this javascript function validation but not work?
function validatation()
Here's what you want. You weren't submitting you form, as noted by Mendrika.
HTML Form:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> type="text/javascript"></script>
<form id="some-form" action="some-url" onsubmit="return validate()">
<label for="first-name">First Name:</label>
<input id="first-name" name="first-name" type="text"><br>
<label for="last-name">Last Name:</label>
<input id="last-name" name="last-name" type="text"><br>
<input id="btn-submit" type="submit" value="Submit">
</form>
JS Sample Validate function
function validate() {
if ($("#first-name").val() === "") {
alert("Provide a first name");
$("#first-name").focus();
return false;
}
if ($("#last-name").val() === "") {
alert("Provide a last name");
$("#last-name").focus();
return false;
}
return true;
}
https://codepen.io/el-sa-mu-el/pen/QWjVGvb
Note, this is not good code, but it works. You should read more about basics of JS and form validation.
Some other observations:
Your form is missing the action=" " tag which actually POSTs the data to some URL. Where is your data going?
You are mixing vanilla Java Script and JQuery. Use JQuery for DOM access if you already included it, with the $ symbol.
You have a signup.js function but also include a Javascript function in the <script> tags. You can move the validate() function into the signup.js
Better form validation with JQuery:
https://www.sitepoint.com/basic-jquery-form-validation-tutorial/
The reason nothing works is because your form is never submitted.
You just need to change the next button type to submit.
<input id="btnnext" type="submit" value="Next"/>
I am using Ajax to submit forms in serial. I am trying to make the first s_referee_email + s_referee_fname pair required while the second or others not - there will be up to five of these pairs. I cant seem to figure how to make just the first pair required without breaking the form. I have tried using HTML5 and some answers from stack but havent been able to get anything to work. Any advice is greatly appreciated!
fiddle: https://jsfiddle.net/badsmell/gcrvqbna/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--serial submit ajax-->
<script>
function mySubmit(){
var myForms = $("form");
myForms.each(function(index) {
var form = myForms.eq(index);
var serializedForm = form.serialize();
serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
$.post("http://post.aspx", serializedForm, function (data, status) {
if (status === "success"){
window.location.href= "http://redirect";
}
});
});
}
</script>
<title>Forward a copy to a friend</title>
<style type="text/css">
*[class=hide] {
display: none
}
</style>
</head>
<body>
<!--hidden iframe-->
<iframe class="hide" id="myIframe"></iframe>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" required >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" required >
</form>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" >
</form>
<label for="s_referer_fname">Your name:</label> <br /> <input type="text" name="s_referer_fname" value="" size="20" id="s_refererFname" ><br>
<p><button onclick="mySubmit();">Submit</button> </p>
</body>
</html>
Adding required="required" to the tags can let you make any field compulsory to be filled by user.
You should never use .onclick(), or similar attributes from a userscript.
Userscripts operate in a sandbox, and onclick operates in the target-page scope and cannot see any functions your script creates.
Always use addEventListener() (or an equivalent library function, like jQuery .on()).
So instead of code like:
something.outerHTML += '<input onclick="func()" id="button_id" ...>'
You would use:
something.outerHTML += '<input id="button_id" ...>'
document.getElementById ("button_id").addEventListener ("click", func, false);
And for your answer, one method is to perform a check before actually submitting the forms. Check if the required fields have been filled, if yes, go ahead and submit the form, or else don't submit and show an error message instead.
Aweber from data display javascript code something look like:
<script type="text/javascript">formData.display("name")</script>
<script type="text/javascript">formData.display("email")</script>
<script type="text/javascript">formData.display("phone")</script>
Now How can I use this in input filed value like:
<form method="post" action="">
<input name="name" type="text" value="<script type="text/javascript">formData.display("name")</script>">
<input name="email" type="text" value="<script type="text/javascript">formData.display("email")</script>">
<input name="phone" type="text" value="<script type="text/javascript">formData.display("phone")</script>">
<input type="submit" value="Go">
</form>
Reference: https://help.aweber.com/entries/21696333-How-Do-I-Display-Subscribers-Names-or-Email-Addresses-On-My-Thank-You-Page-
Please help me.
You can not simple place some code inside a value attribute hoping it will work, you need to appropriate JavaScript code to add the formData to the value attribute of the input field. You can do it with something like:
window.onload = function() {
document.getElementsByName('name')[0].value = formData.display("name");
document.getElementsByName('email')[0].value = formData.display("email");
document.getElementsByName('phone')[0].value = formData.display("phone");
}
I am trying to validate a form, but I can't get any code to execute when my button is clicked. Here's my code:
<div id="vehicle_form">
<form method="post" name="emailForm" action="">
<input class="dField" id="dfEmail" type="email" name="email" value="Email" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<button type="button" id="dSubmit">Submit</button>
</form>
</div>
$('#dSubmit').click(function(){
console.log('click');
});
You need to ensure that your jQuery is wrapped in a <script> tag, and ensure that the function is being loaded, perhaps by a $(document).ready() function, as shown below:
<script type='text/javascript'>
$(document).ready(function(){
//Your Click event
$('#dSubmit').click(function(){
console.log('click');
});
});
</script>
Working Demo
Actually the code stays wrong. A form can be often submitted by hitting enter inside of a textfield. If you want to make it right you should use the submit event.
<script>
$(function(){
$('#vehicle_form > form').submit(function(){
console.log('submit');
});
});
</script>