I simulate keypress event and bind to the input element, but the login button still cann't use.
Here is the test address: http://124.207.226.122:21701/test.html.
My question is how to pass input empty validation in iframe.
Thanks.
parent page:
<body>
<div style="margin:0;">
<iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
</div>
<script type="text/javascript">
jQuery.fn.simulateKeyPress = function(character) {
jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};
$(function() {
$('#hk_iframe').load(function(){
var $iframe = $(this),
$contents = $iframe.contents();
window.setTimeout(function(){
$contents.find('#textbox').keypress( function(e) {
//alert( String.fromCharCode( e.which ) );
console.log(e);
});
$contents.find('#textbox').simulateKeyPress('x');
$contents.find('#textbox').val('user1');
$contents.find('#password').keypress( function(e) {
//alert( String.fromCharCode( e.which ) );
console.log(e);
});
$contents.find('#password').simulateKeyPress('x');
$contents.find('#password').val('user123456');
$contents.find('#login').click();
}, 1000);
});
});
</script>
</body>
child page:
<body ng-app="">
<form name="form">
<div ng-hide="isShow">
User Name <input type="text" required ng-model="userName" id = "textbox"/><br /><br />
Password <input type="password" required ng-model="password" id="password"/><br /><br />
<input type="button" ng-disabled="form.$invalid" ng-click="isShow = true" value="Login" id="login"/>
</div>
<div ng-show="isShow">
Successfully Login.<br />
<input type="button" ng-click="isShow = false;password='';userName=''" value="Logout" />
</div>
</form>
</body>
Thank you Michael Walter, you are right. Also, I made reference to this answer:
Angularjs: call other scope which in iframe
Here is my answer:
parent page:
<body>
<div style="margin:0;">
<iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
</div>
<script type="text/javascript">
$(function() {
$('#hk_iframe').load(function(){
var $iframe = $(this),
$contents = $iframe.contents();
window.setTimeout(function(){
$contents.find('#textbox').val('user1');
$contents.find('#password').val('user123456');
var $scope = document.getElementById("hk_iframe").contentWindow.angular.element("#formID").scope();
$scope.form.textbox.$setValidity('required', true);
$scope.form.password.$setValidity('required', true);
$scope.$apply();
$contents.find('#login').click();
}, 1000);
});
});
</script>
</body>
Related
Trying to make some database validation with Jquery Get method before submitting a form. But I get the error
Uncaught TypeError: form.submit is not a function
Got the logic form here
Simplified Code below (but the err is still there...)
<html>
<body>
<div id="insertCertificateForm">
<form action="/Certificates/Insert" method="post">
<div>
<label>Charge</label>
<input name="Charge" id="Charge" />
</div>
<input type="submit" value="Insert" class="btn btn-default" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#insertCertificateForm').submit(function (e) {
e.preventDefault();
var form = this;
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
form.submit();
}
else {
return false;
}
});
});</script>
</body>
</html>
Because after clicking button this would mean the current button and
insertCertificateForm was never a form anyways...it was Div
best would be to bind the form with an ID #myForm
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="insertCertificateForm">
<form id="Myform" action="/Certificates/Insert" method="post">
<div>
<label>Charge</label>
<input name="Charge" id="Charge" />
</div>
<input type="submit" value="Insert" class="btn btn-default" />
</form>
</div>
<script>
$('#insertCertificateForm').submit(function (e) {
e.preventDefault();
var form = $("#Myform");
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
form.submit();
} else {
return false;
}
});
});
</script>
</body>
</html>
and also load your scripts in the head
Your selector is wrong $('#insertCertificateForm'), if you want to do like this you need to add this id into your form <form id="insertCertificateForm" otherwise follow this way,
$('form').submit(function (e) {
e.preventDefault();
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
$(this).submit();
} else {
return false;
}
});
});
That's because you're calling this and not $(this) when declaring the form variable. You can either declare it as $(this) or use $(form) to submit the form.
I'm working on fading in the new content of #myform's HTML after the mail has been sent, but I cannot figure out, how to give it an animation, so it doesn't just throw out the new HTML. I'm thinking about something like this with the "fadeIn", but it doesn't work, what's the correct way of doing it?
$(document).ready(function() {
$(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').validate();
$('#myform').on("submit",function(e){
e.preventDefault();
if ($(this).valid()) {
var data = $(this).serialize();
$(this).html(newHTML).fadeIn("fast");
$.post( "includes/sendmail.php", {data});
}
});
});
});
$(document).ready(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').on("submit",function(e){
e.preventDefault();
$(this).fadeOut(3000, function(){
$('#myform').html(newHTML);
$('#myform').fadeIn(3000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
<input id="text" />
<input type="submit" value="Submit" />
</form>
On form submit you can first fadeOut the original contents and then you can replace its contents with the newer html like following way:
$('#myform').on("submit",function(e){
e.preventDefault();
if ($(this).valid()) {
var data = $(this).serialize();
$(this).fadeOut(3000, function(){
$('#myform').html(newHTML);
$('#myform').fadeIn(3000);
});
$.post( "includes/sendmail.php", {data});
}
});
You can take an idea from above code but there are N number of combinations that you can do with fadeIn/fadeOut. So please fine tune it as per you need.
You must first hide the content of the node you just replaced for fadeIn to work properly:
$(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').validate();
$("#myform").on("submit", function(e) {
if ($(this).valid()) {
console.log("it's valid");
var data = $(this).serialize();
$(this).html(newHTML).hide().fadeIn();
$.post("includes/sendmail.php", {
data
});
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form method="POST" id="myform">
<input type="text" name="username" id="username" />
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>
I am editing some jQuery that another person has written.
Inside the $(document).ready(function() they have a bit of code as follows:
$(document).on('submit', ".editForm", function(e) {
$.post( $(this).attr("action"), $(this).serialize(), function() {
successMsg("Sorted.")
})
e.preventDefault();
});
What i need to do is be able to access that serialized data on another click event.
How would i go about this?
Use serialize() with the $(".editForm") selector
$(document).ready(function() {
$(document).on('submit', ".editForm", function(e) {
$.post($(this).attr("action"), $(this).serialize(), function() {
successMsg("Sorted.")
});
e.preventDefault();
});
$("#click").on("click", function() {
alert($(".editForm").serialize());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="post" class="editForm">
<input name="fname" value="John" />
<br/>
<input name="lname" value="Doe" />
<br/>
<input type="submit" value="submit" />
<input type="button" id="click" value="click" />
</form>
If you want to get it as an array then use serializeArray()
$(document).ready(function() {
$(document).on('submit', ".editForm", function(e) {
$.post($(this).attr("action"), $(this).serialize(), function() {
successMsg("Sorted.")
});
e.preventDefault();
});
$("#click").on("click", function() {
alert(JSON.stringify($(".editForm").serializeArray()));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="post" class="editForm">
<input name="fname" value="John" />
<br/>
<input name="lname" value="Doe" />
<br/>
<input type="submit" value="submit" />
<input type="button" id="click" value="click" />
</form>
I have a page login, with label of user and pass. I want to know, how I do to when I press Enter in textbox to the button function to be called.
Login.js
$(document).ready(function () {
$("#btnOK").on("click", function () {
var UserName = $("#txt_user").val();
var Password = $("#txt_pass").val();
.
.
.
});
Login.cshtml
form action="#Url.Action("Default")" method="post">
<div id="boxLogin">
<br />
<label id="lbl_login">Login</label>
<div id="log">
<img src="../../img/images.jpg" alt=""/>
</div>
<div class="boxUser">
<label id="lbl_user">User: </label>
<input id="txt_user" type="text" value="" name="UserName">
</div>
<div class="boxPass">
<label id="lbl_pass">Pass: </label>
<input id="txt_pass" type="password" name="Password">
</div>
<div id="btns">
<input type="button" ID="btnOK" class="btn" value="Confirm" />
<input type="button" ID="btnCancel" class="btn" value="Cancel" />
</div>
</div>
</form>
You can submit it using below code:
$('#txt_usuario').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$( "#form" ).submit();
}
});
where form - is your form id.
$("#txt_senha").keyup(function(event){
if(event.keyCode == 13){
$("#btnOK").click();
}
});
Simple method is to change the btnOK element to a submit button (type="submit"), and change the javascript to run on the onsubmit event of the form.
On submit, it doesn't close the facebox for some reason. Can you guys help me out?
my code is:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#reset_form').click(function() {
$('#name,#comment').val('');
});
$('#submit').click(function() {
var name = $('#name').val();
var comment = $('#comment').val();
$.ajax({
url: '../forms/comment_ajax.php?id=<?php echo $_GET['id']; ?>',
data: { form_name: name, form_comment: comment },
success: function(data) {
$('#new_comment').append(data);
$(document).trigger('close.facebox');
$('#new_comment').effect("bounce", { direction:'down', times:5 }, 300);
$('html,body').animate({scrollTop:0}, 2000, "easeOutQuart");
return false;
}
});
});
});
</script>
Name: <br />
<input type="text" id="name" class="userpass" maxlength="15"/><br /><br />
Comment: <br />
<textarea id="comment" rows="6" cols="75"></textarea><br /><br />
<input type="submit" id="submit" value="Comment" class="button" />
<input type="reset" id="reset_form" name="submit" value="Reset" class="button" />
this isn't doing it $(document).trigger('close.facebox');
I have it opened in a facebox. The index for it to post on is: http://pastebin.com/JhpDhevr
Kinda messy, but yeah. It's not closing on submit.
try
$('#button-id').click($.facebox.close);
instead of
$(document).trigger('close.facebox');