I need to display Multiple combo boxes using AJAX...In my form displays only one combo box and it below combo box in text "add more courses".If i click "add more courses" then i need to open another combo box and like more combo box..Please any one Help me immediately
You can try something like this with jQuery to add a new Field.
<script type="text/javascript">
$(document).ready(function() {
$("#addCourse").click(function() {
var html = '<p><input type="text" name="course[]" value="" /></p>';
$("#courses").append(html);
});
});
</script>
<div id="courses">
<p>
<input type="text" name="course[]" value="" />
</p>
</div>
<a href="#" id="addCourse" onClick="javascript:addMore();">
add more courses
</a>
Related
What I am trying to achieve:
My form consists of four fields of #item, #unit, #price, and #total.
A user can input multiple lines of #item and #unit. For this, if the user clicks on "Add new line', there will appear a new line to receive user input for item and unit (quantity). If the user clicks on "-" on an already existing line, the line will be removed.
Which item is selected is identified on real-time using javascript change().
The price of the selected item is dynamically retrieved using ajax and the price data is appended into the #price element and #total element is also filled up by calculating #unit x #price.
To achieve this, here's what I did.
First, my HTML form as below.
<form id="form">
<input type="submit" name="create" value="Create" />
<!-- dynamically add more lines -->
<div class="form-group table-row hide" id="template">
<!-- remove button-->
<div class="table-cell" style="width: 45px;">
<a class="btn btn-default removeButton">
<span class="glyphicon glyphicon-minus">
</span>
</a>
</div>
<!-- user input: item -->
<div class="table-cell">
<select id="item" class="form-control">
<option value=""></option>
<option value="item-1">Item 1</option>
<option value="item-2">Item 2</option>
<option value="item-3">Item 3</option>
</select>
</div>
<!-- user input: quantity -->
<div class="table-cell">
<input id="unit" min="1" step="1" value="1" type="number" class="form-control" />
</div>
<!-- price is dynamically filled up using ajax -->
<div class="table-cell">
<input id="price" type="text" class="form-control" />
</div>
<!-- total is dynamically calculated -->
<div class="table-cell">
<input id="total" type="text" class="form-control" />
</div>
</div>
<button type="button" class="btn btn-default addButton">Add new line</button>
</form>
And javascript code to implement dynamic add/remove of input forms.
<script>
jQuery(document).ready(function($) {
var idx = new Number( 0 );
$('#form')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#template'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
// assign name attributes with proper array name and index
$clone.find('#item').attr('name', 'lines[' + idx + '][item]').attr('required', 'required').val('');
$clone.find('#unit').attr('name', 'lines[' + idx + '][unit]').attr('required', 'required').val('');
$clone.find('#price').attr('name', 'lines[' + idx + '][price]').attr('required', 'required').val('');
$clone.find('#total').attr('name', 'lines[' + idx + '][total]').val('');
idx = idx + 1;
})
// Remove button click handler
.on('click', '.removeButton', function() {
if (confirm("<?php _e( 'Are you sure you wish to remove this line? This cannot be undone.', 'doumi' ); ?>")) {
var $row = $(this).parents('.form-group');
// Remove element containing the option
$row.remove();
idx = idx - 1;
}
});
});
</script>
Lastly, jQuery to call ajax.
<script>
/* Get Item Price */
jQuery('#item').change(function(){
var $item_id=$('#item').val();
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
// call ajax
jQuery("#price").empty();
jQuery.ajax({
url: ajaxurl,
/* ******************************************************************** */
/* ajax_get_item_price is a function that returns the price of the item */
/* ******************************************************************** */
data:' action=ajax_get_item_price&item_id='+$item_id,
type:'GET',
success:function(results) {
jQuery("#price").append(results);
}
});
});
</script>
I have no problem dynamically adding and removing lines for the input form.
The problem is that form elements in each line is given a name as an array like below;
<select id="item" name="lines[0][item]"></select>
<input id="unit" name="lines[0][unit]" />
<input id="price" name="lines[0][price]" />
<input id="total" name="lines[0][total]" />
<select id="item" name="lines[1][item]"></select>
<input id="unit" name="lines[1][unit]" />
<input id="price" name="lines[1][price]" />
<input id="total" name="lines[1][total]" />
<select id="item" name="lines[2][item]"></select>
<input id="unit" name="lines[2][unit]" />
<input id="price" name="lines[2][price]" />
<input id="total" name="lines[2][total]" />
...
...
...
<select id="item" name="lines[n][item]"></select>
<input id="unit" name="lines[n][unit]" />
<input id="price" name="lines[n][price]" />
<input id="total" name="lines[n][total]" />
I guess that since there are multiple #items with varying names, jQuery does not know which #item it needs to pay attention to. However, I have no idea, either, as to how to properly call ajax with the concerned #item.
Any advice is highly appreciated.
Ok, as I said, ids should be unique for a page, so for similar items you should use classes:
....
<select class="item" name="lines[2][item]"></select>
<input class="unit" name="lines[2][unit]" />
<input class="price" name="lines[2][price]" />
<input class="total" name="lines[2][total]" />
....
So, for change event use something like
jQuery('.item').change(function(){
// to narrow the items, use this
var this$ = $( this );
// this$ contain exactly one item, which is currently changing
// do stuff
});
No quite get what exactly wrong is happening, but I think you have too many items with price is and thus issuing prblems.
So this line does next: gets all #price elements and appends results to each of them.
success:function(results) {
jQuery("#price").append(results);
}
You should clarify which #price item you exactly need.
First, as I already mentioned - use classes for multiple similar fields jQuery(".price")
Second, add some clarification what field exactly should be updated.
There can be many ways, I show two
One way, use next function.
success:function(results) {
this$.next('.price').eq(0).append(results);
// here we refer to this$ - we try to find all `.price` element
// which come after our `select`
// as there can be a lot of them we take only the first one
}
Another way, Use kind of context, ie some div, in bounds of which your elements are grouped.
I suggest changing your html like this
<div class="item-wrapper">
<select class="item" name="lines[2][item]"></select>
<input class="unit" name="lines[2][unit]" />
<input class="price" name="lines[2][price]" />
<input class="total" name="lines[2][total]" />
</div>
So, every block of your fields will be wrapped in a div.
After that we can tell jQUery to find .price element only in a div in which changed select is located
success:function(results) {
var parent$ = this$.parent();
// again we refer to this$ getting its parent which is div
parent$.find('.price').append(results);
// here we try to find `.price` element located in a parent$ div.
// As it is definitely only one, we don't need to use any other code.
}
So, this is all that I can say)
I have used jQuery validation. And using twitter bootstrap 2.3.2. Error message will display when I click the submit button. If I click the error message means the text box get focussed. How can I lost the focus ?
<input type="file" name="type1" id="type1">
<label for="type1">This field is required</label>
You could try the following:
$(function(){
$('input').blur();
});
Use this:
<input type="file" name="type1" id="type1">
<label for="type1" onmousedown="return false;" onclick="return false;">This field is required</label>
The onlcick and onmousedown "return false;" will disable the default browser behavior.
I'm trying to learn jQuery and have a question which may be pretty simple to someone familiar with it already.
Application:
Using PHP with jQuery and Bootstrap Toggle Buttons (http://www.larentis.eu/bootstrap_toggle_buttons/) to create a dynamic link address depending on which toggle buttons the user has turned "on".
Right now i'm using form to POST the toggle button states which once the page reloads it then pulls those POST variables and attaches them to the link.
What I would like to do is to have jQuery automatically change the link on the page when the user toggles the button instead of having to use form post.
What I would like to be able to do is in layman's terms explanation each time the toggle button is toggled:
$link = "http://www.mydomain.com/students.php?view="
if jQuery toggle-button-1 = on then add "name"
if jQuery toggle-button-2 = on then add "id"
if jQuery toggle-button-3 = on then add "address"
// If toggle-button-1 and toggle-button-2 were on and toggle-button-3 was off
// then $views would equal
$views = "name,id"
// On the webpage it would then display
http://www.mydomain.com/students.php?view=name,id
// If the person toggled toggle-button-1 to off, the link would display:
http://www.mydomain.com/students.php?view=id
I hope i've explained this so you can understand it...it's really simple what i'm trying to do and I know how to do this in PHP but i feel like i've been searching around online for something that should be simple and I just can't seem to wrap my head around it.
If anybody could please help me out or point me in the right direction I would greatly appreciate it!
Thanks!!
Here is my example on jsFiddle
HMTL
<input type="checkbox" name="name" value="name" id="name" /> name<br />
<input type="checkbox" name="id" value="id" id="id" /> id<br />
<input type="checkbox" name="address" value="address" id="address" /> address<br />
Link: <input type="text" name="url" value="" id="url" />
JavaScript
$(function() {
var link = "http://jsfiddle.net/mouse0270/chnyy/"
$('input[type=checkbox]').change(function () {
var viewItems = "";
$('input[type=checkbox]:checked').each(function () {
viewItems += ','+$(this).val();
});
$('#url').val(link+'?view='+viewItems.substring(1));
});
});
http://jsfiddle.net/CvsbD/
HTML
<input type="checkbox" class="items" id="one" data-view="name" />
<input type="checkbox" class="items" id="two" data-view="id" />
<input type="checkbox" class="items" id="three" data-view="address" />
<input type="text" id="output" />
JS
$("body").on('change', '.items', function(){
// filter down to items that are checked
var items = $('.items').filter(function(){
return this.checked;
});
// map data values to an array
items = items.map(function (){
return $(this).data('view');
}).get();
// join the array with a comma separator
$("#output").val(items.join(','));
});
Do note that binding a delegate to the document body is not generally the best way to go. You'll want to use a more direct ancestor of your checkboxes, or you can bind the change event to the checkboxes themselves.
This can be further simplified (forgot about :checked) like so:
$("body").on('change', '.items', function(){
// filter down to items that are checked, and get their data-view value.
var items = $('.items:checked').map(function(){
return $(this).data('view');
}).get();
// join the array with a comma separator
$("#output").val(items.join(','));
});
I got a newletter php form, so what I need is to hide the html input after the user click the submiting button, my code looks like this:
<form id="addressForm" action="index.php" method="get">
<p id="foarm">
<input type="text" name="address" id="address" placeholder="mail#example.com"/><br />
<input type="submit" value="Notificame" id="gogo" />
</p>
<p id="response"><?php echo(storeAddress()); ?></p>
</form>
Any ideas?
Thanks.
Use jquery to hide the form when the submit button is pressed. Something like
$("form#addressForm").submit(function()
{
$("form#addressForm").hide();
return true;
}
Should do it. You could do it without jquery, just using javascript - basically add an onclick event to change the css of the form to display:none when you click submit. Id probably suggest placing it in a div section for ease.
Is it possible to call a php function when an html radio button is selected?
I'm working on building a donate page for a small non-profit school that will have three options: Donate, Pay Tuition, or Make a Monthly Donation.
I would like for the choice of the radio button to load the rest of the webpage based on their selection. If possible, I'd like to do this without using javascript (if user disabled) or iframes.
Currently, if I'm using javascript, it works with this code:
<html>
<head>
<script type="text/javascript">
function go (url) {
parent.frame_name.location = url;
}
</script>
</head>
<body>
I would like to:
<br />
<input type="radio" name="type" value="donate" onclick="go ('makedonate.php')">Make a Donation
<input type="radio" name="type" value="tuition" onclick="go ('paytuition.php')">Pay My Child's Tuition
<input type="radio" name="type" value="monthly" onclick="go ('makemonthly.php')">Become a Monthly Sponsor
<iframe name="frame_name" frameborder="0" width="600" height="300"></iframe>
</body>
</html>
Is it possible? Any thoughts?
Put it in a HTML <form> element and add a <input type="submit"> button. Let the form's action point to a single PHP page. In the PHP function behind the PHP page, determine the radio button pressed based on the parameter name and/or value and finally display the rest of page conditionally based on the selected radio button using if-else or switch statement.
Hope this help
Just change the stuff in caps
<?php
if(isset($_POST['donation']))
{
echo "ENTER THE CODE TO BE DISPLAYED IF THEY CLICK DONATION";
}
elseif(isset($_POST['pay']))
{
echo "ENTER THE CODE TO BE DISPLAYED IF THEY CLICK PAY";
}
elseif(isset($_POST['sponsor']))
{
echo "ENTER THE CODE TO BE DISPLAYED IF THEY CLICK SPONSOR";
}
else
{
?>
I would like to:
<br />
<form method="POST" action="ENTER PAGE NAME">
<input type="radio" name="donation" value="donate" >Make a Donation
<input type="radio" name="pay" value="tuition" >Pay My Child's Tuition
<input type="radio" name="sponsor" value="monthly">Become a Monthly Sponsor
<input type="submit" value="Get Info"/>
</form>
<?php
}
?>
In short, No.
You can't assign an action to a radio button change event without JavaScript.
If you add a "Change Type" button after the radio buttons I think you can make it work without any JavaScript, but you will need to use an iframe.
See: How do I submit an html form inside an iframe without changing the outer page?
First way: use flash.
Second way: use wizard style pages and store variables in session.