I am try to call a Javascript function using onkeyup event but it didn't work I try using onClick Event that one works fine. How can I use onkeyup event to call a function?
<input value="" autocomplete="off" name="maxamf" id="maxamf" onkeyup="sum()" class="" style="width:100px;color:#000;background:#FFF600;" type="text">
//javascript code
<script type="text/javascript">
function sum()
{
document.getElementById('maxamf').value = document.getElementById('5t2').value / ((0.05 + 1)*(document.getElementById('slrratio2e').value)) ;
}
</script>
Check this it's working fine try to enter some thing in the field
<!DOCTYPE html>
<html>
<body>
<input value="" autocomplete="off" name="5t2" id="5t2" onkeyup="sum()" class="" style="width:200px;color:#000;background:#D1D3D4" type="text">
<input value="" autocomplete="off" onclick="sum()" name="slrratio2e" id="slrratio2e" class="" style=" width:100px;color:#000;background:#D1D3D4" type="text">
<input value="" autocomplete="off" name="maxamf" id="maxamf" onkeyup="sum()" class="" style="width:100px;color:#000;background:#FFF600;" type="text">
//javascript code
<script type="text/javascript">
function sum() {
document.getElementById('maxamf').value = document.getElementById('5t2').value / ((0.05 + 1)*(document.getElementById('slrratio2e').value)) ;
}
</script>
</body>
</html>
http://jsfiddle.net/mz6qvehn/
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 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"/>
How to detect the changes in input values when it is dynamically changed.
as the change on txt2 clear the value in txt1 . I need to detect that it has cleared or changed.
Onchange does not do that.
<input id="txt1" type="text" onchange="SetDefault();" onpaste="this.onchange();" oninput="this.onchange();">
<br>
<input id="txt2" type="text" onchange="SetDefaultSecond();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
<script>
function SetDefault(){
alert("Change1");
}
function SetDefaultSecond(){
$("#txt1").val('');
alert("Change2");
}
</script>
You can manually trigger the input event when you clear the first input like this:
<input id="txt1" type="text">
<br>
<input id="txt2" type="text">
<script>
$("#txt1").on("input", function() {
alert("Change1");
});
$("#txt2").on("input", function() {
$("#txt1").val('').trigger('input');
alert("Change2");
});
</script>
jsFiddle here: https://jsfiddle.net/dr0oabj1/
you need to use oninput event to capture any change to an input. it triggers every time the value changes due to typing/pasting etc. difference between onchange & oninput is onchange only triggers after focus goes off the input where as oninput triggers every time values changes due to any reason.
function SetDefault(){
alert("Change1");
}
function SetDefaultSecond(){
$("#txt1").val('');
alert("Change2");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="txt1" type="text" oninput="SetDefault();" />
<br>
<input id="txt2" type="text" oninput="SetDefaultSecond();"/>
Try this :
$(document).ready(function(){
$("#txt2").on("input",function(){
$("#txt1").val('');
console.log("Change2");
})
$("#txt1").on("input",function(){
console.log("Change1");
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Text 1 : <input id="txt1" type="text">
<br><br>
Text 2 : <input id="txt2" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txt2").on("input",function(){
$("#txt1").val('');
console.log("Change2");
})
$("#txt1").on("input",function(){
console.log("Change1");
})
})
</script>
</body>
</html>
Kodies answer is right; just try this ultra simple example and then proceed to Detect all changes to a (immediately) using JQuery
<input id="txt1" type="text" oninput="console.log('input')" onchange="this.oninput()">
<br>
<button onclick="eval(this.textContent)">console.log('clearing'); txt1.value=''</button>
<br>
<button onclick="eval(this.textContent)">console.log('clearing <b>and triggering</b>'); txt1.value=''; <b>txt1.onchange()</b></button>
use this in txt2
oninput="changeClass(txt2);"
and in script
function changeClass(text) {
if(text.value==''){
//code for clear txt1
}
}
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.
I have below html code
<div id="divTest">
Hello
<input type="text" id="txtID" value="" />
<input type="button" onclick="getForm();" value="Click" />
</div>
And I have below javascript function to get innerHtml value
<script language="javascript" type="text/javascript">
function getForm()
{
var obj = document.getElementById('divTest');
alert(obj.innerHTML);
}
</script>
I am trying to get the complete innerHtml value. When user put some value in "txtId" and when he clicks on button it should show all the innerHtml with txtId value in it. It is working fine in Internet Explorer but failing in Mozilla.
Please suggest what type of changes I need to do in javascript function or I need some Jquery for this.
Thanks.
Best Regards,
I've run across this myself - try using obj.innerHtml (note capitalisation) instead.
I solved my problem by using below jQuery
<script type="text/javascript">
$(document).ready(function()
{
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function()
{
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function()
{
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
$.fn.html = $.fn.formhtml;
});
$(document).ready(function()
{
$('input[type=button]').click(function() {
alert($('#divTest').html());
});
});
</script>
and the html was as below:
<div id="divTest">
Hello
<input type="text" id="txtID" />
<input type="text" id="txtID" />
<input type="text" />
<input type="text" id="Text1" />
<input type="text" id="Text1" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" id="Text5" />
<input type="text" id="Text6" />
</div>
<input type="button" value="Click" />