please help...
when i use the code below used in the form it does not open the form at all in the lightbox / fancybox. but when i remove it it works.
Code:
<script type="text/javascript">
Recaptcha.create("6Ld5necSAAAAAMNoodwSDBwEWAQi3Yd3VHHSsZnr",
"recaptcha",
{
theme: "red",
callback: Recaptcha.focus_response_field
}
);
</script>
Button is like this:
<li class="email gradient_button">Email to a Friend</li>
and the form is like this:
<form name="email_friend" method="post" class="ajax_form">
<table>
<tr><td>Name: </td> <td> <input type="text" name="name"></td></tr>
<tr><td>Email: </td> <td> <input type="text" name="email"></td></tr>
<tr><td>Friends Email: </td> <td> <input type="text" name="friends_email"></td></tr>
<tr><td colspan="2">Message:<br>
<textarea name="message" class="fancybox_textarea"></textarea></td></tr>
<tr><td colspan='2'><br><div id='recaptcha'></div></td></tr> <tr><td colspan="2"><input type="submit" value="Submit" class="pull-left"></td></tr>
</table>
</form>
The full file of form looks like this:
<h3>Email to a Friend</h3>
<form name="email_friend" method="post" class="ajax_form">
<table>
<tr><td>Name: </td> <td> <input type="text" name="name"></td></tr>
<tr><td>Email: </td> <td> <input type="text" name="email"></td></tr>
<tr><td>Friends Email: </td> <td> <input type="text" name="friends_email"></td></tr>
<tr><td colspan="2">Message:<br>
<textarea name="message" class="fancybox_textarea"></textarea></td></tr>
<tr><td colspan='2'><br><div id='recaptcha'></div></td></tr> <tr><td colspan="2"><input type="submit" value="Submit" class="pull-left"></td></tr>
</table>
</form>
<script type="text/javascript">
Recaptcha.create("6Ld5necSAAAAAMNoodwSDBwEWAQi3Yd3VHHSsZnr",
"recaptcha",
{
theme: "red",
callback: Recaptcha.focus_response_field
}
);
</script>
when i remove the javascript part it opens the form in lightbox / fancybox but with this code it does not open anything.
can you please tell me the issue???
Related
I'm trying a little page with a HTML form and inside it, jQuery adds file fields having the name appended with [] so the PHP target receives it as array of files. But the PHP isn't receiving the files.
A sample:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#deps").before("<tr id=\"dependency\"><td>Dependency:</td><td><input type=\"file\" name=\"deps[]\" /></td></tr>");
});
$("#rem").click(function() {
$("#dependency").remove();
});
});
</script>
<table>
<tr>
<td>
<button id="add">+ Dependency</button>
</td>
<td>
<button id="rem">- Dependency</button>
</td>
</tr>
<form method="POST" enctype="multipart/form-data" action="target.php">
<tr id="deps">
<td></td>
<td><input type="submit" name="submit" value="send" /></td>
</tr>
</form>
</table>
In target.php:
$deps = $_FILES['deps'];
But no files are sent. What should i do?
Wrapping the table in a form is part of the problem, however you have other issues that will come up. The below code solves those. A button's default state is submit, and you can't have multiple objects with the same id (hitting + dependency)
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#deps").before("<tr><td>Dependency:</td><td><input type='file' name='deps[]' /><button type='button' class='rem'>- Dependency</button></td></tr>");
});
$(document).on("click",".rem",function() {
$(this).parents("tr").remove();
});
});
</script>
<form method="POST" enctype="multipart/form-data" action="target.php">
<table>
<tr>
<td>
<button type="button" id="add">+ Dependency</button>
</td>
<td>
</td>
</tr>
<tr id="deps">
<td></td>
<td><input type="submit" name="submit" value="send" /></td>
</tr>
</table>
</form>
</body>
</html>
Thank you guys. Ditched all the table thing just in case and now it works.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="target.php">
<p>Course Name: <input type='text' name='courseName' /></p>
<p>Resource: <input type='file' name='file' /></p>
<p>Dependencies: <button type='button' id='add'>+</button></p>
<div id="deps">
<p><input type="submit" name="submit" value="send" /></p>
</div>
</form>
</body>
</html>
scrtipt.js is:
$(document).ready(function() {
$("#add").click(function() {
$("#deps").prepend("<p><input type='file' name='deps[]' /><button type='button' class='rem'>- </button></p>");
});
$(document).on("click",".rem",function() {
$(this).parents("p").remove();
});
});
Basicaly changed imvain2's code.
Junior Dev here. I'm trying to implement the following code in order to get all the info typed in the form and to receive an alert message ("everything is ok").
I know there is Jquery valid() function, but I have struggle with implementing it as well.So if it's possible when the textbox doesn't meet the requirements to post the error message(email needs "#", website needs "www.", name 6 letters, password="****".
Can anyone explain me with simple code how can I achieve this ?
<form id=registration_form action="" method="post">
<table>
<tr>
<td>Chose Username: </td>
<td>
<input type="text" class="form_text" id="form_username">
</td>
<td>
<span class="error_form" id="username_error_message"></span>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" class="form_text" id="form_password">
</td>
<td>
<span class="error_form" id="password_error_message"></span>
</td>
</tr>
<tr>
<td>Retype Password: </td>
<td>
<input type="password" class="form_text" id="form_retype_password">
</td>
<td>
<span class="error_form" id="retype_password_error_message"></span>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="text" class="form_text" id="form_email">
</td>
<td>
<span class="error_form" id="email_error_message"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="sbmt_btn" value="Create Account">
</td>
<td></td>
</tr>
</table>
</form>
Here is an example using the jQuery Validation Plugin. Its as simple as calling .validate(); on your form
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$("#commentForm").validate();
</script>
</head>
It covers email, required input validation and much more. Check out the docs here.
Also, using the submitHandler option for the plugin you can set a callback on submit if all fields are correctly validated. In the example below we use this to call alert() with the message 'Everythings Ok'.
Example
$(document).ready(function() {
$("#commentForm").validate({
//we can use the handler to check if form is correctly validated
submitHandler: function(form) {
alert('Everythings Ok');
}
});
});
input[class="error"], textarea[class="error"] {
border: 1px solid #f00 !important;
}
.error{
margin: 5px;
color: #f00 !important;
}
/* To cover your additional requirement mentioned in the comments */
body {
background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center;
}
/* For your additional requirement */
form {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
Doing this with jQuery would require a lot of different validation techniques most likely including other libraries like Regex. The plugin aggregates all of them into one plugin that can be reused across multiple pages.
i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit
My form open in a fancybox when i am submitting the form than data will not echo in controller,My script is not working on click event
-Here is my script code in which i use a ajax to send the post data
<script type="text/javascript">
var Q = jQuery.noConflict();
Q(document).ready(
function(){
Q("#button_submit").click(function() { //
alert('ok'); //alert is not working
var name = Q('#nam').val();
var description = Q('#description').val();
if (name != '' && description!='') {
jquery.post('transaction/add',
{'name' : name, 'description' : description },
function (respond) {
alert("ok");
}
);
}
});
});
</script>
-here is my HTML code which contain the form. This form open in a fancy box
<form method="post" id="add-form" name="add-form" class="add-form">
<div class="main_form">
<table id="option-table">
<tr>
<td><label class="lable1">Name:</label></td>
<td> <input type="text" name="nam" id="nam" />
</td>
</tr>
<tr>
<td><label class="lable1">Description:</label></td>
<td><textarea id="description" name="description" rows="8" cols="45"></textarea>
</td>
</tr>
<tr>
<td >
</td>
<td id="table_submit_td">
<input type="submit" id="button_submit_fancy" class="button" name="Submit" value="Submit" />
<input type="submit" id="button_reset" class="button" name="Reset" value="Reset" />
</td>
</tr>
</table>
</div>
</form>
In your HTML, the button ID is button_submit_fancy not button_submit. Change it in one of the code - JS or HTML.
below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.