I am having quite a battle controlling tabs through a button click function. I want the user to go through tabs in order. Each tab has a different html form. So the buttons provide also a validation. But the main problem is the next & previous buttons are not functioning at all. How come the button is not changing tabs at all?
jQuery
<script type="text/javascript">
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
$(".backtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
</script>
HTML
<div id="convertThis">
<div id="tabs">
<div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div>
<div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div>
</div>
<div id="divs">
<div id="a">
<form action="" method="post">
CATEGORY 1 FORM CONTENT
<div class="tabController">
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
<div id="b">
<form action="" method="post" id="post2">
CATEGORY 2 FORM CONTENT
<div class="tabController">
<div class="tabBack">
<input type="button" class="backtab" value="<< Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/>
</div>
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
</div>
</div>
Maybe because your buttons are of type "submit" and they force a refresh of the page? Try to change them to <input type="button" ... />
Also, get rid of the <a> tags around the buttons.
Use either a button <input type='button'> OR a link <a href='...'>text</a>, there's no point in having a link wrapping a button.
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I am updating hidden field in form with jquery. it works just fine for first three clicks after that it shows only first element value.
Here is working js fiddle jsfiddle link:
when users is clicking on tab the value of fileorurl changes to 1,2 or 3. it works for first 3-5 click but after that the value stocks to only 1. here is html
<div class="container" id="upload">
<div class="row">
<form id="upload-form2"
action="http://way2enjoy.com/modules/compress-png/converturl16.php"
name="arjun"
method="post"
enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#fileuu" class="btn btn-default active" data-toggle="tab">
<input type="radio" class="changev" value="1">File Upload
</a>
<a href="#urluu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="2">URL upload
</a>
<a href="#linkuu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="3">Website Link
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit"
value="Compress »"
class="btn btn-primary btn-lg pull-right"
id="upload_btn"
name="upload_btn">
<input type="hidden" name="fileorurl" id="myField" value="">
</form>
</div>
</div>
Here is javascript:
<script>
$('.changev').change(function () {
var valueuu = $(this).val();
$("#myField").val(valueuu);
});
</script>
Any help will be useful thanks!
Your checkboxes not updating for some strange reason after a few clicks. You can use the click event on their parents instead:
$('#tab a').on('click', function(){
var valueuu = $(this).find('input').val();
$("#myField").val(valueuu);
});
Fiddle
I would personally use a custom attribute for that and listen to Bootstrap events. The default value of the input is 1, because that will be the first active tab.
$(document).on('shown.bs.tab', '#tab > a', function(e) {
var dataType = $(e.target).attr('data-type');
$("#myField").val(dataType);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="upload">
<div class="row">
<form id="upload-form2" action="http://way2enjoy.com/modules/compress-png/converturl16.php" name="arjun" method="post" enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
File Upload
URL upload
Website Link
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit" value="Compress »" class="btn btn-primary btn-lg pull-right" id="upload_btn" name="upload_btn">
<input type="text" name="fileorurl" id="myField" value="1">
</form>
</div>
</div>
Fiddle here: https://jsfiddle.net/zyynnzm9/3/
Found it ^^ your radio buttons are getting checked but they aren't getting unchecked so they aren't canceling each other .. because they aren't in the same radio group
You have to put them in a radio group by adding the name attribute with equal value to each
No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).
However, I don't know how to close all the already opened divs when I click on other buttons.
For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.
My relevant HTML
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
My JS:
$(document).ready(function(){
$("#add").click(function(){
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
});
});
Thanks for suggestions and tips.
i guess this is the simplest thing you can do.. hope this helps you..
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
http://jsfiddle.net/alaskaz1864/VtLzB/1/
replace your jquery code with the following code
$(document).ready(function()
{
$("#add").click(function(){
$("#test1").show();
$("#test2,#test3").hide();
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
$("#test1,#test3").hide();
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
$("#test1, #test2").hide();
});
});
You need to add a common class to those elements, to close them all before opening the required one. You can also put data attributes on the buttons to DRY up your code. Try this:
<div id="controls">
<input type="button" class="addBtn" data-rel="#test1" value="Add" id="add" />
<input type="button" class="editBtn" data-rel="#test2" value="Edit" id="edit" />
<input type="button" class="viewBtn" data-rel="#test3" value="View" id="view" />
<input type="button" class="deleteBtn" value="Delete" id="delete" />
</div>
<div id="test1" class="content">test 1</div>
<div id="test2" class="content">test 2</div>
<div id="test3" class="content">test 3</div>
$('#controls input').click(function() {
$('.content').slideUp('fast');
$($(this).data('rel')).slideDown('fast');
});
Example fiddle
Try to use attribute starts with selector to grab the similar elements, hide it after grabbing it then after that do your normal process,
$("#add").click(function(){
$('div[id^=test]').hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$('div[id^=test]').hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$('div[id^=test]').hide();
$("#test3").slideToggle("fast");
});
DEMO
Even simpler,
$('[type=button]:not(#delete)').click(function(){
$('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});
Special Note:
This code does not expect us to change the DOM structure by adding/hardcoding data-attribute.
DEMO
your jquery
$(document).ready(function(){
$("#add").click(function(){
$("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");
});
});
Demo
How can I do collapsible set on icon? This is my icon code.
<div id="custom-border-radius">
No text
</div>
On click of '+' icon i need to show and hidd list ( Send SMS and Send Mail), code is as follows,
<input type="submit" id="sms" data-inline="true" value="Send SMS">
<input type="submit" id="mail" data-inline="true" value="Send Mail">
How can i do that with collapsible concept. Is there other way, Any suggestions please
<div data-role="collapsible" id='collapsible1'>
<h4>Heading</h4>
<form>
<input type="button" data-inline="true" id='btn1' value="Input">
<div class="ui-input-btn ui-btn ui-btn-inline">
Enhanced
<input type="button" data-enhanced="true" id='btn2' value="Enhanced">
</div>
</form>
</div>
<script>
$('#btn1').click(function(){
alert("Btn 1 clicked");
document.getElementById('collapsible1').style.display = 'none';
});
$('#btn2').click(function(){
alert("Btn 2 clicked");
document.getElementById('collapsible1').style.display = 'none';
});
</script>
Edited to add disappearing behavior to the collapsible set
JFiddle is here (Demo)