i have tried every possible script on StackOverflow but nothing is working.I want to bind enter key to a textbox , which clicks the specific button.
Code looks like this:
<form>
Enter URL: <input type="text" id="url" />
<input id="button" type="button" value="Load" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
button leads to another script for loading URL (which is working absolutely fine).But when i use any javascript or jquery, nothing happens, it shows "?" in main browser URL and my link from textbox disappers.
Sorry i am noob in programming, please help me
My loadUrl() Script:
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'https://'+url;
}
</script>
Here's the example on Plunker. If you create the form correctly it should automatically submit when you press the enter key, or click the Go/submit button.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="theForm" method="GET" action="#">
Link:
<input type="text" id="url" />
<input type="submit" id="goButton" value="Go"/>
</form>
<iframe id="showUrl"></iframe>
<script src="script.js"></script>
</body>
</html>
script.js
var url = document.getElementById('url'),
showUrl = document.getElementById('showUrl'),
goButton = document.getElementById('goButton'),
theForm = document.getElementById('theForm');
function loadUrl(e) {
e.preventDefault();
showUrl.src = url.value;
return false;
}
theForm.addEventListener('submit', loadUrl);
url.addEventListener('keyup', function(e){
//You shouldn't need this since the form submits when you click enter anyway.
console.log(e.key);
console.log(e.which);
console.log(e.char);
});
Related
I've a form that points to itself on POST operation to process data. This part is good. Now in the form I've a textbox and a button (X) that is used for another purpose as well. When this button X is clicked it should take the input value from the text box and point to another ASP page, process data and return the value...and this is the part I'm unable to figure out... Let me explain this in a bit more clearly..
form name=frmAccounts method=Post action="self.asp"
...
...
name ---> Textbox
function ---> textbox :: search button(X) <--> sales.asp
Description --->textbox
...
...
Form Submit ---> button
Form ends
Now..suppose I enter function as "Sales" in the textbox, then when I click on the search button it would look at another ASP page like sales.asp that will query for relevant description and populate the description box...Then the form submit will call the self.asp to do its function.
Question: How can I pass value from function textbox, via search button, to sales.asp for processing and return back the value.
Things I've tried so far with no luck
1) Functions using #include method
2) Button onClick method by passing Request.Form data
3) href option by passing the URL by adding the form data - URL does not take the value
some other methods after Googling through many forums but with no joy.
Any help please?
Like Lankymart says, do something like this:
Self.asp
<form action="self.asp" name="myform" id="myform">
<input type="text" name="name" id="name" />
<br /><input type="text" name="functionbox" id="functionbox" />
<br /><input type="button" name="search" value="search" id="search" />
<br /><input type="text" name="Description" id="Description" />
<br /><input type="submit" value="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#search").click(function() {
$.ajax({
data: {'functionbox': $("#functionbox").val()},
url: '/sales.asp',
success: function(data) {
if (data) {
$("#Description").val(data);
}
}
});
});
});
</script>
sales.asp
<%# LANGUAGE = JScript %>
var functionbox = Request.Form("functionbox").Item;
var answer = getAnswer(functionbox); // your code here
%><%= answer %>
I have a page where i am rendering GridView. In GridView i have a CheckBox and once you check, uncheck, Jquery Dialog appears and i need a postback event on that dialog. so i am adding a manual postback on that page. everything is fine till gridview has only 1 page. as soon as gridview has more records, it add a _doPostBack method on page. so i now have a 2 _doPostBack method on page and nothing works because of this.
How can i define in my page that i do not want to add any _doPostBack method by any controls because i have already defined it manually?
Here is my HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Store Management</title>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.min-1.10.1.js" type="text/javascript"></script>
<link href="/assets/styles/StorePortal/style-22012013.css" rel="stylesheet"
type="text/css" />
<link href="/assets/styles/StorePortal/jquery-ui.css" rel="stylesheet"
type="text/css" />
<link href="../App_Themes/AbleCommerce/ComponentArt.css" rel="stylesheet"
type="text/css" />
<link href="../App_Themes/AbleCommerce/print.css" rel="stylesheet" type=
"text/css" />
<link href="../App_Themes/AbleCommerce/style.css" rel="stylesheet" type=
"text/css" />
<link href="../App_Themes/AbleCommerce/webparts.css" rel="stylesheet" type=
"text/css" />
</head>
<body>
<form action=
"portal.aspx?q=bbaae796d951c95311f5ec3e599784079c6093ee&q1=COV" id=
"form1" method="post" name="form1">
<div>
<input id="__EVENTTARGET" name="__EVENTTARGET" type="hidden" value=
"" /> <input id="__EVENTARGUMENT" name="__EVENTARGUMENT" type=
"hidden" value="" />
</div><script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input id="__VIEWSTATEENCRYPTED" name="__VIEWSTATEENCRYPTED" type=
"hidden" value="" />
</div>
<script type="text/javascript"> --> this one is added by me manually
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input id="__EVENTTARGET" name="__EVENTTARGET" type="hidden" value=
"" /> <input id="__EVENTARGUMENT" name="__EVENTARGUMENT" type=
"hidden" value="" /> /// sOME CODE HERE
</div>
--> this one is added by me manually
</form>
</body>
</html>
Now, if i remove the _doPostBack added by me, gridview paging works. BUT when i have only 1 page in gridview, my event in jquery dialog does not work because it cant find _doPostBack.
ANSWER:
I have removed the _doPostBack() added by me and instead added this on my Page_Load() which adds a _doPostBack() even if there are no asp.net controls which requires this method.
ClientScript.GetPostBackEventReference(this, string.Empty);
BIG THANKS TO #Tim Schmelter for pointing to that LINK
I've had a similar problem, when trying to popup a dialog confirming a record deletion. This is the code I've used (jQuery UI dialog) and it works perfectly.
Don't add a new doPostBack. Instead, try to follow this idea. You can adapt it to fit your requirements:
// When the user tries to delete a record, show a confirmation.
$(".confirmationButton").click(function(e) {
// Stop the PostBack
e.preventDefault();
$(".confirmationDialog").dialog("open");
});
$(".confirmationDialog").dialog({
buttons: {
"No": function() {
$(this).dialog("close");
},
"Yes": function() {
$(this).dialog("close");
// User confirmed deletion, so carry on with the PostBack.
eval($("#ctl00_MainContentPlaceHolder_hdnBtnPostBack").val());
}
}
});
Somewhere on your code (when checking the page source), you'll find something like this:
<input id="ctl00_MainContentPlaceHolder_hdnBtnPostBack" type="hidden" value="__doPostBack('ctl00$MainContentPlaceHolder$btnDelete','')" name="ctl00$MainContentPlaceHolder$hdnBtnPostBack">
That's the object you will be using with eval().
I'm just learning javascript and php. I created a contact form and I'd like the submit button to accomplish two things when I press it:
submit the data to me (this part is working)
read my onclick function (this part is not working)
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">
<?php
if ($_POST['submit']) {
////?????
}
?>
I'm sending the data to my email, and so I get that. But the onclick function doesn't seem to work. I tried reviewing add onclick function for submit button but it didn't help.
I need to see your submit button html tag for better help. I am not familiar with php and how it handles the postback, but I guess depending on what you want to do, you have three options:
Getting the handling onclick button on the client-side: In this case you only need to call a javascript function.
function foo() {
alert("Submit button clicked!");
return true;
}
<input type="submit" value="submit" onclick="return foo();" />
If you want to handle the click on the server-side, you should first make sure that the form tag method attribute is set to post:
<form method="post">
You can use onsubmit event from form itself to bind your function to it.
<form name="frm1" method="post" onsubmit="return greeting()">
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
html:
<form method="post" name="form1" id="form1">
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>
Javascript:
to submit the form using javascript
function eatFood() {
document.getElementById('form1').submit();
}
to show onclick message
function eatFood() {
alert('Form has been submitted');
}
if you need to do something before submitting data, you could use form's onsubmit.
<form method=post onsubmit="return doSomething()">
<input type=text name=text1>
<input type=submit>
</form>
I have this code:
<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {
document.getElementById("boton").style.display = 'none';
document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";
return true;
}
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio" /></td>
</tr>
</table>
<div id="boton">
<input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>
Create a hidden button with id="hiddenBtn" and type="submit" that do the submit
Change current button to type="button"
set onclick of the current button call a function look like below:
function foo() {
// do something before submit
...
// trigger click event of the hidden button
$('#hinddenBtn').trigger("click");
}
<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>
if you want to open a page on the click of a button in HTML without any scripting language then you can use above code.
In my form, if I click the submit button it should submit. Even if I am in the text field and press the enter key the form should submit. Can anyone tell me why this is happening?
<html>
< body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" /><br />
Last name: <input type="text" name="LastName" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
This is normal behaviour. Browsers let forms be submitted by users pressing enter in a text field; it makes many forms more convenient.
this is the default behavior of submit button. submit task fire when you press the enter key.
if you do not want that you can prevent that. use below code in the relevant tag for that.
event.preventDefault()
ex:-
onkeydown='if ((event.keyCode == 13 && document.getElementById("field_0").value!="") && event.which == 13){
document.getElementById("field_1").focus();
event.preventDefault();
}'
As Quentin said that's normal behavior .But if you want to prevent submission after enter key press , you can do it like :
<SCRIPT LANGUAGE="javascript">
function testForEnter()
{
if (event.keyCode == 13)
{
event.cancelBubble = true;
event.returnValue = false;
}
}
</SCRIPT>
See this post for more detail.
I have defined an IFrame in HTML.
From JavaScript I am trying to change the URL(src attribute) of the IFrame. It's working fine with most of the URLs. But when I try to set an eBay item URL more than once it opens in entire window.
Here is my code:
<html>
<head>
<script type="text/javascript">
function seturl(){
var txt=document.getElementsByName("txt");
document.getElementById('testframe').src = txt[0].value;
}
</script>
</head>
<body>
<iframe id="testframe" width= "700" height="500" >
</iframe>
<input type="text" name="txt" width="700"/>
<input type="button" value="Click me!" onclick="seturl()" />
</body>
</html>
Is there any solution to avoid opening in entire page for this eBay items URL?
http://cgi.ebay.com/Apple-iPad-Wi-Fi-32GB-BRAND-NEW-NO-RESERVE_W0QQitemZ220725228457QQcategoryZ171485QQcmdZViewItem
You are not allowed to do so.
It would seem that what you want to do is a violation of the UA.
http://pages.ebay.com/help/policies/user-agreement.html