how to edit the code, to function OnClick worked automatically?
This is code:
<form name="statusUpdate" action="" method="">
<textarea style="width:0; height: 0;" name="status" id="status" readonly>VARIABLE 1 http://bit.ly/VxwZWv </textarea>
<br />
<input type="button" onclick="updateStatusViaJavascriptAPICalling(); return false;" value="KLIKNIJ, ABY ROZPOCZAC" />
</form>
and function:
function updateStatusViaJavascriptAPICalling(){
var status = document.getElementById('status').value;
FB.api('/me/feed', 'post', { message: status }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Ok. Teraz w menu wybierz opcje GENERUJ ');
}
});
}
Thanks
Add the onload attribute to the HTML Body tag:
<body onload="updateStatusViaJavascriptAPICalling();">
without jQuery:
<body onload="javascript:function();">
or
<head>
<script type="text/javascript">
window.onload=function(){
};
</script>
</head>
or if using jquery simply put this in your document.ready function and then it will happen on page load instead of on button click.
If you are wanting the button to exist and be hidden no one can click it...but you can do this with hidden inputs and then running the function "sometime".
Related
I'm developing asp.net core and test in Edge browser(version: 96.0.1054.62).
I'm send ajax request and get the html content, then I embedded the html block into current page. After that, I set focus on the html elment in the html block. But I cannot see the focus effect when I call the setFcous function.
In general, when I set focus on one elment, it will have black border wrap it like fhe following.
The following is the code sample:
Index.cshtml
<form>
<input id="btnDelete" value="Delete" type="button" style="width: 60px" />
</form>
<div id="divInputs" style="display: none">
</div>
<script type="text/javascript">
function setFocus(elementId) {
var obj = document.getElementById(elementId);
if (isDefine(obj)) {
console.log(obj);
obj.focus();
}
}
function isDefine(obj) {
return !(obj == undefined || obj == null)
}
$(function () {
$('#btnDelete').on('click', function () {
$.get('/Home/Delete?', (data) => {
$('#divInputs').html($(data));
$('#divInputs').show();
setFocus('btnAction');
});
});
});
</script>
HomeController.cs
public IActionResult Delete()
{
return View("Delete");
}
Delete.cshtml
#{
Layout = null;
}
<div>
<input id="btnAction" class="button" type="button" value="Delete"/>
<input id="btnCancel" class="button" value="Cancel" type="button"/>
</div>
The focus is set to the button from your code. You can test it with adding the following style to your page.
<style>
input:focus {
background-color: yellow;
}
</style>
I am using jcryption for encrypting the form.It works fine if i use submit button in form. Instead if i use button and submit the form manually my jcryption method is not getting called.
below is my code
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#login").bind('click', function(){
document.authenticatorform.username.value=$("#username").val();
document.authenticatorform.password.value=$("#password").val();
alert('outer hello');
$("#authenticatorform").jCryption({
getKeysURL:"<%=request.getContextPath()%>/keypairrequest",
beforeEncryption:function() {
alert('inner hello');
document.authenticatorform.submit()
return true; },
encryptionFinished:function(encryptedString, objectLength) {return true;}
});
});
});
</script>
<body>
<form:form method="post" action="login.htm" name="authenticatorform" id="authenticatorform">
<input type="hidden" name="username"/>
<input type="hidden" name="password"/>
</form:form>
<input type="button" id="login"/>
</body>
</html>
In the code only outer alert is printing.
Is it possible to call jcryption in other than submit button?
Any help will be greatly appreciated!!!!!
Try using on click function instead of bind
Try this:
$("#login").on('click', function(){
//your codes goes here
}
I have this jquery to delete a customer comment.
my problem is in "if(confirm" part. I want to show a div asking if user is sure about deleting this comment. not just a browser default alert box.
how can I do this?
var Progressajax = false;
$(document).ready(function() {
$(".delete_post").on('click',function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var I = element.attr("id");
if(confirm('Are you sure?')){
$.ajax({
type: "POST",
url: "/js-calls/post_delete.php",
data: "id="+I,
success: function(){
Progressajax = false;
$(".volta"+I).fadeOut(600, function(){
$(".volta"+I).remove();
});
}
});
}
return false;
});
});
and is there something that I can improve here?
thanks
One simple solution would be to just utilize jquery .hide() and .show() to hide/show the div element when you need to. You could enhance this to leverage bootstrap as mentioned above to make it more of a visually appealing modal dialog, but this should give you an idea of how the code should work.
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="Delete Item" id="btnDelete"/>
<div id="confirmBox">
<p>Are you sure you want to delete this record?</p>
<br />
<input type="button" value="Yes" id="btnYes"/>
<input type="button" value="No" id="btnNo" />
</div>
<script type="text/javascript" src="jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
$(document).ready(function () {
$('#confirmBox').hide();
$('#btnDelete').on('click', function (e) {
$('#confirmBox').show();
});
$('#btnYes').on('click', function (e) {
//Do Delete Action Here
alert("Item Deleted");
$('#confirmBox').hide();
});
$('#btnNo').on('click', function (e) {
//Cancel Action Here
alert("Action Cancelled");
$('#confirmBox').hide();
});
});
This simple chat works except when I submit the form; the entire page reloads. I need only for the form itself to submit the data to the database and clear the form. The div that displays the output refreshes automatically with no trouble. I have tried every conceivable variation of includes, divs, frames, etc for days. If I separate the form from the page containing the div, it works ...but I need everything on one page.
here is the html:
<% #LANGUAGE = "VBScript" %>
<!-- #INCLUDE VIRTUAL="000_scripts/asp/chat_config.asp" -->
<!-- #INCLUDE VIRTUAL="chat_scripts.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="chat.js"></script>
</head>
<body>
<div id="div_db1">not loading db1</div>
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<input type="submit" value="send" onClick="submitform()">
</form>
</body>
</html>
here is the js:
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
function submitForm() {
var frm = document.getElementsByID('Send_Chat')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}
$.ajaxSetup ({
cache: false
});
$(document).ready(function(){
setInterval(function(){
$('#div_db1').load('viewalldb3.asp');
}, 50);
});
window.onload = function() {
var input = document.getElementById("T_Body_FieldID").focus();
}
Use jquery.post. You can do it on a button click, so
$(":button").click(function(){
$.post({url where data is posted}, formData)
you have to prevent the submit event to bubble up to avoid the default page refresh behavior.
so your code would need to be changed to something like this (i moved your event handler assignment into javascript because it's cleaner)
$('#Send_Chat').on('submit', function(e){
e.preventDefault(); //this prevents the refresh because it cancels the default event bubbling
$.ajax({ //make sure your form data gets to the server ...
type: "POST",
url: <% toDB() %>,
data: $(this).serialize(),
success: function() {
//done - you've submitted your message
}
});
$('#T_Body_FieldID').on("keydown", function() {
if (event.keyCode == 13) {
$('#Send_Chat').submit(); // Submit form code
}
});
and your html
<form name="Send_Chat" id="Send_Chat" action="#" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID"></textarea>
<input type="submit" value="send">
</form>
I tried all of these suggestions and unfortunately none of them worked for me. I appreciate it though! I finally got it to work by placing the form into an iframe.
Hey can you please try this...
Instead of having
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<input type="submit" value="send" onClick="submitform()">
</form>
Have this
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<span onClick="submitform()">Send</span>
</form>
This way your button wont do a post back just make sure u style the span with a button look you should be fine after that :) even with your existing code i reckon... give it a crack
I am trying to submit a form through jquery. I want to get my form submit event get fired when jquery submits the form.
But when form is submitted successfully, submit event handler is not called successfully.
Below is the code :
<html>
<head>
<title>forms</title>
<script src="../common/jquery-1.6.2.min.js"></script>
<script>
$('#testform').submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(html) {
$("#menu").html('<object>'+html+'</object>');
});
return false; // prevent normal submit
});
</script>
</head>
<body>
<form id="testform" action="<%=getURL%>" method="post" >
<!-- <input type="hidden" value="DocQrySetup" name=form>
<input type="hidden" value="bdqdb1" name=config>-->
<input type="hidden" value="test" name=otherParams>
</form>
<script language=javascript>
$('#testform').submit();
</script>
<div id="menu" style="position:relative; bottom: 0; overflow:hidden;">
</div>
</body>
I searched all the forums but was not able to get the resolution.
The form doesn't exist when you run the first script so your event handler has nothing to attach to.
Either need to move that handler to after the form or wrap it in
$(document).ready(function() {
$('#testform').submit(function() {
/* your code */
});
});
The form isn't defined when you attach the event listener, move the code where you attach the event listener after the form or wrap the code with:
jQuery(document).ready(function ($) {
...
});
And add a submit button.
...
<input type="submit" value="submit">
...