I need that when a button is clicked once it will show the message "Don't show". And when clicked twice returns to the original message "Show". The first thing I already did it, I only need help with the second thing, that being the second click.
function show()
{
document.myform.button.value ="Hide";//Changes message on button when clicked.
document.myform.button.innerHTML= "Hide";
}
<form>
<input type=button value= "Show" name="button" id= "idButton"
onClick="show()">
</form>
function show(button)
{
if(button.hidden)
button.hidden = false
document.myform.button.value ="Show";//Changes message on button when clicked.
document.myform.button.innerHTML= "Show";
else {
button.hidden = true
document.myform.button.value ="Hide";//Changes message on button when clicked.
document.myform.button.innerHTML= "Hide";
}
}
<form>
<input type=button value= "Show" name="button" id= "idButton"
onClick="show(this)">
</form>
Related
I have a list of multiple checkboxes in the form. The user can check all the checkboxes but at least one is required. Without selecting at least one, checkbox they should not be able to submit the form. how to make it in contact form 7?
I have added the script which is not working.
Here is my script
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
In this only write star(*) after checkbox element in the plugin form
[checkbox* checkbox "test 1" "test 2"]
[submit "Send"]
It is perfectly work.
On this set your code
$('#fm_submit').submit(function(e){
e.preventDefault();
var ck_box = $('input[type="checkbox"]:checked').length;
// return in firefox or chrome console
// the number of checkbox checked
console.log(ck_box);
if(ck_box < 1){
alert('Select any one box');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name = "frmTest[]" id="fm_submit">
<input type="checkbox" value="true" checked="true" >
<input type="checkbox" value="true" checked="true" >
<input type="checkbox" >
<input type="checkbox" >
<input type="submit" id="fm_submit" name="fm_submit" value="Submit">
</form>
<div class="container"></div>
Paste the code from above on the bottom of the form instead of the Additional Settings
$('#fm_submit').submit(function(e){
e.preventDefault();
var ck_box = $('input[type="checkbox"]:checked').length;
// return in firefox or chrome console the number of checkbox checked enter code here
console.log(ck_box);
if(ck_box < 1){ alert('Select any one box'); }
});
I have a page with table. Each table row, has two links "delete", and "edit". "delete" works fine.
I would like to do this scenario:
When user clicks on row "edit" link, a small window appears with the fields of this row.
User decide to edit or not.
User may press "Save Changes", or "Cancel".
I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for "Save Changes", and "Cancel" buttons.
I can't do this using helpers
Template.codesList.events({
'submit form#newForm': function (events) {
// some actions
};
},
'click #edit': function () {
var px = 'px';
// Create an Overlay
var myOverlay = createOverlay();
document.body.appendChild(myOverlay);
// Create edit window display it over the Overlay
var editWindow = createPopup(300, 400);
// Create elements and append it to edit window
var editForm = editWindowForm(this._id, this.name);
editWindow.appendChild(editForm);
document.body.appendChild(editWindow);
},
'click #delete': function () {
if (confirm("Are you sure?")) {
Codes.remove({_id: this._id})
}
},
'submit form#editForm': function (event) {
event.preventDefault();
console.log("Clicked"); // This doesn't displayed
}
});
And this is the form after displaying it.
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
<label for="itemCode" class="control-label">Code</label>
<input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>
<div class="form-group">
<label for="itemName" class="control-label">Name</label>
<input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>
But when I press on "Save Changes" button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I'm missing?
By the way that's the output of the console:
document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>
Define edit form as a template. Use event handlers as usual to handle save and cancel button clicks.
To render it, either just put it inside the page template with '#if sessionEditPopup' or if you must do it yourself then use UI.renderWithData docs here
BTW manually modifying DOM using jquery etc is something to be avoided unless there is no other way and is not the Meteor way of doing things.
Add event on click save the data into Session because Session can access globally.
And Take the data from Template.name.Healper using session,
So when u change the session value that will automatically change your page content.
Here is the link may be useful for U
http://meteortips.com/first-meteor-tutorial/sessions/
I am working on an ASP website. I want to disable a button after the user clicks the button.
If the users click the button twice by mistake, the DetailsPage.ASP is executed twice and duplicate entries are inserted into Database.
How to disable a button in ASP code to prevent the users from clicking twice?
Page1: Mainpage.asp page
<form action="DetailsPage.asp" method="POST">
<input type="Submit" name="Submitbutton" value="Update Details">
How to prevent the users from clicking the button twice or alert them if they try to click second time?
Another other suggestions to handle this type of scenario will be helpful.
Thanks in advance.
Thanks
Ashok
<% dim disabled
If request.form("Submitbutton") <> "" Then
disabled = " disabled"
End If %>
Then code your button like this
<input type="Submit" name="Submitbutton" value="Update Details" <%=disabled%>>
Add a handler for the form in JavaScript;
function submitForm(form)
{
form["Submitbutton"].disabled = true;
return true;
}
Attach it:
<form action="DetailsPage.asp" method="POST" onsubmit="submitForm(this);">
I have 2 asp pages.
Feedback_Administration_Update.asp
Feedback_Administration.asp
My HTML form:
<form ACTION="Feedback_Administration_Update.asp" METHOD=POST NAME="form">
<input type="button" value="Submit" onclick="javascript:Checkit();" name="btnSubmit">
<input type="reset" value="Reset" onclick="javascript:document.location=location">
<input type="button" value="Send Response to Requester" name="btnSubmit" onclick="javascript:Checkit();"/>
</form>
Code in Feedback_Administration_Update.asp file:
dim buttonPressed
buttonPressed=Request.Form("btnSubmit")
select case buttonPressed
case "Submit"
'update database code
Response.Redirect "feedback_administration.asp?ID=" & regEx.Replace((request.form("ID")), "''") & "&lstPages=" & Trim(Request("lstPages")) & "&view=" & Request("view")& "&strSuccess1=" &"Success"
case "Send Response to Requester"
'mail task code
End Select
I am not sure why they are not working on clicking any button.
When I click on submit the page, it should update the code, when I click on submit Send Response to Requester, it should send email.
The value of button inputs is not sent to the server. You need to use ordinary submit buttons, and to have validation code you can cancel their onclick event:
<input type="submit" value="Submit" onclick="return Checkit();" name="btnSubmit" />
<input type="submit" value="Send Response to Requester" name="btnSubmit" onclick="return Checkit();" />
To make it work, change your JavaScript function in two ways. First, don't make it submit the form and second have it return true upon successful validation and false otherwise, e.g.:
function Checkit() {
//validate your stuff..
if ([all is good]) {
//don't submit the form here, the submit button will do that.
return true;
}
//indicate that something was wrong, cancel form submission:
return false;
}
Having this in place will cause Request.Form("btnSubmit") to hold the desired value.
I have a submit button on a form that is quite important. I do not want users clicking it more than once. Is there a way to make it unclickable or grayed out after they click it. (maybe an on click event?). My simple code is below
<form method='POST' action='index.php'>
<input type='text' name='text' id='text'>
<input type ='submit' value='submit' name='submit'>
</form>
You can use an onclick event to grab the button and set its disabled property to true.
<input type ='submit' value='submit'
id="my_submit_button" name='submit'
onclick="document.getElementById('my_submit_button').disabled = 'disabled'">
The syntax of the disabled attribute is pretty stupid, why it's not boolean I don't know but it is what it is:
http://www.w3schools.com/tags/att_input_disabled.asp
Just add the following onClick attribute to your button:
<input type="submit" value="submit" name="submit"
onclick="
if(!submitted) {
this.value = 'Please wait...';
this.disabled = true;
submitted = true;
return true;
} else {
return false;
}
">