JQuery use in a (PHP) form - php

I have been building a page where an administrator of the page can come look at some abstracts that have been submitted. I have used jquery to insert a modal-form where they can categorize the abstract to fit within one of five choices(four sessions, and one n/a). However, I am stuck on the function in the script.
What I want it to do is to go to the .php page where I'll have the appropriate code written to UPDATE the record in the database, then send the administrator back to the main page, to continue categorizing abstracts if they wish.
I have the form:
<div id="dialog-form" title="Categorize this abstract">
<p class="validateTips">Please select one session for this abstract.</p>
<form method="post" action="savecat.php">
<fieldset>
<label><input type="radio" name="abstractcategory" value="session1" />Session 1</label>
<label><input type="radio" name="abstractcategory" value="session2" />Session 2</label>
<label><input type="radio" name="abstractcategory" value="session3" />Session 3</label>
<label><input type="radio" name="abstractcategory" value="session4" />Session 4</label>
<label><input type="radio" name="abstractcategory" value="NULL" />Irrelevant</label>
</fieldset>
</form>
</div>
In the script I have the categorize button:
$( "#categorize" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
And this is where I'm not sure what to do, in the dialog-form function:
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Categorize this abstract": function() {
What should I put here? I don't know. I want it to re-direct(?) to the savecat.php that is the action of the form.
Then there's the rest, to cancel, close, etc.
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Can anyone point me in the right direction? I have a feeling it's a simple thing that I just am unaware of.

I guess you just want to submit the form?
$(this).find('form').submit();

Related

jQuery dialog will not post textarea value

I have followed a few other suggestions on this site but I cannot get the data from a textarea within a jQuery dialog element to post. The most relevant answer was provided in the ASP.NET button discussion here, I have added the suggestion to my code with no change in results.
Here is what I have:
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
dialogClass: "no-close",
buttons: {
"Done": function() {
$(this).dialog("close");
}
}
})
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
}).parent().appendTo("form1");
});
I have tried adding the ".appendTo()" syntax to both the .dialog and function with no change. Any help would be greatly appreciated.
Here is the html for reference as well
<div id="dialog" title="Enter Comments">
<textarea id="feedback" name="feedback" rows="5" autocomplete="off" value="<?php get_data("feedback"); ?>" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> ></textarea>
</div>
<input type="button" class="btn btn-primary btn-block" value="enter comments" id="opener" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> />
Thanks for all of the feedback! I have this figured out.
I ended up mirroring the data from the textarea to a text input within the form, I wrapped the input in a hidden div to keep it out of sight.
HTML
<div id="feedbackvalue">
<input type="text" name="sc_comment" id="sc_comment" value="<?php echo $sc_comment; ?>" />
</div>
CSS
#feedbackvalue {
display: none;
}

Send same inputs to different actions with one form

I have two input fields and I want to post the same data to two different php files, depending on whatever button is clicked.
In my case the data is going into foo.php only, but not into excel.php.
I want the data to go to excel.php, if second button is pressed.
JS:
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
HTML:
<form action="foo.php" method="post">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" /> <br>
<input type="submit" value="Viewchart">
</form>
<form action="excel.php" method="post">
<input type="submit" value="Download Excel file">
</form>
You can change the action attribute when the button is clicked as follow:
$(function() {
$( ".actionable" ).click( function() {
$('#myForm').attr('action', $(this).data("action"));
$('#myForm').submit();
});
});
And set the next data-* attributes to your buttons:
<form name="form" id="myForm" method="post">
<input type="submit" class="actionable" value="Viewchart" data-action="foo.php"/>
<input type="submit" class="actionable" value="Excel" data-action="excel.php"/>
</form>
You can see how it works here.
Related links:
You can read more about the data-* attributes here: http://www.w3schools.com/tags/att_global_data.asp
Clarification for OP:
The $( function() {} ); block —equivalent to $(document).ready( function() {} );— specify a function to execute when the DOM is fully loaded; you should put inside all your code which interact with the elements of the DOM.
It can be done in your way by next script and little change in second form declaration
for second form you should set id:
<form id="form2" action="excel.php" method="post">
And you should add the next script:
$("#form2").submit( function(eventObj){
$(this).append('<input type="hidden" name="from" value="'+$("#from").val()+'" /> ');
$(this).append('<input type="hidden" name="to" value="'+$("#to").val()+'" /> ');
return true;
});
That happens because you have one form with action="foo.php". It doesn't matter which button you click it will always send the data to the action of the form in this case "foo.php".
Solution:
Seperate the inputs into two forms and set the action of the second form to "excel.php". Then it should work. Hope it helped you.
Edit: Saw the second form in the last second. In this case you just have to take the input of "to" or "from" down to the second form.

Email custom data through JQuery / Ajax in Wordpress

I am trying to send some custom post data from a page that displays specific posts in a jquery pop-up email.
At the moment, I have a completed HTML form , and JQuery modal box setup.
Here is this js code for this:
jQuery(document).ready(function($){
var email = $( "#email" ),
message = $( "#message" ),
allFields = $( [] ).add( email ).add( message ),
tips = $( ".validateTips" );
$( ".email-course" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
$( "#dialog-form" ).dialog({
autoOpen: false,
modal: true,
width: 550,
height:260,
resizable: false,
show: 'fade',
title: 'Email course',
buttons: {
"Send": function() {
//Need help here
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
});
And the HTML form:
<div id="dialog-form" title="Email this course">
<form>
<fieldset>
<label for="email">To:</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">From:</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="message">Message (optional)</label>
<input type="text" name="message" id="message" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
and the button:
<div class="right"><button class="email-course">Email this course</button></div>
My question is how to read the data from the form and also I will have to pull some post data with ids from the page that loads them all and send it by Wordpress's wp_email I assume? I will have to merge the "message (optional)" with that specific post ID's data as well. Any other information I need please let me know. Thanks in advance.
Background:
jQuery has a .serialize() method that:
Encode a set of form elements as a string for submission.
With the use of this method you can serialize all the fields values without having to collect them individually.
For example, you can do:
$('form').serialize()
and you will get a string with all the collected form fields & values, then you can pass this string to the server in a data: {} object inside a $.ajax request.
.serialize() documentation at jqAPI
Filling the Send callback:
"Send": function() {
//Need help here
$.ajax({
data : $('#dialog-form form').serialize(),
error : function (jqXHR, textStatus:string, errorThrown:string) {
if (errorThrown) {
// Show message.
}
},
success : function (response_from_server:ResponseFromServer, statusText:string, xhr) {
// Do post-processing here.
},
type : 'POST',
url : ajaxurl
});
},
Here:
ajaxurl: A javascrip global variable set by WordPress to be used in AJAX queries pointing to '/wp-admin/admin-ajax.php'
$('#dialog-form form').serialize() : This method is the one that will serialize all the Successfull HTML controls present in the form and will append them as data in the AJAX query.
Here only is missing the nonce checking to validate the AJAX request, I didn't put it there to make the code simple.
Then on the WordPress PHP backend you have to capture that serialize that data in order to process it as you like.
Hope it helps.

Why is jquery dialog-message refreshing my page unwantedly (inside form)

i am trying to embed a simple jquery dialog-message into a form. The dialog should only show some additional information and not interact with the form in any way except beeing called via a button from inside the form.
My problem is the following: If the dialog is called from inside the form the whole page gets refreshed instantly, not showing the dialog at all and clearing all form fields. If the button is outside the form everything is working just fine.
The dialog content is being loaded via templates like this:
<script>
$(function() {
var dlg = $( "#dialog-message" ).dialog({
autoOpen: false,
width: '80%',
closeOnEscape: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
},
open: function() {
// Content laden...
$("#dialog-message").load('template.html', function() {}).dialog()
}
});
$( "#opener" ).click(function() {
$( "#dialog-message" ).dialog( "open" );
});
});
</script>
The form integration:
<form method="post" name="post" action="index.php?site=bewerbung">
<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="$border">
...
</tr>
<tr bgcolor="$bg1">
<td height="25"> </td>
<td><input class="input" type="checkbox" name="rules" id="rules" value="1" /><button id="opener">Regeln</button></td>
</tr>
</table>
</form>
Your button submits the form, so you need to prevent the default button action via JavaScript:
$("#opener").on('click', function(e) {
dlg.dialog("open");
e.preventDefault();
});
You don't mentioned what jQuery (UI) version you are using. My code above is for the newer versions.
Here's the demo.
Generally for Buttons and Submit-inputs: you can prevent the refreshing of the page, if you place "return false;" on the end of your function. In your case
$( "#opener" ).click(function() {
$( "#dialog-message" ).dialog( "open" );
return false;
});

Submit directly from a modal dialogue jquery

I have a modal dialogue with jquery which populate a div,I need instead of populate a div to submit directly ,How can I achieve that,
What I did: I have a button when I click it opens a modal dialogue,with this modal dialogue I add data and I save data in another div,below the code:
My part of code :
<script>
$(function() {
$( "#MyDialog2" ).dialog({
autoOpen: false,
height: 300,
width: 700,
modal: true,
buttons: {
"ADD": function() {
$('#keyword_new_name').val($('#keyword_new_nameadd').val());
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#keyword_new_nameadd').val("");
}
});
$( "#newKeyword" ).click(function() { $( "#MyDialog2" ).dialog( "open" ); });
});
</script>
HTML looks like that:
<div id='MyDialog2' >
<table cellpadding='11' >
<tr>
<td></td>
<td>Name:</td><td><input type='text' name ='keyword_new_nameadd' id='keyword_new_nameadd' size ='35' /></td>
</tr>
</table>
</div>
<form method="POST" action="">
<div>
<table cellpadding='11' >
<tr>
<td></td>
<td>Name:</td><td><input type='text' name ='keyword_new_name' id='keyword_new_name' size ='35' /></td>
</tr>
</table>
</div>
<input type='button' value='NewKeyword' id='newKeyword' />
<input type='submit' value='addKeyword' id='addKeyword' />
</form>
Thank you for your help!!!
If you mean that you want to directly submit your form, right after (or instead of... not sure which you need)
$('#keyword_new_name').val($('#keyword_new_nameadd').val());
add
$('form').submit();
Personally I would give the <form> and ID and use that instead
$('#myFormId').submit();
I got it I added
$( this ).dialog( "close" );
$("#add_keyword").click();
add_keyword is the ID of 1 of my submit buttons

Categories