when having two submit buttons named submit and nopay, only one is working at a time. I need to disable both buttons after clicking and submitting the form.
<form enctype="multipart/form-data" method="post" action="
<?php echo base_url();?>user/Purchases_ctrl/create_vendor_payment" onsubmit='disableButton()'>
<div class="d-flex content-block mb-2 pt-4 justify-content-center">
<button type="submit" name="submit" value="submit" id="submit" class="btn btn-outline-custom w-30 btn-sm submit-btn mr-3">Submit</button>
<button type="submit" id="nopay" name="nopay" value="nopay" class="btn btn-outline-custom w-30 btn-sm submit-btn">No Vendor Payments Today</button>
</div>
</form>
<script>
function disableButton() {
var submit = document.getElementById('submit');
var nopay = document.getElementById('nopay');
submit.disabled = true;
submit.innerText = 'SUBMITTING';
nopay.disabled = true;
nopay.innerText = 'No Vendor Payments Today';
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Disable button using disabled property</title>
</head>
<body>
<p>Click the button to submit data!</p>
<p>
<input type="submit" value="Submit" id="btClickMe"
onclick="disableButton(); this.disabled = true;" />
<input type="submit" value="submit" onclick="disableButton(); this.disabled=true;" >
</p>
<p id="msg"></p>
</body>
<script>
function disableButton() {
var msg = document.getElementById('msg');
var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "submit") {
inputs[i].disabled = true;
}
}
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
<script>
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
btn.style.backgroundColor = '#36aeeb';
btn.style.color = "white";
}) // No need to set a duration for the timeout
}
Related
I have a form that request user data(name) and then when they click the "check" button the form will get replaced by a div and display the name in it.
Then when the user clicks the "edit" button the user gets prompt back to the form but with the previous entered data. I want to know how to display the details back in the form.
<html>
<body>
<div id="container">
<h2 id="heading">Query Form</h2>
<br>
<div id="formdiv">
<form id="form" method="POST">
<div>
<label for="name">Name: </label>
<input id="name" name="name" type="text">
</div>
<br>
<button id="checkbutton" onclick=submitform()>Check</button>
<input type="submit" id="formbutton" value="Submit" onclick=validateForm()>
</form>
</div>
<div id="for_replacement">
<div id="display_replacment" style="display: none;">
<form>
<label for="name_submit">Name: </label><span id="name"></span>
<span id="display_name"></span><br><br>
<input type="submit" id="formbutton" value="Edit" onclick="editform()">
</form>
</div>
</div>
<script>
function validateForm() {
var formrefresh = document.getElementById("form");
function handleForm(event) {
event.preventDefault();
}
var namevalidate = document.getElementById("name").value;
if(namevalidate.length == 0) {
alert("Please Enter Name");
formrefresh.addEventListener("submit", handleForm);
return;
}else {
form.action = "mailto:mail#gmail.com"
}
}
function submitform() {
globalThis.name = document.getElementById("name").value;
document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML;
document.getElementById("display_name").innerText = name;
}
function editform() {
alert(globalThis.name);
}
</script>
</body>
</html>
What should happen is when edit is clicked the data entered in the form should be displayed again in the form to edit.
Instead of removing the form why don't you set its display to none:
document.getElementById('heading').style.display = "none";
document.getElementById('form').style.display = "none";
document.getElementById('display_replacment').style.display = "block";
and when you want the get it back reverse
document.getElementById('heading').style.display = "block";
document.getElementById('form').style.display = "block";
document.getElementById('display_replacment').style.display = "none";
and you can get the name from the display_name:
const name =document.getElementById("display_name").innerText;
document.getElementById("name").value = name;
I'm trying to offer a text box in which the user can enter the size of the array to create, hit submit, then a prompt will appear that many times, each time asking for an integer to put in the array.
This is what I have so far:
http://codepen.io/sharryliang0730/pen/pRMqOm
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'none';
}
function yesnoCheck() {
if (document.getElementById('yesCheck').onclick) {
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifNo').style.display = 'none';
}
else if(document.getElementById('noCheck').onclick) {
document.getElementById('ifNo').style.display = 'block';
document.getElementById('ifYes').style.display = 'none';
}
}
var submit = document.getElementById('submit');
submit.onclick = function() {
getTheData() ;
}
function getTheData() {
var sizeInput = document.getElementById("sizeInput");
var inputValues = new Array();
for (var i = 0; i < sizeInput; i++){
inputValues.push(prompt('Enter the value'));
}
}
</script>
</head>
<body>
Please choose what you wanna do:<br>
<input type="button" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck" value="Create Array"/>
<input type="button" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"value="Search Array"/>
<br>
<div id="ifYes" style="display:none">
<br> Please input the size of the array.<br><br>
<input type="text" class="sizeInput" id="sizeInput" /> <br/><br>
<input type="button" name="submit" id="submit" value="Submit"/>
</div>
<div id="ifNo" style="display:none">
<div id="showInputValues">
</div>
EDIT: I added in the suggested code, but it is still not working. Am I missing something?
Your inputValues is empty. You need to add this:
var inputValues = new Array();
for (var i = 0; i < sizeInput; i++)
{
inputValues.push(prompt('Enter the value'));
}
it gives you an array like this: ["1", "2", "3"]
But if you want your array has int values do this:
for (var i = 0; i < 5; i++)
{
inputValues.push(parseInt(prompt('Enter the value')));//[1,2,3]
}
By your explanations var sizeInput = document.getElementById("sizeInput");
sizeInput is a number that user entered. If it is for example 5 and you want the array has [0,1,2,3,4] you need to do this:
for (var i = 0; i < sizeInput; i++)
{
inputValues.push(i);
}
You have many problems in your code, I edited all in code snippet below:
<head>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'none';
var submit = document.getElementById('submit');
submit.onclick = function ()
{
getTheData();
}
}
function yesnoCheck()
{
if (document.getElementById('yesCheck').onclick)
{
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifNo').style.display = 'none';
}
else if (document.getElementById('noCheck').onclick)
{
document.getElementById('ifNo').style.display = 'block';
document.getElementById('ifYes').style.display = 'none';
}
}
function getTheData()
{
var sizeInput = document.getElementById("sizeInput").value;
var inputValues = new Array();
for (var i = 0; i < sizeInput; i++)
{
inputValues.push(prompt('Enter the value'));
}
}
</script>
</head>
<body>
Please choose what you wanna do:<br>
<input type="button" onclick="javascript: yesnoCheck();" name="yesno" id="yesCheck" value="Create Array" />
<input type="button" onclick="javascript: yesnoCheck();" name="yesno" id="noCheck" value="Search Array" />
<br>
<div id="ifYes" style="display: none">
<br>
Please input the size of the array.<br>
<br>
<input type="text" class="sizeInput" id="sizeInput" />
<br />
<br>
<input type="button" onclick="javascript: loopFunction();" name="submit" id="submit" value="Submit" />
</div>
<div id="ifNo" style="display: none"></div>
<div id="showInputValues">
</div>
</body>
I am using javascript validations for required field. Here is my html
<form class="uk-form-stacked" name="myForm" action="<?php echo base_url(); ?>admin/pages/create_service" id="wizard_advanced_form" method="post" enctype="multipart/form-data" onsubmit="return myFunction(this)" novalidate>
<div data-uk-grid-margin="" class="uk-grid">
<div class="uk-width-medium-1-2">
<label for="service_title">Service Title<span class="req">*</span></label>
<input type="text" name="service_title" id="validd" class="md-input" />
<p id="demo"></p>
</div>
</div>
<div class="uk-grid">
<button type="submit" class="md-btn md-btn-primary md-btn-wave-light waves-effect waves-button waves-light" >Submit</button>
</div>
</form>
my javascript is
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
}
document.getElementById("demo").innerHTML = text;
return false;
}
</script>
Now when my input field is empty and i submit form it shows me input not valid that is fine. but even when i fill some textin input then it shows me undefined in place of input not valid instead of submitting form.
please help..
You forgot to add an else where it would return true if the condition is not satisfied.
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
document.getElementById("demo").innerHTML = text;
return false;
}
else{
return true;
}
}
</script>
You can use instead:
<html>
<head>
<script>
function valid()
{
var x;
x=document.getElementById(validd).value;
if(x==null || x=="")
{
alert("Please input service title");
document.getElementById(validd).focus();
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return valid()">
<input type="text" name="service_title" id="validd"/>
<button type="submit">Submit</button>
</form>
</body>
</html>`
I need to add multiple textboxes using a plus button and remove them using a minus button using Javascript.
After user fills up all the fields and clicks the submit button, I need to fetch all value using PHP.
Example:
Initially, there will only be 1 textbox. When user clicks on + button and already filled up the first field, the a second textbox will appear and also a - button used to remove the textbox. When a user clicks submit, the value in the textboxes will be submitted through PHP.
My code:
<?php
if(isset($_POST["userbtnsubmit"])){
}
?>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>
Note: As stated in the question, the user must type text in an input before another can be be shown.
addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);
function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
var i, ii = $(counter).val();
for(i = 0; i <= limit; i++) {
if (i != ii) {
$(target+i).hide();
}
}
$(plusBtn).click(function() {
ii = $(counter).val();
if ($(target+ii).val() != '') {
ii++;
if (ii <= limit) {
$(target+ii).show();
$(counter).val(ii);
}
}
});
$(minusBtn).click(function() {
ii = $(counter).val();
if (ii > 1) {
$(target+ii).val('');
$(target+ii).hide();
ii--;
$(counter).val(ii);
}
});
}
https://jsfiddle.net/curtisweeks/k4kanw6L/
You can combine jQuery PLUS AJAX to achieve the same.
Example :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$( "#plus" ).on("click", function() {
$( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');
});
$("#minus").on("click", function(){
if($("input[name='country[]']").length > 1)
{
$("input[name='country[]']:eq("+(length-1)+")").remove();
}
});
$("#btnsubmit").on("click", function(){
var countries = [];
$("input[name='country[]']").each(function(){
countries.push($(this).prop("value"));
});
console.log(countries);
//AJAX Post Data To Your Server
var postDataObj = {
url: "YOUR_SERVER_FILE",
type: "post",
data: countries,
success: function(data){
//Response Data From Server
}
}
console.log(postDataObj);
$.ajax(postDataObj);
});
});
</script>
</head>
<body>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
</form>
<input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</body>
</html>
JSFiddle Demo
i am using this code to get submitted data from a form
<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button>
<div id="info"></div>
<script type="text/javascript">
function submit()
{
var name = document.getElementById("name").value;
document.getElementById("info").innerHTML = " My Name is "+name+" ";
return false;
}
</script>
the result is displayed in the same window as that of form.
i want to display the output in a popup window and be able to link a print button in the main window that once clicked will print the contents of that popup
edit: just to clarify more.
form submitted > open a new window > displays the entered results
thanks
Well you can modify your code this way :
<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button>
<div id="info"></div>
<script type="text/javascript">
function submit()
{
var name = document.getElementById("name").value;
document.getElementById("info").innerHTML = " My Name is "+name+" ";
var r = window.confirm(" My Name is "+name+" .Click Ok To Print");
if (r == true) {
x = window.print();
}
return false;
}
</script>
Hope this serves your purpose.
I think you want something like
<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button>
<div id="info"></div>
<script type="text/javascript">
function submit()
{
var name = document.getElementById("name").value;
var output = " My Name is "+name+" ";
var myWindow = window.open("data:text/html," + encodeURIComponent(output),
"_blank", "width=200,height=100");
x = window.print();
return false;
}
</script>
I used this as inspiration :)