i want to be able to hide the submit button of WordPress comment form and let users submit their comment by pressing enter and gain new line by pressing Shift+Enter.
i've tried this line of codes at the end of comments.php file in wp theme root file.
<script>
$(function() {
$(".PostCommentFormCon textarea").keypress(function (e) {
if(e.which == 13 && !e.shiftKey) {
$(this).closest("form#commentform").submit();
e.preventDefault();
return false;
}
});}
</script>
but no chance.
does any one know how to fix this code ?
If you are set on using a "submit button" You will need to give your submit button an ID:
<button style="display:none" id="submitbutton" type="submit" value="Submit">Submit</button>
And display the button when the user finishes filling out the text area
<script>
$(function() {
$(".PostCommentFormCon textarea").blur(function (e) {
if(JQuery.trim(this.val) != ''){
$("#submitbutton").show();
}
});
}
</script>
Related
I am trying to get a popup submit button working but I haven't quite found the solution I'm looking for.
I am using the jquery modal plugin to show the client the content of their changes before they submit them. However, when I try submitting, nothing happens. The submit button exists on the pop up, whereas the .modify button is the button that opens it. I am having no issues with the pop up itself.
My console test is printing so I know there's nothing wrong with my event listener. Maybe it has something to do with event.preventDefault()?
Thanks in advance.
Here is my code
Back end
jQuery(".modify").click(function() {
event.preventDefault();
var submit = confirm('Are you sure?');
<?php
$post_ids = array();
while($author_entry_posts->have_posts()) : $author_entry_posts->the_post();
array_push($post_ids, get_the_ID());
endwhile;
?>
if (submit == true) {
var data = {
'action': 'modalcall',
'postid': <?php echo json_encode($post_ids)?>,
'userid': <?php echo get_current_user_id() ?>
};
jQuery.post(ajaxurl, data, function(response) {
jQuery(response).appendTo('body').modal();
//Script which handles the submit button on the modal pop-up
jQuery(".modal_submit").click(function() {
console.log("test");
jQuery().submit();
});
});
} else {
return false;
}
});
Front end
<input type="submit" name="submit" value="Submit" class="button modal_submit">
In your handler for click on modal submit you are not defining which form needs to be submitted.
jQuery(".modal_submit").click(function() {
console.log("test");
jQuery().submit(); // you are not defining which form to submit.
});
Instead the <input type="submit" name="submit" value="Submit" class="button modal_submit"> needs to be inside a form which needs to be submitted by calling jquery submit on it.
jQuery(".modal_submit").click(function() {
console.log("test");
$(this).closest('form').submit(); // asking to submit the form which contains this button
});
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 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/
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.