I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.
Related
I´m trying to get typed text on ckeditor (textarea), but I have some trouble:
Here is my code:
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editor').ckeditor();
var editor = $('#editor').ckeditorGet();
var data = $('#editor').val();
window.alert(data);
window.alert(CKEDITOR.instances['editor'].getData());
});
</script>
<body>
<form method="post">
<textarea name="editor" id="editor"></textarea>
<input type="submit" value="Submit">
</form>
The results on two alerts are empty. What i´m doing wrong?
That's because you are calling the alerts when the page loads. At that time, there is nothing yet on the textarea.
Bind the event to something that will happen after the textbox has something to show, for example, when you click the submit button:
$(document).ready(function(){
$('#editor').ckeditor();
$('input[type=submit]').on('click', function() {
window.alert($('#editor').val());
});
});
Also, you may want to bind the click event to the document instead, so it will happen even if you add new submits programatically. For that to happen, bind the event like this:
$(document).on('click', 'input[type=submit]', function() {
window.alert($('#editor').val());
});
I working on a page with some JQuery and Kendo UI. This is my first JQuery project and I getting things along. However, my page refreshes for some reason. This is what I am trying to do: I have a text field where I can enter a search term and when I press a button, the query is sent to a php file and some json info will pop up. So far, I can get it to return something, but the page refreshs and all the data is gone.
code:
*<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<div id="example">
<form id="search">
<label for="search">Search For:</label>
<input type="text" id="txtSearch" name="q">
<button type="submit" id="submit">Find</button>
</form>
<div id="grid">
</div>
</div>
<script>
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "include/showsearch.php"
},
schema: {
data: "data"
}
},
columns: [{field: "id"},{field: "name"},{field: "season"}]
});
$("#submit").click(function(){
var textVal = $("#txtSearch").val();
var dynamicURL = "include/showsearch.php?show_name=" + textVal;
var grid = $("#grid").data("kendoGrid");
alert("sdf123");
grid.dataSource.transport.options.read.url = dynamicURL;
grid.dataSource.read();
alert("sdf");
});
});
</script>
</body>
</html>*
NOTE:
I used the alert functions to stop and see how the page reacts. How do I get the page from refreshing?
The reason this is happening is that the default action for your submit button is still occurring; submitting the form.
It's probably best to catch the form submission event rather than the button click as hitting Enter in a text field may also submit the form.
You will also need to prevent the default event action.
Change this
$("#submit").click(function(){
to this
$('#search').on('submit', function(e) {
e.preventDefault();
// and the rest of your code here
Simply the question is that, how to off all events with one call, for example if I have another events like 'mouseleave, mouseenter, keyup, keydown ...'.
What I'm doing here is that each time the dialog is showed I turn off (off) the events, this 'off' works well with click, but I want a code to turn off all events with one call, I tryed: $('.dialog').off('**'); but it doesn't works. If I don't use off I get multiple calls to click (multiple hello worlds).
I have a code like this:
myform.php
<script type="text/javascript">
$(document).ready( function () {
$('.dialog').off('click');
$('.dialog').on('click', '.mybutton', function() {
alert('hello world');
});
});
</script>
<input type="button" class="mybutton" value="click me!"/>
html:
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
function openDialog()
{
$.post( '/myform.php', null, function (data) {
$('.dialog').html( data );
$('.dialog').show();
});
}
function closeDialog()
{
$('.dialog').hide();
$('.dialog').html('');
}
});
</script>
</head>
<body>
<div class="dialog" style="display:none">
</div>
<input type="button" onclick="openDialog();" value="show dialog!" />
<input type="button" onclick="closeDialog();" value="close dialog!" />
</body>
</html>
You can pass no arguments and it unbinds all of them.
$("element").off();
jsFiddle.
I think that the unbind() method would work here.
http://api.jquery.com/unbind/
"removes all previously attached event handlers
<link rel="stylesheet" href="{$base_url}resources/themes/{$set_theme}/css/jquery-ui.css" />
<script type="text/javascript" src="{$base_url}resources/javascript/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="{$base_url}resources/javascript/jquery/jquery-ui.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<form action="{$base_url}{$fil_index_register}" id="register" method="post" autocomplete="off">
date of brith:<input type="text" maxlength="50" name="cal" value="" class="" id="ds" >
<input type="button" name="button" onclick="javascript:$('register').submit();" value="ACCOUNT_040" class="button" />
</form>
<script type="text/javascript">
{literal}
$(function(){
$( "#ds" ).datepicker({ dateFormat: "dd-mm-yy" });
});
{/literal}
</script>
problem:-when i include js script script submit button is not working but js of calender is working and when remove js script submit button starts works.please help me.i am implementing this on pixaria software
"$" create the problem so i avoid "$" i used
onclick="javascript:document.forms['register'].submit();
You need to call:
$('#register').submit();
You have forgot about # (select for element's ID)
so, you mean that the submit button is not working??
well, here's the solution:
change the:
$('register')
to:
$('#register')
'#' symbol is identifier for id
'.' symbol is for class
and no symbol is for HTML tags
Hope this works
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>