i want to use user input in jquery dialog input box to be used when jquery dialog ok button is pressed.
now the problem is the code after jquery dialog box also get executed withought waiting for jquery input field to be filled by user
<p id="text"> click me </p>
<div id="test" class="sandy" >
<input id="username" class="sandy1" />
</div>
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
$(this).dialog('close');
}}
});
var myvalue= $("#test").val();
alert(myvalue);
})
you can check the demo at this link : http://jsfiddle.net/zCFD5/86/
please suggest me some way out to hold on to jquery dialog till user presses ok button and then move on to code after it.
Try this JS:
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
if($('#username').val() == '') {
$('#username').focus();
} else {
var myvalue= $("#username").val();
$(this).dialog('close');
alert(myvalue);
}
}
}
});
});
EDIT: I also updated the code at JSFIDDLE and it works fine :-) http://jsfiddle.net/zCFD5/96/
Related
Is their any possible when on click the button it change to only text and not as a button.
Ex:
I have Invite button for all individual user. What I need is when on click the Invite button, button text need not to change instead button is change to text.
"Invite" button format is change to "pending request" text format along with "cancel" button when on click the button.
Hope it helps, this FIDDLE
if you want to learn more. read more about jquery.
html
<input id="invite" type="button" value="Invite" />
<span id="pending">Pending</span>
<input id="cancel" type="button" value="Cancel" />
script
$('#pending').hide();
$('#cancel').hide();
$('#invite').on('click', function () {
$(this).hide('fast');
$('#pending').show('fast');
$('#cancel').show('fast');
});
$('#cancel').on('click', function () {
$(this).hide('fast');
$('#pending').hide('fast');
$('#invite').show('fast');
});
Try this code :
$('button').click(function() {
$(this).replaceWith("pending request<button>cancel</button>")
})
$("#btnAddProfile").click(function(){
$("#btnAddProfile").attr('value', 'pending request...');
//add cancel button
});
If you have a button like this:
<button>Click me</button>
You can disable it on click with jQuery like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled', 'disabled');
});
});
See fiddle here:
http://jsfiddle.net/jpmFS/
Or replace it with only text like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).replaceWith('<p>'+$(this).text()+'</p>');
});
});
I have a multi-page form that was created for me. All of the pages on the form have submit button that saves the data to a database, a previous button that goes to the previous page and a next button. How do I display an image when the save button (id="save") is pressed? Right now the image pops up when either one of the buttons are pressed. I am a jQuery rookie so any help is greatly appreciated. Thanks!
The jQuery
<script>
jQuery(document).ready(function($) {
$('form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
$("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});
});
</script>
The PHP
<div id="target"></div>
<input type="submit" name="status" value="Prev" />
<input type="submit" name="status" id="save" value="Save" />
<input type="submit" name="status" value="Next" />
<?php
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Prev'){
//save data and redirect to previous page using header();
}
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Next'){
//save data and redirect to next page using header();
}
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Save'){
//save data and do whatever you want
}
?>
In your code all buttons have the type submit, hence it causes the form to submit irrespective of the button you click.
make type="submit" only to that button for which you want to submit the form and show the image.
Demo: http://jsfiddle.net/esMn2/1/
Here's a working demo of a quick mockup, not using jQuery, but to give you an idea of how it could be done.
prev = document.getElementById('prev');
save = document.getElementById('save');
next = document.getElementById('next');
form = document.getElementById('form');
prev.addEventListener('mousedown', function(e) {
e.preventDefault();
alert('Did nothing');
});
save.addEventListener('mousedown', function(e) {
e.preventDefault();
showLoading();
});
next.addEventListener('mousedown', function(e) {
e.preventDefault();
alert('Did Nothing');
});
function showLoading() {
var load = document.createElement('img');
load.src = "http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif";
document.getElementById('target').appendChild(load);
setTimeout(function() {
form.submit();
}, 5000);
}
Using jQuery though you will support IE<9, as they know to use attachEvent and not addEventListener
To get the image to only show up for the Save button, just bind the event to that button, not to the form's submit event.
jsFiddle
$('#save').click(function(e) {
e.preventDefault();
var form = $(this).closest('form');
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
$("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});
This way, there will be no delay on submitting the form for the prev and next buttons, and the image and delay will only show for the Save button.
I have a message box with a submit button, when I click the submit button the content in the box should be insert in the MYSQL database, but without going to another page. The message which i just entered in the message box should be displayed in the same page after the submission. What should I do?
Use something called AJAX..
suppose this is your code :
<form id="myform" action="something" <!--Add this part-->onsubmit='return sendData()'<!--End of added part-->>
Enter Message <textarea name="msg" id="msg"></textarea>
<input type="submit" value="submit" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function sendData(){
var msgVal = $("#msg").val();
$.ajax({
data:"msg="+escape(msg),
url: $("#myform").attr("action"),
type: $("#myform").attr("method"),
success:function(){
alert( $("#msg").val() );
}
});
return false;
}
</script>
<script type="text/javascript">
function postData() {
var order = 'name='+$('#textBoxId').val();
$.post("Another_PHP_Page_Path.php", order, function(response,status, xhr){
if (status == "success") {
alert(response);
$('#divId').text(response);
}
else if (status == "error") {
alert('Something went wrong, we are working to fix it');
}
});
}
</script>
Note: name will be posted to PHP Page and after insterting into Database you can echo anything on php page or echo name, and on response this will showing back at same page. Use postData() on button onclick and button type should be button not submit.
Purpose is to have a small icon on my admin page.
Clicking this icon will fire a modal window with an instance of ckeditor textarea.
The user edit the text, saves it and modal closes.
My problem is that if i click again on the icon, the new editor instance is empty.
Below you can see the relevant codes
HTML Part:
<a id="editShortText" title="Short Description" href="#saveShortTextFrm"><img src="clickme.gif">
<div style="display:none">
<form action="" method="post" id="saveShortTextFrm" name="saveShortTextFrm" class="frm">
<textarea class="jquery_texteditor" name="short_text_english" id="short_text_english" style="width:700px; height:400px;"><? echo $value_from_db;?></textarea>
<div align="center" style="margin:20px;"><input name="submit1" type="submit" value="Save" /></div>
</form>
</div>
JS Script:
$("#editShortText").fancybox({
'scrolling': 'no',
'titleShow': false,
'onStart': function() {
$('.jquery_texteditor').ckeditor(config);
},
'onComplete': function() {
$('.jquery_texteditor').ckeditor(config);
},
'onClosed': function() {
$('.jquery_texteditor').ckeditor(config);
}
});
$("#saveShortTextFrm").live("submit", function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "_save_text.php",
data : $(this).serializeArray(),
success: function(data) {
if (data!='')
{
$("#shortTtextImageHolder").html('<img src="images/button_accept.gif" border="0">');
if(CKEDITOR.instances["jquery_texteditor"])
{
delete CKEDITOR.instances["jquery_texteditor"];
$('.jquery_texteditor').ckeditor(config);
$("#short_text_english").val(data);
CKEDITOR.instances.short_text_english.setData(data);
}
}
else
{
$("#shortTtextImageHolder").html('<span class="error">S.O.S.</span>');
}
$.fancybox.close();
}
});
return false;
});
All work well for the first click - when I click my link/image for the first time.
If i click again (after saving modal data or just closing modal window), the new modal fires up but text area is empty of data.
Any ideas on how to fix this?
When you close the modal try to use
CKEDITOR.instances.short_text_english.destroy(true);
or
if (CKEDITOR.instances.short_text_english) {
CKEDITOR.instances.short_text_english.setData("");
CKEDITOR.instances.short_text_english.destroy(true);
}
i have this html and javascript program code for log in window. my html is:
<body>
<div >
<h1>Sign in to me</h1>
<form id="login" method="get" action='exercises/exercise6/DynamicMenu_createTab_json.html'>
<div>UserName<input type="text" id="username" value="admin"/></div>
<div>Password<input type="password" id="password"/></div>
<div><input type="button" id="btnLogin" value="Login"/></div>
</div>
</body>
my javascript is:
$(document).ready(function(){
$('#username').focus();
$('form#login :submit').addClass('inputSubmitBtn').click(function(){
if($('#username').val() != "jay" || $('#password').val() != "son"){
alert('username/password incorrect');
$("#username").focus();
return false;
};
});
});
there's no problem in this program. what i wanted to do is i want to log in using my username and password from a server. and if it is succesful, it will open my other exercise html on the same window. here's my current code:
$('form#login :submit').addClass('inputSubmitBtn').click(function(){
var params = {
"UserName":$("#username").val(),
"Password":$("#password").val()
};
$.getJSON(
'process.php', 'path=Login&json=' + JSON.stringify(params),
function(data) {
if ('error' in data)
{
alert('password and username incorrect');
return false;
}
else
{
$("#sessionID").html(data["result"]["SessionID"]);
}
});
});
this code doesn't function right. please, can someone help me on this...
EDIT: here's my php code:
<?php
echo(file_get_contents("http://localhost/" . $_GET["path"] . "?json=" . $_GET["json"]));
?>
First the :submit selector returns nothing, you don't have a submit button ("type=submit"), so the click listener will never be called. See :submit selector.
Second you don't stop the submit event of the form, so the "action" attribute is used and the form is submitted, canceling the click listener function. (url 'exercises/exercise6/DynamicMenu_createTab_json.html' will be loaded)
You need to stop the event, else the form "action" will fire when the form is submitted.
$('#login :submit').click(function(event){ event.preventDefault(); ... });
And last, a click event listener function on the submit button will not fire 100% of the time.
For exemple when user press "enter" key while in a field of the form, no click on the button and the form is submitted.
Bind a submit event listener on the form instead.
$('#login').submit(function(event){ ... });