i'm creating my own MVC Framework.
I have a basic form in my view
<form action="?" method="post" >
<input type="hidden" name="envoie" value="envoie" />
<?php dico('INSCRIPTION_NOM'); ?><input id="name" type="text" name="name" /><br />
<?php dico('INSCRIPTION_EMAIL'); ?><input id="email" type="text" name="email" /><br />
<?php dico('INSCRIPTION_PWD'); ?><input id="pwd" type="password" name="pwd" /><br />
<input type="button" value="<?php dico('INSCRIPTION_SINSCRIRE'); ?>" onclick="verifForm(document.getElementById('email').value);"/>
</form>
when I clock on the button they have a javascript function like that :
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
alert('resultat == '+data);
});
}
Inscription was my controllers and VerifForm an method of the controller. email was the value of a input.
The Php function was :
public function actionVerifForm() {
echo "OK";
}
When i click on the button i have all the code of the page on my alert but i only want the message "OK".
Thanks for helping me
what you are doing is AJAX, am i right? the data parameter IS your result. AJAX returns the echo-ed page as a string. if you mean to place it in the page, try jQuery .html() or .text() for a text only, escaped version.
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
$('#container-id-here').html(data); //html insert
$('#container-id-here').text(data); //text insert
});
}
and in your PHP, since you are doing AJAX, you should only echo what you need returned, and not the whole HTML mark-up (which means no <html><head>...</head></html>
Related
So I originally wanted to create a form that generated a lightbox ON successful submission of the form data saying thanks for submitting the form but I read that just taking the user to a thank you page was the safest and most assuring way for the user to be notified is with that classic method stated earlier. IF using the fancy box proves effective how exactly would I go about doing this? Where would the call for the javascript go? In the PHP or the HTML file the form is on? Since the page is mobile and tablet only and so simple I thought it would be a good idea to use the lightbox (I'm looking at adding fancybox) instead of making more pages.
I'm having trouble finding resources on the net as well, as I'm just getting lightbox forms and sending submission results back in the form of a lot box. I just want a simple Thank You or Error message honestly. That is if this is a good workable solution for a form at all.
Thanks in advance!
Here is a basic form for ref.
<form id="fusion_form" name="fusion_form" method="post" action="fusion_form.php" target="_blank">
<p><input name="first_name" type="text" id="first_name" style="width:140px" value="" placeholder="First Name" /></p>
<p><input name="last_name" type="text" id="last_name" style="width:140px" value="" placeholder="Last Name" /></p>
<p><input name="email" type="text" id="email" style="width:140px" value="" placeholder="Email Address" /></p>
<p><textarea name="comments" cols="20" rows="3" id="comments" class="FormText" style="width:200px; padding-left:2px" placeholder="Comments"></textarea></p>
<p><input type="image" src="images/submit-button.jpg" id="send_email" value="Submit Form" onclick="return verify_form();" /></p>
</form>
$('form').on('submit', function(e){
e.preventDefault(); // stop the form submission
var $d = $(this).serialize(); //serialize form to be submit to server
$.ajax({
url: $(this).prop('action'),
type: $(this).prop('method'),
data: {formData : $d},
success: function(data){
if(false != data){
//form submission did NOT return false
//build lightbox, extrapolate what is needed from `data` variable
}
}
});
});
php.
if(isset($_POST['formData'])):
$formData = $_POST['formData]';
//do whatever with the form
if(someCondition):
return '<h4> Thank you for submitting the form!</h4>';
else:
return false;
endif;
endif;
I have a form, that is this one
<form method="get" action="<?php bloginfo('url'); ?>">
<input name="date-beginning" type="text" class="datepicker" />
<input name="date-end" type="text" class="datepicker" />
<input name="s" type="text" />
<input type="submit" value="Ok" class="botao-pequeno botao-pequeno-input" />
</form>
Well, when the user sends all the fields, we get this response:
http://myblogurl.com/?s=example&date-beginning=05/05/05&date-end=07/07/07
If he doesn't fill, for example the date-beginning field we get http://myblogurl.com/?s=example&date-beginning=&date-end=07/07/07
What I want is that if he doesn't fill the field, for example date-beginning, the form still be sent, but variable don't to get sent, like this: http://myblogurl.com/?s=example&date-end=07/07/07
Is there a way to do it? How?
var form = document.forms[0];
form.addEventListener('submit', function(){
var a = document.getElementsByName('date-beginning')[0];
if(a.value === '')
a.disabled = true;
});
karaxuna's anwser works. I just adapted it to jQuery, if any one is interested, this is the code
$("#the-form").submit(function() {
if($('#the-field').val() === ''){
$('#the-field').attr('disabled',true);
}
if($('#the-other-field').val() === ''){
$('#the-other-field').attr('disabled',true);
}
});
I'd like to do a dynamic search function using jQuery and PHP.
I'm struggling passing the HTML form field to the JQUERY function (which would then get passed to the PHP file).
My major questions are:
1) How do I pass form "Input" field into Jquery function?
2) How do I get the PHP result in the form "Output" field?
I currently have... (simplified)
JQUERY:
$.get("SEARCH.php", {"_input" : $('input[name=input]').val()},
function(returned_data)
{
$("input[name=output]").val(returned_data);
}
SEARCH.php:
$input = 'Welcome ' . $_GET['_input'];
echo $input;
//should be "Welcome" plus whatever I type in to "input"
HTML FORM:
input: <input type="text" name="input" value="" />
output: <input type="text" name="output" id="output" />
Thank you!
jQuery
$.get("SEARCH.php", {"_input" : $('input[name=input]').val() },
function(returned_data) {
$("input[name=output]").val( returned_data );
}
HTML
input: <input type="text" name="input" value="" />
output: <input type="text" name="output" />
PHP Use echo instead of return since it looks that your code isn't in function:
$input = $_GET['_input'];
do some parsing of the input
echo $result;
jQuery
$.get("SEARCH.php", {"_input" : $('input[name=input]').val() },
function(returned_data) {
$('#output').val(returned_data);
});
PHP
$input = $_GET['_input'];
do some parsing of the input
echo $result; // not return
HTML
input: <input type="text" name="input" value="" />
output: <input type="text" name="result" id="output" value="" />
I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:
I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from.
I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?
The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?
The forms look like this:
<?php while($row= pg_fetch_row($groups)) { ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
<label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
<input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
<noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
<div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>
I would normally validate the form like this:
$(document).ready(function(){
$("#editgroup").validate({
rules: {edit: {required: true, maxlength: 30}},
messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
errorContainer: "p#error",
});
$("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
$("#submitlink").click(function() {
$("#editgroup").submit();
});
});
give the same class to all the form than try this,
<form id="1" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<form id="2" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<script type="text/javascript">
$(".common").submit(function(){
var form_id = $(this).attr('id');
var input_val = $(this).children('.common_input_class').val();
if (input_val == '')
{
alert("input field is required");
return false;
}
});
</script>
I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.
I'm submitting data from pagex.php to pagey.php via jQuery post.
pagex.php contains
$('#btn').click(function(e) {
e.preventDefault();
var x = 'variable1';
var y = 'variable2';
$.post("/pagey.php", { var1: x, var2: y}, function(data) {});
});
pagey.php contains
<form action=....>
<input type="text" name="x" value="<?php echo $_POST['var1'] ?>" />
<input type="text" name="y" value="<?php echo $_POST['var2'] ?>" />
<input id="submit" type="submit" value="submit" />
<script type="text/javascript">$('#submit').trigger('click')</script>
So basically when i post the values from pagex.php to pagey.php, i want to automatically submit the form on pagey.php . The jQuery line at the end of pagey.php will trigger an automatic click to the submit button. However jQuery is not triggering the submit click. it works if i access paygey.php directly (i tried it with pre defined variables) but not by doing $.post from pagex. I was assuming that by using $.post from pagex, pagey should automatically get the values and run the jQuery submit. What is the problem here.
JavaScript (which powers jQuery) is not run on the server, it's run from your users browser. So from my understanding, in order to run that little bit of script you will have to actually send your users to pagey.php
<input type="text" name="x" value="<?php echo $_POST[var1] ?>" />
<input type="text" name="y" value="<?php echo $_POST[var2] ?>" />
should be
<input type="text" name="x" value="<?php echo $_POST['var1'] ?>" />
<input type="text" name="y" value="<?php echo $_POST['var2'] ?>" />
You need to fix your array indices.
you should post directly to the action url on pagey... what is the value of pagey if its a simple form that auto posts.
simple answer is to do a form post on document.ready in pagey...
I think the bigger question is why are you posting data to pagey if you just re-post it to another page using your form action?
Try posting the data directly to the action page and let us know if that works.
I bet this will be useful to some of you. Regards.
<?php
echo
"<script type='text/javascript'>
$(document).ready(function() {
$('#submit').trigger('click');
});
</script>";
?>