My current code will hide an example form and then will display data taken from other page via json into confirm div.
...other codes
},function(data){
if (data.response==1) {
$('#example').delay(500).fadeOut();
$('#confirm').show().html("<form>First name: <input type=\"text\" name=\"name\" value=\" "+ data.name +" \"><br>Email: <input type=\"text\" name=\"email\" value=\" "+ data.email +" \"></form>");
}
...other codes
<div id="confirm" style="background-color:#FF7800; padding-left:20px; color: white;"></div>
My question is it possible to show/trigger other form and display my data instead of displaying my data inside html() in #confirm id? I think I get the idea how to trigger a hidden form but how do I populated my data inside it?
Thanks in advance
Yes, wrap them in DIV's (or assign the form an ID):
HTML:
<div id="exampleForm">
<form> [.. do form here ..] </form>
</div>
<div id="realForm" style="display:none">
<form> [.. do form here ..] </form>
</div>
jQuery:
$(function() {
$("#exampleForm").fadeOut();
$("#realForm").fadeIn();
});
Related
I have some PHP code that generates out a bunch of store items from my database. Each item has a quantity text box and an add to cart submit button and a hidden value with the special ID.
Here is basically how my form is generated:
<form class='form-inline' id='addtocart_form' action='
additem.php?iid=$SaleItem_Id&u=".$_SESSION['id']." ' method='post' role='form'>
<div class='form-group'>
<div class='input-group'>
<input type='text' class='form-control' style= 'float: left; width:50%;' id='quantity'
name='quantity' value='0'></input>
<button type='submit' name='add_to_cart' id='add' class='btn btn-success'>Add to
Cart</button>
</div>
<input type='text' name='$SaleItem_Id' style='display: none;' id='$SaleItem_Id'
value='$SaleItem_Id'>
</form>
My cart works perfectly, except it refreshes and puts you back up to the top of the screen. So then I decided to implement jQuery. All of these generated forms have the same id: addtocart_form.
$(function() {
$("#addtocart_form").on('submit' , function(e) {
e.preventDefault();
var thisForm = $(this);
var quantity = $("#quantity").val();
var dataString = $("#addtocart_form").serialize();
$.ajax({
type: "POST",
url: thisForm.attr('action'),
data: dataString,
});
$("#quantity").val("0");
return false;
});
});
The first item that is displayed on the screen works perfectly. It adds the item to the cart without refreshing the screen.
All of the other forms on the page are being submitted without the jQuery. They add the item, but redirect to the URL of my action.
How can I fix this without rewriting my entire store? I assume it has something with which form is being told to submit.
The id attribute should be unique in same document so try to replace the id addtocart_form by class, and all the other id's by classes to avoid duplicated id.
HTML :
<form class='form-inline addtocart_form' action=...
JS :
$("body").on('submit', '.addtocart_form', function(e) {
e.preventDefault();
var quantity = $(this).find(".quantity").val();
var dataString = $(this).serialize();
var action = $(this).attr('action')
$.ajax({
type: "POST",
url: action,
data: dataString,
});
$(this).find(".quantity").val("0");
return false;
});
Hope this helps.
You should not have more than one element with the same id on a page. If all of your forms use the same id, that's a problem.
Since you are using JQuery with AJAX, there's really no need to use a form at all. Just use a regular button (type="button") and tie a click event to it. Find the parent div of the button and get the values of the inputs within that div.
If your markup looks like this:
<div class='form-group'>
<input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
<button type='button' class='btn btn-success add'>Add to Cart</button>
<input type='text' style='display: none;' class='saleItem_Id'>
</div>
<div class='form-group'>
<input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
<button type='button' class='btn btn-success add'>Add to Cart</button>
<input type='text' style='display: none;' class='saleItem_Id'>
</div>
You can iterate over the inputs within the div like so:
$(".add").on('click', function() {
var parentDiv = $(this).closest("div");
//in this example, you only have one element, but this is how you would iterate over multiple elements
parentDiv.children('input').each(function() {
console.log($(this).prop('class'));
console.log($(this).val());
});
//do your ajax stuff
});
JS Fiddle demo
I have a PHP form with different types of input fields (textbox, radio, checkbox,..) for which I used jQuery. It works fine for all input types except one of the question in my form for which the selected items(movies) by user are stored in an array. I think the image can explain better than me:
As can be seen in the image, selected movies by user are moved to the selected list(an array), while in jQuery validation, input names are "required" and therefore in this case only the value inserted in the textbox (in this case:"frozen") will be stored in database.
This is the code:
<form id="form2" action="page3.php" method="post">
<fieldset id = "q27"> <legend class="Q27"></legend>
<label class="question"> What are your favourite movies?<span>*</span></label>
<div class="fieldset content">
<p>
<div class="movienames">
<div class="field">
<Input type = 'radio' id="selectType" Name ='source' value= 'byTitle'>By title
<Input type = 'radio' id="selectType" Name ='source' value= 'byActor'>By actor
<Input type = 'radio' id="selectType" Name ='source' value= 'byDirector'>By director
</div>
<div id="m_scents" class="field">
<label style="margin-bottom:10px;" for="m_scnts"></label>
<p>
<input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie, actor or director name here" />
<input type="button" value="search" id="btnSearch" />
</p>
<div>
</div>
<div id="basket">
<div id="basket_left">
<h4>Selected Movies</h4>
<img id="basket_img" src="http://brettrutecky.com/wp-content/uploads/2014/08/11.png" />
</div>
<div id="basket_right">
<div id="basket_content">
<span style="font-style:italic">Your list is empty</span>
</div>
</div>
</div>
</p>
</div>
</fieldset>
<script type="text/javascript">
var master_basket = new Array();
selectedMovies = {};
var selected;
var selectedVal;
var selectedDir;
$(document).ready(function () {
$("input[id='selectType']").change(function(){
$("#q").val('');
if ($(this).val() == "byTitle") {
//SOME LINES OF CODE....
.....
} else
if ($(this).val() == "byActor"){
// SOME LINES OF CODE
} else
if ($(this).val() == "byDirector"){
//SOME LINES OF CODE
}
});
$('#btnSearch').on('click', function (e) {
window.textbox = $('#q').val();
window.searchType = $('input:radio[name=source]:checked').val();
popupCenter("movielist.php","_blank","400","400");
});
});
function addToBasket(item) {
master_basket.push(item);
showBasketObjects();
}
function showBasketObjects() {
$("#basket_content").empty();
$.each(master_basket, function(k,v) {
var name_and_year = v.movie_name;
$("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
});
}
</script>
// CODE RELATED TO OTHER QUESTIONS IN THE FORM....
//.........
<input class="mainForm" type="submit" name="continue" value="Save and Continue" />
</form>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$('#form2').validate({
rules: {
"q27[]": {
required: true,
},
//OTHER REQUIRED QUESTIONS....
},
errorPlacement: function(error, element) {
if (element.attr("type") == "radio" || element.attr("type") == "checkbox" || element.attr("name") == "q12[]") {
error.insertAfter($(element).parents('div').prev($('question')));
} else {
error.insertAfter(element);
}
}
});
});
</script>
QUESTION:
I have two problems with my code:
When I click on "Save and continue" button to submit this page of
the form, for the mentioned question (the one you could see in the
image), only the value inserted in the textbox will be stored in
database while I need all selected movies in the list will be stored
in separate rows in DB.
The textbox for this question is a hidden field that will be
appeared only if user select one of the radio button values. So, if
user just ignore this question and doesn't select one of radio
button values, then he can simply submit this page and continue
without any error message.
I would like to know if there is a way to customize jQuery validation so that I don't let users to submit this page until they didn't answer the mentioned question?? and then, how could I store the selected items by user in Database instead of textbox value?
All ideas would be highly appreciated,
To submit the basket movie items you can add a hidden input field. You would get something like this:
$("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
$("#basket_content").append("<div type='hidden' name='basket_movie[]' value='"+v.movie_name+"' />");
Using this, there will be an array like $_POST['basket_movie'] which contains the movie names of the movies in the basket.
If you want to prevent submitting, when the input box isn't filled you just add an action listener on form submit and count the item_list items. If it's 0 then don't submit. Add something like this to prevent form submitting when there are no items added to the basket:
$(document).on('submit', '#form2',function(e)
{
if($('.item_list').length == 0)
{
e.preventDefault();
}
});
i have a form with four elements. i need to open a jquery popup when click on image that i set as fourth element in my form. popup window contains another form and a submit button. herepopup not coming. what wil i do.
this is my form
echo "<div class=\"addform\">
<form method='GET' action=\"update_events.php\">\n";
echo " <input type=\"hidden\" name=\"column1\" value=\"".$row['event_id']."\"/>\n";
echo " <input type=\"text\" name=\"column2\" value=\"".$row['event_name']."\"/>\n";
echo " <input type=\"text\" name=\"column3\" value=\"".$row['description']."\"/>\n";
echo " <input type=\"image\" src=\"images/update.png\" id=\"update_event\" alt=\"Update Row\" class=\"topopup\" onClick=\"callPopup(".$row['event_id'].")\"; title=\"Update Row\">\n";
}
echo "</table></form><br />\n";
this is my jquery
<script type="text/javascript">
function callPopup(id) {
console.log(id);
var datastring = "&event_id="+id;
$.ajax({
url: 'event_edit_popup.php', //enter needed url here
data: datastring,
type: 'get', //here u can set type as get or post
success: function(data) {
$('.popupContent').html(data);
console.log(data);
$('.loader1').hide();
$("#popup_content").after(data);
// u can see returned data in console log.
// here, after ajax call,u can show popup.
}
});
};
</script>
and this is my popup div
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<p align="center">edit company</p>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
You just need to give the image an id.. say id="clickme"
and in the jquery script:-
$('document').ready(function(){
$('#clickme').click(function(){ $('#topopup').show(220);}); });
Again u can add in transitions in the css of the topopup to give it various effects.
Also to hide the pop up:-
$('document').ready(function(){
$('#backgroundPopup').click(function(){ $('#topopup,#backgroundPopup').hide(220);}); });
//This is assuming that you want the popup to be closed when u click on the background
First mistake in your form is not complete and second is there is no input type='image' if you want to display image than you use image tag.
Please follow the code I hope it will be helpful to you:
<div class='addform'>
<form method='GET' action='update_events.php'>
<input type='hidden' name='column1' value="123"/>
<input type='text' name='column2' value="456"/>
<input type='text' name='column3' value="789"/>
<img src='images/update.png' id='update_event' alt='Update Row' class='topopup' onClick='callPopup("1")' title='Update Row'/>
</form>
</div>
Now jQuery code:
$("#update_event").click(function() { alert('sdf'); });
Now instead of alert you can use your ajax call for pop up.
Because of my web style, i don't want to use input & textarea and get information by using $_POST[] and i need to get information that is in DIV element.
For example , I want to get information in this :
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
and :
$_POST[myname];
But i can't do it with $_POST , How can i do it ??
And if this method can't do this , do you know any other method to get information from DIV like this ?
you can call a onsubmit function and make a hidden field at the time of form submission like this
HTML
need to give a id to your form id="my_form"
<form action="submit.php" method="post" id="my_form">
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="submit" value="submit" name="submit" />
</form>
Jquery call on submit the form
$(document).ready(function(){
$("#my_form").on("submit", function () {
var hvalue = $('.mine').text();
$(this).append("<input type='hidden' name='myname' value=' " + hvalue + " '/>");
});
});
PHP : submit.php
echo $_POST['myname'];
You can use this method. First, with javascript get content of <div>
Code:
<script type="text/javascript">
var MyDiv1 = Document.getElementById('DIV1');
</script>
<body>
<div id="DIV1">
//Some content goes here.
</div>
</body>
And with ajax send this var to page with get or post method.
You would need some JavaScript to make that work, e.g. using jQuery:
$.post('http://example.org/script.php', {
myname: $('.mine').text()
});
It submits text found inside your <div> to a script of your choosing.
You can use following structure;
JS:
$(document).ready(function() {
$("#send").on("click", function() {
$.ajax({
url: "your_url",
method: "POST",
data: "myname=" + $(".mine").text(),
success: function(response) {
//handle response
}
})
})
})
HTML:
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="button" name="send" id="send" value="Send"/>
You can see a simulation here: http://jsfiddle.net/cubuzoa/2scaJ/
Do this in jquery
$('.mine').text();
and post data using ajax.
Put the content of DIV in a variable like below:
var x = document.getElementById('idname').innerHTML;
So what I'm attempting to do is this:
User clicks a radio html form button.
User clicks a submit button to confirm his choice.
SimpleModal pops up and displays the value of the button chosen.
User clicks 'Accept' in the SimpleModal and the parent page updates accordingly.
I'm not so worried about step 4, but I'm not sure how to transfer the post information into the SimpleModal.
For reference I'm using the SimpleModal Contact Form demo that Eric Martin has provided.
I'm new to Ajax as well as jQuery.
I saw this post: Passing a Value from PHP to the SimpleModal Contact Form
They had a similar problem, however they are not retrieving post information from their index page.
Is there a way to retrieve this post information and pass it to the contact.php that is called for the SimpleModal window?
Any help is greatly appreciated.
My index (where radio buttons are generated.):
<div id='contact-form'>
<form action="index.php" method="get">
<?
echo "<h3>Degrees (double click a degree to add a generator):</h3><br />";
for($deg = $_SESSION['degmin']; $deg <= $_SESSION['degmax']; $deg++)
{
?>
<table>
<tr>
<th>
<?
echo $deg;
for($gen = 0; $gen < $_SESSION['degree_gens'][$deg]; $gen++)
{
echo "<input type='radio' name='test' value='deg' />";
}
?>
</th>
</tr>
</table>
<?
echo "<br /><br />";
}
?>
<input type='submit' name='contact' value='Demo' class='contact demo'/>
</form>
</div>
My contact.js (this is called from index when user clicks "Demo):
$.get("data/contact.php", { r: $("input[name='test']:checked").val()}, function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
My contact.php (The modal displays this page, trying to output post info):
<h1 class='contact-title'>Edit Generator(" . $_POST['test'] . "):</h1>
-Chad
As I understand, you want to load modal from external php file, so you should pass the variable with GET or POST paramater, here is an example how you can do that,
cantact.js
$.get("data/contact.php", { test: $("input[name='test']:checked").val()}, function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
contact.php
<h1 class='contact-title'>Edit Generator(" . $_GET['test'] . "):</h1>
POST and GET are different types of HTTP request method.
In jQuery,
if you use $.get(), you can get parameters with $_GET in PHP.
if you use $.post(), you can get parameters with $_POST in
PHP.
$('form').submit(function(e){
e.preventDefault();
var ourVal = $('input:radio').val();
$.modal('<div id="ourModal"><div id="modalText"></div></div>');
$('#modalText').text(ourVal);
});