<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>
the $.get("invite_friends_session.php") part does not work. But it works if i keep it outside the callback function.
But i need to call the invite_friends_session.php whenever there is a click on the #submit.
how to do that?
Since the submit button is inside a form, clicking the submit button bubbles up and submits the form. You need to add a return false to the end of the handler:
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
return false;
});
[Edit] You should prevent the default form submit action upon click.
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault(); //edit
$.get({ url: "invite_friends_session.php",
success: function() {
alert('success');
},
error: function() {
alert('error');
},
complete: function() {
alert('complete');
}
});
});
});
Remove the <form> tags around the submit button. Since you're using jQuery's .get method, you don't need that form tag (technically, it doesn't even need to be a submit input button). Right now, it's trying to post using the form instead of getting the page via jquery.
Example: http://jsfiddle.net/R3CWp/
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
alert("i got clicked");
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>
Related
I'm trying to use sth like onchange but with no results.
i've been searching for a while but i didn't find.
HTML
<input type="text" id="myInput" />
<div id="button"></div>
JS
<script>
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
//my code
});
</script>
I can't find a event where a JQ action is recognized like a changing in my input...
Thank you for your help!
Did you put these js code part into the $(document).ready(function(){
});
I think because these js is not loaded when the webpage is completed loaded.
$(document).ready(function(){
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
console.log('event detected');
});
});
<html>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="text" id="myInput" />
<div id="button"></div>
</body>
</html>
Please guys is there a way i can make a value of the submit button to be loaded automatically from another page using the jquery .load function:
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#submit').load('page.php')
}, 500);
});
<script>
Change it to a .get() and use the call back
$.get('page.php', function(data) { $('#submit').val(data); });
You can use normal ajax for this. .load() is supposed to load HTML content.
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$.ajax({
url : 'page.php',
success : function(data){
$('#submit').val($.trim(data));
}
});
}, 500);
});
<script>
I want to Open my php Submit page in a Modal dialog box. I know it can be accomplished with jquery but I am still learning jquery I will like to use the function myModalFunction() to open customp1.php after visitor clicked on submit button.
I need help to write the jquery that will do the think.
Thank you in advance.
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./action/scripts/global.js" type="text/javascript"></script>
<form action="../action/subs/customp1.php/" method="post" id="ccomputer" onsubmit="myModalFunction()" >
<form action="../action/subs/submit1.php/" method="post" id="ccomputer">
<div id="orderwrap">
<input id="article" name="article" type="text" />
<input id="quantity" name="quantity" type="text" />
</div>
<input id="submit" type="submit" value="Submit Order" name="submission"/>
</form>
You need to submit your form using ajax. Your code should be like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('form#ccomputer').submit(function (e) {
e.preventDefault(); // To prevent form submit
$(this).find('input:submit').attr('disabled', true); // To prevent re-submission
var formData = $(this).serializeArray(); // data
var action = $(this).attr('action'); // action
// using POST method to send data & get response
$.post(action, {data: formData}, function (response) {
// show dialog
$('<div></div>').html(response).dialog({
title: 'Dialog title',
modal: true,
close: function () {
$(this).dialog("destroy").remove();
}
});
});
$(this).find('input:submit').removeAttr('disabled'); // re-enabling submit button
});
});
I have this code .. I am not able to call the function on button click. Please help.
[ I don't wish to use onclick method in the input tag ]
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$("btn").on("click",function(){
console.log("Clicked_btn");
});
// Also tried :
$("btn").click(function(){
console.log("Clicked_btn");
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click to Submit" />
</body>
Both methods do not invoke the function.. where am I going wrong ?
Try to use the id selector properly and wrap the code inside of the document ready handler,
$(function(){
$("#btn").on("click",function(){
console.log("Clicked_btn");
});
});
Check that the document has loaded before running your javascript, otherwise jQuery won't be able to find the input element:
$(function(){
$("#btn").click(function(){
console.log("Clicked_btn");
});
});
You can also have
$(document).on('click','#btn',function(){
console.log("Clicked_btn");
});
Working Fiddle
Try below code, it should work:
$(document).on('click', '#btn', function(){
console.log("Clicked_btn");
});
You can do this to,this is more preferred.
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#btn").on("click",function(){
console.log("Clicked_btn");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click to Submit" />
</body>``
Sample code:
<html>
<head>
.....
</head>
<body>
<div id="content">
<form>
....
<input type="submit" onclick="loadAnotherPage()"/>
</form>
</div>
</body>
</html>
I want to load another page say edit_profile.php in the content div. How can it be achieved without refreshing the page?
I tried to use jQuery load() method. But looks like I missed something. Any help would be highly appreciated.
When you click submit button it's submit form and page refresh that's why its not working.
Instead of type submit set button and then set function onclick.
function loadAnotherPage(){
$("#content").load('edit_profile.php');
}
$(document).ready(
function() {
$('#load_file').click(
$.post('edit_profile.php',
{},
function(data){
$("#content").html(data);
},''
)
);
}
);
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="loadpage">load new page</button>
<script>
$(document).ready(function () {
$("#loadpage").click(function() {
$.get("edit_profile.php", function(response){
$("#content").html(response);
});
})
});
</script>
</body>
</html>