i've been trying to get a confirm box to work, i am using php and jquery to make a confirm box appear when clicking on a delete link, actual code :
$(document).ready(function(){
if (jQuery("a.delete-link").length > 0) {
$("a.delete-link").bind("click", function(){
return confirm("Sunteti sigur ca doriti sa stergeti?");
});
}
});
and the link is called :
sterge
the link is used to submit a form when clicked, the code for that is :
$(document).ready(function(){
if ($(".formSubmit").length > 0) {
if ($(".formSubmit").parents("form").find("input:submit").length == 0) {
$(".formSubmit").parents("form").append('<div style="width:1px;height:1px;overflow:hidden;"><input style="width:0;height:0;overflow:hidden;" type="submit" /></div>');
}
$(".formSubmit").click(function(){
$(this).parents("form").trigger("submit");
return false;
});
}
});
i do get the confirm dialog, but any option i chose, the form submits and the delete action is called.. any idea what i'm doing wrong ?
Bind the confirmation to the onSubmit of the form. You'll save a lot of hassle that way and you will get a confirmation no matter how the form was submited.
$( document ).ready ( function () {
$( 'selector for your form' ).submit ( function () {
return confirm ( 'Are you sure ...?' );
} );
} );
You have two click events bound to the anchor tag. The first event shows the confirm and the second submits the form.
Trigger the form submission only if the user confirmed:
$(document).ready(function(){
if ($(".formSubmit").length > 0) {
if ($(".formSubmit").parents("form").find("input:submit").length == 0) {
$(".formSubmit").parents("form").append('<div style="width:1px;height:1px;overflow:hidden;"><input style="width:0;height:0;overflow:hidden;" type="submit" /></div>');
}
$(".formSubmit").click(function(){
if ($(this).hasClass('delete-link') && confirm("Sunteti sigur ca doriti sa stergeti?"))
{
$(this).parents("form").trigger("submit");
}
return false;
});
}
});
Can you use this:
<a href="#" onclick"return javascript:void(0);" ... />
Related
I want to post something after writing it into a textarea without clicking any button but on clicking outside the textarea..How can I achieve that?? My code...
<form action="javascript:parseResponse();" id="responseForm">
<textarea align="center" name="post" id="post">Write something</textarea>
<input type="button" id="submit" value="submit" />
</form>
AJAX:
$('#responseForm').submit(function({$('#submit',this).attr('disabled','disabled');});
function parseResponse(){
var post_status = $("#post");
var url = "post_send.php";
if(post_status.val() != ''){
$.post(url, { post: post_status.val()}, function(data){
$(function(){
$.ajax({
type: "POST",
url: "home_load.php",
data: "getNews=true",
success:function(r)
{
$(".container").html(r)
},
})
})
document.getElementById('post').value = "";
});
}
}
I want to remove the button...and when an user clicks outside the textarea it will automatically submit the information...The whole body outside the textarea will act as the submit button...when user writes any info on the textarea...How can I achieve that??
Try the following:
$(document).on("click", function(e) {
var $target = $("#YOUR_ELEMENT");
if ($target.has(e.target).length === 0) {
your_submit_function();
}
});
You could also attach your submit function to the blur event for improved functionality:
$(document).on("click", function(e) {
var $target = $("#YOUR_ELEMENT");
if ($target.has(e.target).length === 0) {
your_submit_function();
});
$("#YOUR_ELEMENT").on("blur", function() {
your_submit_function();
});
You can attach a click handler to the entire document, and then cancel the event if the user clicked inside the text area. Something like this might do the trick:
$( document ).on( "click", function( ev ) {
if( $( ev.target ).index( $( "#post" )) == -1 ) {
// User clicked outside the text area.
}
} );
I use code similar to this to accomplish essentially the same thing (check when a user clicked outside of something). This is a copy and paste (slight alterations) of that code, and I haven't tested for your purposes. Essentially, it adds a handler to the entire document for the click event, then only executes the code if the element clicked on was not your textarea.
I have my website in which I have email pdf functionality
Procedure is :
when user enters email and then he has to click on submit button
after clicking submit button , form will not submit and form will hide and
there is another hidden div contains thank you message which appears with Ok button.
When User Click on OK button then form will submit.
But Now the Problem is :
When User enter email and if he press ENTER accidentally then form gets submitted without showing thank you message.
I want to Disable ENTER when user Press Enter key.
Check which key was pressed ant if was the enter key return false. Using jQuery this is easy.
var field = $('.classname');
field.keydown(function(e){
if(e.which==13){
return false;
}
});
you can try this to disable the submit on keypress
$(function() {
$("form").on("keypress", function(e) {
if (e.keyCode == 13) return false;
});
});
Use this code, will surely work for you:
var class = $('.classname');
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
class.onkeypress = stopRKey;
Use a regular html button instead of a submit button. In the onclick event of the button write some Javascript to show/hide the DIV. The button on the Thank You DIV make that a submit button.
Place this in the script:
<script language="JavaScript">
function TriggeredKey(e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
if (window.event.keyCode == 13 ) return false;
}
</script>
I'm on my first CI project and I'm trying to do basically an AJAX "edit in place".
I have a user profile page with a number of fields. Basically the user is looking at his own data, and I would like to give him the option to edit his info on a field by field basis. I have about 20 fields like so..
<div id="desc_short">
<div class="old_info"><p><?php echo $the_user->desc_short; ?></p></div>
<div class="edit_buttons">
<button type="button" class="btn_edit">Edit Field</button>
<button type="button" class="btn_submit">Submit Change</button>
<button type="button" class="btn_cancel">Cancel</button>
</div>
The submit and cancel buttons start off with display:none. A click on the 'edit' button appends a form to the div with some hidden field info and "shows it in" along with 'submit' and 'cancel' buttons. SO now the user has a text field under the original info, and two new buttons.
$('.btn_edit').on('click', function(){
var this_field_id = $(this).parent().parent().attr('id');
var form_HTML = "<form action='edit_profile' method='post'><input type='text' class='new_info' name='new_info'/><input type='hidden' class='edit_field' name='edit_field' value='"+this_field_id+"'/></form>";
$("#"+this_field_id).append(form_HTML).hide().show(500);
$(this).siblings().fadeIn(1000);
});
So I am dynamically adding the form to the appropriate div, and giving it a hidden field with the name of the datafield that is being edited. I'm also showing the "submit" and "cancel" buttons (although notice that the submit button is not in the form element).
I'll leave out the "cancel button" function, but here is the submit button jquery. As you can see I am trying to submit the form by "remote control", triggering a submit event on the form long distance from the submit button. And then on the submit event, I preventDefault and then try to $.post the info to an AJAX controller..
$('.btn_submit').on('click', function(){
var this_field_id = $(this).parent().parent().attr('id');
var new_info = $("#"+this_field_id+" .new_info").val();
alert(this_button);
$("#"+this_field_id+" form").trigger('submit');
$("#"+this_field_id+" form").submit(function(e){
e.preventDefault();
alert(this_field_id); // alerting correctly
$.post('../ajax/profileEdit', { edit_field: this_field_id , new_info: new_info },
function(data){
if(data = 'true')
{
alert(data); // <<<< alerts "true"
}
else
{
alert("bad");
}
}
);
});
});
Here is the ajax controller
public function profileEdit()
{
$ID = $this->the_user->ID;
$field = $this->input->post('edit_field');
$new_info = $this->input->post('new_info');
$this->load->model('Member_model');
$result = $this->Member_model->edit_profile( $ID, $field, $new_info );
echo $result;
}
And the model..
public function edit_profile($ID, $field, $new_info)
{
$statement = "UPDATE users SET $field=$new_info WHERE UID=$ID"
$query = $this->db->query($statement);
return $query;
}
I am actually getting back "TRUE" back to Jquery to alert out .. but nothing is being edited. No change to the information. Frankly, I am surprised I'm even getting 'true' back (the whole remote submit thing .. I thought "no way this works").. but that makes it tough to see what is going wrong.
Ideas?
Apart from the if(data = 'true) error, i don't see where the other error could be.
When you alert data, what does it show you?
Try this in the model;
public function edit_profile($ID, $field, $new_info)
{
$data = array('field_table' => $field, 'new_info_table' => $new_info);
return ($this->db->where('UID',$ID)->update('tabel_name',$data)) ? TRUE : FALSE;
}
AND in
public function profileEdit()
{
$ID = $this->the_user->ID;
$field = $this->input->post('edit_field');
$new_info = $this->input->post('new_info');
$this->load->model('Member_model');
if($this->Member_model->edit_profile( $ID, $field, $new_info )){
echo 'success';
}else{
echo 'error';
}
}
Then
$('.btn_submit').on('click', function(){
var this_field_id = $(this).parent().parent().attr('id');
var new_info = $("#"+this_field_id+" .new_info").val();
alert(this_button);
$("#"+this_field_id+" form").trigger('submit');
$("#"+this_field_id+" form").submit(function(e){
e.preventDefault();
alert(this_field_id); // alerting correctly
$.post('../ajax/profileEdit', { edit_field: this_field_id , new_info: new_info },
function(data){
if(data == 'success')
{
alert(data); // <<<< alerts "true"
}
else if(data == 'error')
{
alert('Database error');
}
else{
alert('');
}
}
);
});
});
Just wrote it on here, so i haven't tested it. But give it a try, at least you might be able to know where the error is coming from. If you still get the same error, try alert data before the if(data == 'sucess'), to see what the profile edit func is returning.
I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.
My form is:
<form action='log.php' id='logForm' method='post' >
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
<?
}
?>
</form>
Jquery:
$("#logForm").submit(function(e)
{
$(".advt_image").click(function(event) {
var href=event.target.title;
});
var Form = { };
Form['inputFree'] = $("#inputFree").val();
// if($("#freeTOS").is(":checked"))
Form['freeTOS'] = '1';
$(".active").hide().removeClass('active');
$("#paneLoading").show().addClass('active');
var url="http://"+href;
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
setTimeout( function() { location=url }, 2500 );
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
How can I get the title value of clicked image inside this $("#logForm").submit(function())?
How can I use the id of clicked image for that?
You can use event.target property
$("#logForm").submit(function(e)
alert($(e.target).attr('title'));
});
http://api.jquery.com/event.target/
[UPDATE]
I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.
jQuery submit, how can I know what submit button was pressed?
$(document).ready(function() {
var target = null;
$('#form :input[type="image"]').click(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert($(target).attr('title'));
});
});
[Update 2] - .focus is not working, but .click is working
http://jsfiddle.net/gjSJh/1/
The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:
$('input.images').click(function(e) {
e.preventDefault(); //stop the default submit from occuring
alert($(this).attr('title');
//do your other functions here.
});
// Runtime click event for all elements
$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
var control = e.target;
alert(e.currentTarget[0].id);
});
if you are not getting proper message in alert, just debug using Firebug.
Check following code you can get the title of clicked image.
Single click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").click(function(event) {
alert(event.target.title);
});
return false;
});
});
Double click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").dblclick(function(event) {
alert(event.target.title);
});
return false;
});
});
add following ondomready in your rendering page
$(document).ready(function(){
$("form input[type=image]").click(function() {
$("input[type=image]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....
$("#logForm").submit(function(e)
{
var title = $("input[type=image][clicked=true]",e.target).attr("title");
.....
.....
});
I have a ajax method of calling data from php file, i learned it from one of a blog, now it works file for submit button click function, but when i press enter the variables get shown in address bar and ajax process is not executed, Can any one please help me doing it on a press enter method....
This is my code:-
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("input[name='search_user_submit']").click(function() {
var cv = $('#newInput').val();
var cvtwo = $('input[name="search_option"]:checked').val();
var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
$("#SearchResult").html('<img src="../../involve/images/elements/loading.gif"/>').show();
var url = "../elements/search-user.php";
$.post(url, data, function(data) {
$("#SearchResult").html(data).show();
});
});
});
});//]]>
</script>
I have tried it by taking an if condition along with keypress event still its not working:-
if (e.keyCode == 13) { // Do stuff }
else { // My above code }
//In this also it seems that i am doing something wrong.
Can anybody please enlighten me oh how to do it.
My input field is:-
<input type="text" name="searchuser_text" id="newInput" maxlength="255" class="inputbox MarginTop10">
My submit button is:-
<input class="Button" name="search_user_submit" type="button" value="Search">
You can try with event.preventDefault(); for enter keypress.
Thanks.
When you type enter there is executed default onSubmit handler for a form. You can use submit jquery function to handle both enter and click on submit button.
$("form").submit(function() {
var cv = $('#newInput').val();
var cvtwo = $('input[name="search_option"]:checked').val();
var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
$("#SearchResult").html('<img src="../../involve/images/elements/loading.gif"/>').show();
var url = "../elements/search-user.php";
$.post(url, data, function(data) {
$("#SearchResult").html(data).show();
});
return false;
});
return false in this function will prevent submit of the form.