I'm trying to achieve an odd request. I will also provide some back information as well. First and foremost the problem.
I want to disable a button until fields are filled and another button is clicked. I want a user to input data into the form and then click "save" to parse the data. The reason I have to do this is because I am communicating with a robot and it requires this to happen. I basically need to send 2 links to the robot in order for it to work. With that being said, I have one link onchange and one on a button. I tried onblur to avoid the save link but the time that it happened was too quick for the robot to process.
Here is the code I have...
<div class="form">
<form id="pnform" name="pnform" language=javascript>
<input type="text" class="form-control-lg" id="pname" placeholder="Enter Part Name" onchange="return pname_onchange()" style="width:375px; height:50px">
</form>
<!--Parse Data To Robot On Form Change-->
<script>
function pname_onchange() {
str = '/KCLDO/set%20var%20[hmi]Part_Name=' + "'" + document.pnform.pname.value + "'" ;
//alert(str);
window.location.href = str ;
}
function parseData() {
str = '/KARELCMD/HMI';
//alert(str);
window.location.href = str;
}
</script>
<!--End Parse-->
</div>
<br />
<a href="/KARELCMD/HMI">
<button type="button" class="btn btn-secondary btn-lg pt-4 pb-4 pr-5 pl-5 mb-3 mr-2">
<h1>Save</h1>
</button>
</a>
<a href="/fr/p_type.htm">
<button type="submit" class="btn btn-secondary btn-lg pt-4 pb-4 pr-2 pl-2 mb-3 ml-2">
<h1>Continue</h1>
</button>
</a>
Can anyone offer advice on this? I want the "Continue" button to be disabled until the user fills the form in and hits the save button.
Thank you in advance.
Just add an ID to your Continue button, and set the disabled attribute to begin with:
<button id="continue" type="submit" class="btn btn-secondary btn-lg pt-4 pb-4 pr-2 pl-2 mb-3 ml-2" disabled><h1>Continue</h1></button>
Then add an event listener to your Save button:
<button type="button" class="btn btn-secondary btn-lg pt-4 pb-4 pr-5 pl-5 mb-3 mr-2"><h1>Save</h1></button>
Then make this function:
function continueButton() {
if (document.getElementById("pname").value != "") {
document.getElementById("continue").removeAttribute("disabled");
}
}
And it should now work!
Hopefully this helps!
Related
I've got a Submit button that's used to insert item:
<div class="col-md-12">
<div class="form-body">
<div class="form-group pull-right">
<label for="exampleInputEmail1"> </label> `
<button type="button" id="subbtn" class="btn btn-success margin-t12" ng-click="Submit();">Submit</button> //button
<button type="button" class="btn btn-default margin-t12" ng-click="back();">Cancel</button> </div>
</div>
</div>
Now when I press the Submit button I noticed sometime the item inserted twice with same details. I applied below solution already but the issue not resolved yet.
$('#subbtn').attr("disabled", 'disabled'); //button disable
setTimeout(function () {
$('#subbtn').removeAttr("disabled")
}, 10000);
I'm just wondering what I've overlooked...
Problem: Can't get code to 'click' button to execute action
Context: I'm able to get the element and change it from disabled to visible so I know I have the button class name correct in the command prior to this one but for whatever reason when the code gets to this switch case nothing happens; and no error is provided in the xcode console. There is no button input id and no form name associated either.
Question: Since I'm certain I have the getElementsByClassName....click() part correct, and I know this is the only element on the page with this name is there another way to execute the 'click'
Website HTML code:. [Last few lines of code]
<div class="mr-0 mr-md-5 pr-md-4 mb-4">
<p class="mb-1 body-s" role="" aria-live="">Password</p>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="oldPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control is-invalid" type="password" id="oldPassword" placeholder="Old password" maxlength="40" aria-describedby="error-oldPassword" aria-label="oldPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show Current Password">Show</button>
<div aria-live="polite">
<div class="error-class" id="error-oldPassword">Please enter your password</div>.
</div>
</div>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="newPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control " type="password" id="newPassword" placeholder="New password" maxlength="40" aria-describedby="error-newPassword" aria-label="newPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show New Password">Show</button>.
<div aria-live="polite"></div>
<span>
<ul class="ul-list-helpText">
<li class="">Password must be 8-40 characters long.</li>
<li class="">Your new password cannot be the same as your old password.</li>
</ul>
</span>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-link body-s h-auto my-2 mr-3">Cancel</button>.
<button type="button" class="btn btn-secondary core-btn uca-button btn btn-sm btn-primary">Save</button>
</div>
</div>
Swift Code [Doesn't work to click Save button]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].click();"){
(result, error) -> Void in
print(error)
}
Swift Code [Works to enable Save button - when it's originally disabled]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].disabled = false;"){
(result, error) -> Void in
print(result)
print(error)
}
I basically have this generated html and I need to get into the input element (the second child of the div) and take his value.
I started from the first child button and I managed to get to the parent <div> by using var parent = $(elem).closest("div"); (this in a javascript function called with the onClick event).
I then saved the parent in a variable and now I'm trying to get to the second element without results. I tried everything but I'm just not able to get in there even with closest() starting from the first button.
I can't use any id or anything like that to search for the elements, I need to get there by navigating the DOM, any solution?
<div class="px-3" id="' . $row["idEvent"] . '">
<button type="button" class="btn bg-light border rounded-circle"><i class="fas fa-minus" onClick="decreaseQuantity(this)"></i></button>
<input type="text" class="form-control w-25 d-inline" value="' . $row["TicketQuantity"] . '">
<button type="button" class="btn bg-light border rounded-circle"><i class="fas fa-plus"></i></button>
</div>
function decreaseQuantity(e){
var closestdiv = jQuery(e).parent();
var inputval = closestdiv.find('input').val();
alert(inputval);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="px-3" id="event">
<button type="button" class="btn bg-light border rounded-circle" onClick="decreaseQuantity(this)">Minus<i class="fas fa-minus" ></i></button>
<input type="text" class="form-control w-25 d-inline" value="2">
<button type="button" class="btn bg-light border rounded-circle">Plus<i class="fas fa-plus"></i></button>
</div>
Please try this. I hope you will get your answer
.closest() will always traverse the DOM upward until it finds a match.
There are multiple ways to do what you're trying to accomplish.
Here's 3 ways of doing it
$('button').on('click', function() {
var parent = $(this).parent();
alert(parent.find('input').val());
//OR
alert(parent.children('input').val());
//OR
alert($(this).siblings('input').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="px-3">
<button class=" btn bg-light border rounded-circle">
-
</button>
<input type="text" class="form-control w-25 d-inline" value="value">
<button type="button" class="btn bg-light border rounded-circle">
+
</button>
</div>
This code works well as long as you don't have more than one input field.
If you had more that one input field, you would need to access the input field with a class.
I am trying to add new input and button when clicking certain button.
<div class="form-group row">
<label>...</label>
<div class="col-sm-9 input-group" id="aa">
<input class="form-control mr-2" id="bbb" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
</div>
</div>
</div>
Here is my question.
By clicking on button, I want to add same input and button under input(id="aa"). And every time when clicking on new button I want to add new input and button again.
I tried to solve by using insertAdjacentHTML. But this requires long whole new code. So wondering if there is more simple way to add new input and button.
※ Code I am trying to add
<div class="col-sm-9 input-group" id="aa">
<input class="form-control mr-2" id="bbb" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
</div>
</div>
Next I am trying to change adding button to delete button when new input and button is clicked. Can use remove method. But I need each id of new input and button. So wondering if there is specific way to assign different id to new input and button every time I add one?
Hope someone can show me at least where I can refer to.
Don't use the ID, use relative addressing, parentNode, closest etc. And use cloneNode to get the stuff you want to duplicate
Note, you do need "new long code" for this
window.addEventListener("load",function() {
document.addEventListener("click",function(e) { // delegation
var elem = e.target;
if (elem.className.indexOf("btn") == 0) {
var div = elem.closest("div.form-group");
if (elem.innerText=="Add") {
var newDiv = div.cloneNode(true); // deep cloning
newDiv.querySelector(".btn").innerText="Del";
// here you may want to rename the input field too
div.parentNode.appendChild(newDiv);
}
else {
div.parentNode.removeChild(div);
}
}
});
});
<div class="form-group row">
<label>...</label>
<div class="col-sm-9 input-group">
<input class="form-control mr-2" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right">Add</button>
</div>
</div>
</div>
So I have this code:
$(document).ready(function(){
if($('#proofAttach-filemanager').val().length !=0){
$('#download_now').attr('disabled', false);
}
else
{
$('#download_now').attr('disabled', true);
}
});
The field with id proofAttach-filemanager is filled up dynamically using elFinder every time I upload a file.
Since the code above is only running every time the page loads, I don't know how to update the download_now button to enable dynamically every time the field is filled (and without keyUp)
HTML Segment:
<div class="form-group col-md-12">
<label>Attachment</label>
<input type="text" id="proofAttach-filemanager" name="proofAttach" value="" class="form-control" readonly="">
<div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default popup_selector">
<i class="fa fa-cloud-upload"></i> Browse uploads</button>
<button type="button" data-inputid="proofAttach-filemanager" id="download_now" class="btn btn-default download_now">
<i class="fa fa-cloud-download"></i> Download</button>
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default clear_elfinder_picker">
<i class="fa fa-eraser"></i> Clear</button>
</div>
Writing your logic inside the change event of that text box should work.
$(document).ready(function(){
toggleDownloadButtonAccess();
$('#proofAttach-filemanager').change(toggleDownloadButtonAccess);
function toggleDownloadButtonAccess(){
var $btnDownload = $('#download_now');
if($('#proofAttach-filemanager').val().length !=0){
$btnDownload.attr('disabled', false);
}
else
{
$btnDownload.attr('disabled', true);
}
}
});