I have thi HTML:
<form id="form1" name="form1" method="post" action="">
<input name="PtName" type="text" id="PtName" />
<input name="Button" type="button" id="button" onclick="search_p()" value="Check" />
</form>
serach_p() is function:
<script type="text/javascript">
function search_p(){
$.ajax({
url: 'srchpt.php',
type: 'POST',
data: { PtName: $('#PtName').val()},
success: function(data){
$(".myresult").html(data);
}
})
}
</script>
I want when I press enter key in PtName text do same search_p() function
How can I do that?
Specify an onsubmit on your form:
<form ... onsubmit="search_p(); return false">
and change the type of your button to submit:
<input name="Button" type="submit" id="button" value="Check" />
you can do this by using following jquery function:
$("#PtName").keyup(function (e) {
if (e.keyCode == 13) {
// call function
}
});
Javascript :
In javascript put the following function
function enterPressed(event) {
var key;
if (window.event) {
key = window.event.keyCode; //IE
} else {
key = event.which; //firefox
}
if (key == 13) {
yourFunction();
// do whatever you want after enter pressed event. I have called a javascript function
}
}
HTML :
<input type="text" onkeypress="javascript:enterPressed(event)">
For required textfield put onkeypress event
Call your function on submit event of your form:-
<html>
<head>
<script type="text/javascript">
function search_p(){
$.ajax({
url: 'srchpt.php',
type: 'POST',
data: { PtName: $('#PtName').val()},
success: function(data){
$(".myresult").html(data);
}
})
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="search_p()" >
<input name="PtName" type="text" id="PtName" />
<input name="Button" type="button" id="button" onclick="search_p()" value="Check" />
</form>
</body>
</html>
I wanted a textarea that would break-line on shift+enter, and on Enter would submit:
This seems to answer my query
Related
I need to reload a table or div inside a model popup continuously, i failed with my code can you help me....
i tried with ajax ..code is below but its is not updating chats (i am doing a chat task)
**My Ajax code to check new message is or not**
function check_msg()
{
$.ajax({
type: "POST",
url: "<?php echo site_url('member/check_message')?>/",
datatype: "JSON",
success: function(data) {
data = JSON.parse(data);
if(data.MsgStatus == "1")
{
$('#newchat').ajax.reload();
} });}
**HTML**
<div class="modal-body form">
<form action="#" id="chatform" class="form-horizontal">
<input type="hidden" value="" name="UserId"/>
<div class="form-body">
<div class="container" id="container">
<table id="newchat">
<div class="Scroll" id="Scroll">
<div id="messagesout"></div>
</div> </table> </div</div>
function reload_table()
{
table.ajax.reload();
}
Use this code in your ajax and call it
I'm following a tutorial and when I click the submit button nothing happens. I added an alert to see if the function runs. It runs the alert.
[code]
<!-- THE HTML PAGE AND JAVASCRIPT -->
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
// added by me to test
alert("Hello");
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<h2>Ajax Post to PHP and Get Return Data</h2>
Your First Name: <input id="first_name" name="first_name" type="text" />
<br /><br />
Your Last Name: <input id="last_name" name="last_name" type="text" />
<br /><br />
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
<br /><br />
<div id="status"></div>
</body>
</html>
[php]
<?php
echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file';
?>
What am I doing wrong here?
It doesn't give any errors at all. Please help me.
http://jsfiddle.net/HjhV4/
try this
html
<h2>Ajax Post to PHP and Get Return Data</h2>
<form id="form">
Your First Name: <input id="first_name" name="first_name" type="text" />
<br /><br />
Your Last Name: <input id="last_name" name="last_name" type="text" />
<br /><br />
<input name="myBtn" type="submit" value="Submit Data">
<br /><br />
</form>
<div class="status"></div>
javascript
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#form") .submit(function(){
var first_name = $("#first_name") .val();
var last_name = $("#last_name") .val();
var s = {
"first_name":first_name,
"last_name":last_name
}
$.ajax({
url:'action.php',
type:'post',
data:s,
beforeSend: function (){
$(".status") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success:function(data){
$(".status").html(data);
}
});
});
})
</script>
Can anyone tell me why this is not working or give me another way into doing what I want.
I have a form on a page when click submit I want it to process into add.php and for it to open up in a DIV called right.
Form page
<script>
$("#Submit").click(function() {
var url = "add.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
</script>
</head>
<body>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name = "email"><br>
Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload">
</form>
</body>
Now if I add action to form to direct it to add.php all works fine so other script is ok yet when i do it this way,nothing happens it does not load add.php into the 'right' div like I want it to.
Anyone got any suggestions?
Your $("#Submit") selector does not match anything (the submit button has no id and is defined after that bind attempt), so the function is not bound to any event, thus never executed.
Instead the form acts the way it should: upon submit it posts its content to the url specified in the 'action' attribute. This is what happens, that div is never touched.
you have to go back to understand how jquery selectors work. How to bind a function to an event.
Is this your exact code? There are a few issues:
$("#Submit").click should be wrapped in a document ready
handler so it doesnt run before the page has actually loaded.
There is no button that matches #Submit
There is no div that matches #right
Try
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "add.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
</head>
<body>
<div id="right">
</div>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name = "email"><br>
Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload" id="Submit">
</form>
you have to create on div in body tag which id will be right and
<input id="submit" type="submit" name="upload" >
add new div in body tag like this
<div id="right"></div>
Basically i have a value from a database ($learner->idnumber)
I then have a form which posts using submithandler to process.php (this edits database)
Now this is the bit im stuck on, im trying to get the php db value $learner->idnumber to update without page refresh once the form has been processed.
I have found:
$("#pinnumber").load("profile.php #pinnumber");
but im not quite sure on how to implement this.
This is my code:
<a id="pinlink">edit</a>
<div id="results"><div>
<div id="pinnumber">
'.$learner->idnumber.'
<div>
<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST">
<input type="text" name="idnumber" id="idnumber" size="20" value=""/>
<input type="submit" name="submit" value="Update">
</form>
<div>
$(document).ready(function(){
$("#pinlink").click(function () {
$("#pincontent").show();
});
$("#myform").validate({
debug: false,
rules: {
idnumber: "required",
},
messages: {
idnumber: "Please enter your PIN",
},
submitHandler: function(form) {
$("#pincontent").hide();
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Any help would be greatly appreciated.
I included:
print "".$_POST['idnumber']."";
in process.php before the save to db code.
this then printed into:
<div id="results"><div>
when form was submitted.
I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX.
This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion.
I've followed the validation plug-in's documentation when constructing my code:
JS:
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var validator = $("#form_notify").validate({
messages: {
email: {
required: 'Please insert your email address. Without your email address we will not be able to contact you!',
email:'Please enter a <b>valid</b> email address. Without a valid email address we will not be able to contact you!'
}
},
errorLabelContainer: "#error",
success: "valid",
submitHandler: function(form) {$(form).ajaxSubmit();}
});
$('#email').blur(function() {
if (validator.numberOfInvalids() > 0) {
$("#label").addClass("label_error");
return false;
}
else {$("#label").removeClass("label_error");}
});
$('#form_notify').submit(function() {
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
});
</script>
Form HTML:
<form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get">
<fieldset>
<div class="input">
<label id="label" for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/>
<div class="clearfix"></div>
</div>
<input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm">
<input type="hidden" name="followup" value="19">
<input type="submit" name="submit" id="submit-button" value="Notify Me">
<div id="error"></div>
</fieldset>
</form>
I can't understand what is causing IE to act differently, any assistance would be greatly appreciated.
I can provide more information if needed.
Thanks in advance!
Try the following:
$('#form_notify').submit(function(e) {
e.preventDefault();
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});