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
});
Related
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>
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 form
<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform">
......
<input type="submit" value="Add Purchase" />
</form></div>
After user submits the form..he is first made to confirm the enteries:
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
where the confirm div is:
<div id='confirmdiv'>
data to be confirmed....
<input type="button" value="Confirm" id = "confirmform"/>
<input type="button" value="Cancel" id = "cancelform"/>
</div>
I am trying to submit the form once user clicks on confirm button
$('#confirmform').click(function(){
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
But the form is not submitting...anyone knows what am i doing wrong here??
its because when you call the $('#purchaseform').submit(); it will again read your first statement which is
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
try using a hidden input to indicate if the datas are confirmed or not. In your form put a hidden textfield
<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform">
<input type="submit" value="Add Purchase" />
<input type="hidden" name="isconfirm" id="isconfirm" value="0" />
</form></div>
then in your other statement put a condition before you call return false and the other functions
$('#purchaseform').submit(function(){
var confirm = $("#isconfirm").val();
if(confirm == 0) {
$('#formdiv').hide();
$('#confirmdiv').show();
return false; }
});
then change this as well
$('#confirmform').click(function(){
$("#isconfirm").val(1); //change the value to 1
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
It's pretty logical that it's not submitting. After all, whenever it tries to submit, it will instead go to your submit event handler, which always returns false. You have to make sure that if the submit comes from your script instead of from the button in the form, it does submit. One way to do that is like this:
var confirmed = false;
$('#purchaseform').submit(function(){
if (!confirmed)
{
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
}
else
{
confirmed = false;
return true;
}
});
$('#confirmform').click(function(){
confirmed = true;
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
This can easily be edited to suit your needs. Another way to do this would be to instead bind the original event to the submit button instead of the actual submit event, but if you do that, you might get into trouble later on if you have a text field in the form and the user presses enter while it's selected. This would then directly submit without confirmation, whereas in the above solution it will neatly ask for a confirmation.
you want to have a confirm dialog, first i think that is better to use the jquery ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation
Here is the code to use :
1- add "display:none" to your confirm dialog
<div id='confirmdiv' style="display:none">
data to be confirmed....
</div>
delete confirm event
$('#confirmform').click ....
2- init your dialog
$( "#confirmdiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$('#purchaseform').submit();
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
3- Test your code
4- thats all folks
You are overriding what happens when the form gets submitted in
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
Instead, how about you use
$('#purchaseform').find(":submit").click(function(e){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
}
Or, of course, you can set an ID on the submit button and use that.
That's because your $('#confirmform').submit() function invoke the 1st submit function again.
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){ ... });
I have 2 buttons in HTML form. And both of them should submit the form. I would need to capture which button has been clicked so i can use it to perform different actions based on which button was clicked.
I am able to submit the form with both the buttons but how would i capture which button was clicked in the php file .
<INPUT type="button" name="submit" class="button" class="element_2" value="firstbutton">
<INPUT type="button" name="submit1" class="button" class="element_2" value="second button.. ">
i am using post method in Jquery to submit the form. How can i check which HTML button was clicked in server side php script
You could use a hidden element here, something like this:
<input type="hidden" id="submittedBy" name="submittedBy">
Your current .submit() handler using .serialize() and $.post() should work, just update the hidden field when clicking either button, for example:
$("form :submit").click(function() {
$("#submittedBy").val(this.name);
});
Then in PHP just check that $_POST["submittedBy"] == "submit" or "submit1" to see which caused it.
The alternative is to have the click handler POST and add in the value between .serializeArray() and when $.param() is called, like this:
$("form :submit").click(function() {
var data = $(this.form).serializeArray();
data.push({ name: 'submittedBy', value: this.name });
$.post("myPage.php", data, function(result) {
//do something
});
return false; //prevent normal form submission, even with the .submit() handler
});
Just do this,
HTML
<button type="submit" name="action[update]" value="1">Update</button>
<button type="submit" name="action[delete]" value="1">Delete</button>
PHP
$action = isset($_POST['action']['update']) ? 'update' : 'delete';
You CAN'T depend on JavaScript to tell you wich button was clicked, if user has JavaScript disabled, your form is broken.
You could try using the isset function
if(isset($_POST['submit'])){
echo "first button was clicked";
}
Or to detect the second one was clicked:
if(isset($_POST['submit1'])){
echo "second button.. was clicked";
}
I would capture all the events on the page using:
$(document).click(function (obj) {
if ('equipmentSetup' === obj.target.id) {
$('#form').submit();
}
....
Then add an if statement looking for the "id" of the button you want. Don't use the name or id "submit". I forgot why but I remember it caused problem for me.
You could try changing the buttons to type="button" and give them ids. With that, you can use the jquery line (not able to check my syntax below, but think i've got it right)
$('form button').click(function(){
if($(this).attr('id') = "button1"){ ...button 1 clicked}
..process form here..
});
would that do it?