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)
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 have a row that will added automatically when I click 'Add Row' button. The row created by using clone() method. When I click 'Submit' button. The new row gone and didnt stay in that page. How to make it stay with the input in the textbox after the page is load?
Below is my code for that row:
<div id="rows">
<div class="p2">
<input type="checkbox" class="checkbox" runat="server"/>
<input id="txt1" type="text" runat="server" maxlength="16" value="0.00" />
</div>
<div class="p3"> </div>
<div class="p4">
<input id="txt2" type="text" runat="server" maxlength="16" value="0.00"/>
</div>
<div class="p5"> </div>
<div class="p6">
<input id="txt3" type="text" runat="server" maxlength="16" value="0.00"/>
<span style="color:red;">*</span>
</div>
</div>
Below is my javascript code:
var cloneCount = 1;
//Add new row
$("#addrow").click(function () {
$('#rows')
.clone(true).find('input:text').val("").end()
.attr('id', 'rows' + cloneCount++, 'class', 'block')
.insertAfter('[id^=rows]:last');
return false;
});
below is my code for the button:
<div id="bttns" style="text-align:center;">
<button id="addrow" >Add Row</button>
<button onclick="validate()" >Submit</button>
</div>
I'm using VS2012 and this project were ASPX web form. Do I need to do some code-behind? What are the problem inside my code? Really needs your help and I'm new to C# and asp.net.
I have this HTML code which contains two HTML forms and two buttons:
One for submit and one for cancel (basically get back to the previous page). What I would like to do is after I click the SUBMIT button and submit my forms do the same as the cancel button (get back to the previous page).
The problem is that I can't specify what page I want it to go back since this page will be used in many pages so it will be dynamic.
<div data-role="page" id="customer" data="Page" data-expired="true" data-theme="c">
<div data-role="content" data="customers" data-key="id" data-params="item:itemid">
<div align="left">
<h3 style="margin:0px">Customer Profile</h3>
</div>
<br/>
<div class="popup-hrule">
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="false" data-theme="a">
<h3>Customer</h3>
<form id="submit-edit-customer" method="post" data-formaction="process">
<label for="customer_name">Customer</label>
<input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
</div>
<div class="ui-block-b">
<label for="name">Primary Contact</label>
<input type="text" name="name" id="name" value="no valid name"
data-item=":name">
</div>
</form>
</div>
<div data-role="collapsible" data-collapsed-icon="false" data-theme="a">
<h3>Billing</h3>
<form id="submit-edit-customer" method="post" data-formaction="process">
<label for="customer_name">Customer</label>
<input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
</div>
<div class="ui-block-b">
<label for="name">Primary Contact</label>
<input type="text" name="name" id="name"
data-item=":name">
</div>
</form>
</div>
</div>
<a id="createeditcancel" data-role="button" data-inline="true" href="#" data-rel="back">Cancel</a>
<a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-theme="a">Save</a>
</div>
</div>
My question is, is there any easy way to do this without writing a lot of javascript code in the onclick event?
Thanks.
Very easy all you have to do is change the href to the url of previous page:
<a id="createeditcancel" data-role="button" data-inline="true" href="YOUR_URL_HERE" data-rel="back">Cancel</a>
Edit: if your submit is using php to save the info just add
header("Location: last_page.html");
Since its dynamic you can just get the back URL from the same place as the rest of your info and do:
header("Location:" + URL);
I didn't know I could do this but I tried it and it worked!
I added: data-rel="back" to the submit button.
Like this:
<a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-rel="back" data-theme="a">Save</a>
For redirect to other page in JavaScript you can use
window.location = "http://www.yoururl.com";
add to button onclick="location.href = 'www.yoursite.com';"
where u handle your form?php file?
other option in php
if (isset($_POST['submitform']))
{
?>
<script type="text/javascript">
window.location = "http://www.google.com/";
</script>
<?php
}
or in form
<form action="demo_form.asp" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
location.href = 'www.yoursite.com';
}
</script>
With document.referrer:
var cancel = function() {
window.location.href = document.referrer;
};
<input type="button" value="Cancel" onclick="cancel()" />
With history:
var cancel1 = function() {
history.back();
};
var cancel2 = function() {
history.go(-1);
};
<input type="button" value="Cancel" onclick="cancel1()" />
<input type="button" value="Cancel" onclick="cancel2()" />
on the action page or your controller try adding this:
$(document).ready(function(){
document.location = 'url' // the path to your homepage
});
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
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.