So right now I have this:
HTML:
<input type="submit" class="usp-submit usp-submit-default" onclick="return change(this); " id="btnSubmit" />
jQuery:
function change( el )
{
if ( el.value === "Send" )
el.value = "Sending";
else
el.value = "Please wait...";
$("#btnSubmit").attr("disabled", true);
}
This does disable the input button and change the value to "Please wait", but the form is not submitted.
I assume this disables the button in the first place and doesn't perform the send action.
I have read somewhere that you can add a delay before .attr("disabled", true) for a few milliseconds so that the form would be submitted first.
Any help from jQuery experts would be appreciated.
Thanks.
If you want to delay, you can use the vanilla js way, setTimeout()
function change( el )
{
if ( el.value === "Send" )
el.value = "Sending";
else
el.value = "Please wait...";
setTimeout( () => $("#btnSubmit").prop("disabled", true) , 0);
}
Related
Good Day!
I am planning to add a javascript where it will remove the onclick attribute if a certain field is empty. BTW I modify my code because I use different approach on this:
First I added a after_ui_frame logic hook and call the javascript using the custom logic hook.
$randomNumber = rand();
echo '<script type = "text/javascript">
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "custom/include/CustomLogicHook/clearFields.js?v=' . $randomNumber . '";
document.body.appendChild(script);
</script>';
And my custom JS
$("#btn_custom_city_c").attr("disabled", true);
$("#btn_custom_barangay_c").attr("disabled", true);
$('#dvt2_province_id_c').keyup(function() {
if ($(this).val().length !=0)
$("#btn_custom_city_c").attr("disabled", false);
else
$("#btn_custom_city_c").attr("disabled", true);
});
The disabled/enabled button works but it won`t work on relate field. This codes only works on a normal field
I think this code is generated by a builder or something. right? what a mess!
Anyway, you can check if the input value length is == 0. without any jquery. but be aware that:
1- function triggers after you leave the input after the change.
2- white space means that the input value length is more than 0
let changeListener = document.getElementById("input").addEventListener("change", function() {
let input = document.getElementById("input");
if (input.value.length == 0) {
document.getElementById("btn").disabled = true;
} else {
document.getElementById("btn").disabled = false;
}
})
<input type="text" id="input">
<button type="button" id="btn">button</button>
Edit: regarding your comment:
yes, you can start the button disabled. just disabled it on load out of the function.
document.getElementById("btn").disabled = true;
let changeListener = document.getElementById("input").addEventListener("change", function() {
let input = document.getElementById("input");
if (input.value.length == 0) {
document.getElementById("btn").disabled = true;
} else {
document.getElementById("btn").disabled = false;
}
});
<input type="text" id="input">
<button type="button" id="btn">button</button>
just incase you are working with Suite CRM I was able to implement the behavior I want on my buttons.
I added this code below:
if($('#province_c').val() == " "){
$("#btn_custom_city_c").attr('disabled', true);
}else{
$("#btn_custom_city_c").attr('disabled', false);
}
var inputName = "input[name='province_c']";
YAHOO.util.Event.addListener(YAHOO.util.Selector.query(inputName), 'change',
function(){
$("#btn_custom_city_c").attr('disabled', false);
});
for more information you can check at Suite CRM community click Here
A php page has a jquery interface.
an on submit button dynamically writes an alert.
the confirm box is of the style : return confirm.
in other words there is a script on the page that does something like this:
confirm (okay cancel );
I need a way of listening for when the alert has been dynamically written so I can confirm it dynamically.
any ideas?
is there an event listener for 'confirm'?
<html>
<head>
<script>
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
You can use window.confirm = function() { } to intercept the confirm command.
Returning true would be the same as clicking the "ok" button.
window.confirm = function() { return true; }
if (window.confirm("Delete everything?") == true)
{
alert("Deleting all your files as you confirmed")
}
Onclick and jQuery click working together but return false not working in jquery. I want to validate fields before on onclick open next page. Problem with my code is that if filed are blank in that case it open next page. I use return false in each empty case. So until all fields are not filled up. next page should not open.
Html Code
<button id="onepage-guest-register-button" type="button" class="button secondary" onclick="$('login:guest').checked=true; checkout.setMethod();"><span><span><?php //echo $this->__('Checkout as Guest') ?></span></span></button>
jQuery Code
jQuery('#onepage-guest-register-button').click(function(e){
var email=jQuery('#login-email').val();
jQuery('.validate-email').attr('value', email);
var login_name = jQuery('#login_name').val();
var login_phone = jQuery('#login_phone').val();
var login_email = jQuery('#login_email').val();
alert("name"+login_name+'phone'+login_phone+'email'+login_email);
if(login_name==''){ jQuery('.login_name').text('Please enter full name'); return false; }else{ jQuery('.login_name').empty();}
if(login_phone==''){ jQuery('.login_phone').text('Please enter Phone Number');return false;}else{ jQuery('.login_phone').empty();}
if(login_email==''){ jQuery('.login_email').text('Please enter Phone email');return false;}else{ jQuery('.login_email').empty();}
//alert('trigger');
jQuery('#onepage-guest-register-button').trigger('onclick');
});
Don't mix onclick attribute with onclick event handler. It's just plain silly.
In most cases, it's better to go with the latter.
1) Remove onclick attribute
<button id="onepage-guest-register-button" type="button" class="button secondary"><span><span><?php echo $this->__('Continue') ?></span></span></button>
2) Move the logic into your onclick event handler.
jQuery('#onepage-guest-register-button').click(function(e){
// no idea
var email = jQuery('#login-email').val();
jQuery('.validate-email').attr('value', email);
// get values
var login_name = jQuery('#login_name').val();
var login_phone = jQuery('#login_phone').val();
var login_email = jQuery('#login_email').val();
// flag if errors is found; assume no errors by default
var err = false;
// clear errors?
jQuery('.login_name').empty();
jQuery('.login_phone').empty();
jQuery('.login_email').empty();
// show errors if any
if (login_name == '') {
jQuery('.login_name').text('Please enter full name');
err = true;
}
if (login_phone == ''){
jQuery('.login_phone').text('Please enter Phone Number');
err = true;
}
if (login_email == ''){
jQuery('.login_email').text('Please enter Phone email');
err = true;
}
// do the appropriate action depending if there are errors or not
if (err) {
return false;
} else {
$('login:guest').prop('checked', true);
checkout.setMethod();
}
});
I have the following form on my site. It's simple, one search input field and one submit button:
<form id="search-form" name="search-form" onsubmit="return search()">
<input type="search" id="query" class="search-field" value="<?php echo $searchQuery;?>">
<input type="submit" name="search-btn" id="search-btn" value="">
</form>
As you can see, in the search field (id=query) I have a php which sometimes inserts value into his field.
What I want to do is following:
If $searchQuery doesn't exist (or in other words, if value of search
field id=query is empty, allow user to click on the search button
manually.
If $searchQuery exist, auto submit the the form (simulate click on
the search button.
Any solution will help, JavaScript, jQuery or in PHP. I just need to figure out how to auto submit this form when PHP variable $searchQuery exists.
I believe you are asking specifically on initial page load. Use jQuery:
$(document).ready(function() {
if ($('#query').val() !== '') {
$('#search-form').submit();
}
});
You would need to just look to see if the value is populated and submit the form if it is.
jQuery Version:
$( function() {
if ( $( '#query' ).val() !== '' ) {
$( '#search-form' ).submit();
}
});
Fiddle: https://jsfiddle.net/fe9m8pk3/
Javascript Version:
function ready( fn ) {
if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
fn();
} else {
document.addEventListener( 'DOMContentLoaded', fn );
}
}
ready( function() {
if ( document.getElementById( 'query' ).value != '' ) {
document.getElementById( 'search-form' ).submit();
}
});
Fiddle: https://jsfiddle.net/qeo25yu1/
<script type="javascript/text">
var query = document.getElementById('query');
if(query.value != ''){
//do your submit
}
function yoursubmitfunctionname(){
//do your submit
}
query.addEventListener('change',yoursubmitfunctionname);
</script>
This code will submit form if character length minimum fullfiled using Jquery:
$(document).ready(function ()
{
var minimum_character = 7;
$('#query').on('propertychange input', function (e)
{
var valueChanged = false;
if(e.type=='propertychange')
{
valueChanged = e.originalEvent.propertyName=='value';
}
else
{
valueChanged = true;
}
if(valueChanged)
{
str_length = $('#query').val().length;
if(str_length == minimum_character)
{
$("#search-form").submit();
}
}
});
});
How do I make a script in javascript to output an error and prevent form submission with empty fields in the form? Say the form name is "form" and the input name is "name". I have been having some trouble with PHP not always handling the empty fields correctly, so I would like this as a backup. Any help is appreciated, thanks.
HTML Code :-
<form name='form'>
<input type="button" onclick="runMyFunction()" value="Submit form">
</form>
Javascript Code :-
function runMyFunction()
{
if (document.getElementsByName("name")[0].value == "")
{
alert("Please enter value");
}
else
{
var form= document.getElementsByName("form")[0];
form.submit();
}
}
Claudio's answer is great. Here's a plain js option for you. Just says to do nothing if field is empty - and to submit if not.
If you need to validate more than one, just add an && operator in the if statement and add the same syntax for OtherFieldName
function checkForm(form1)
{
if (form1.elements['FieldName'].value == "")
{
alert("You didn't fill out FieldName - please do so before submitting");
return false;
}
else
{
form1.submit();
return false;
}
}
This is untested code but it demonstrates my method.
It will check any text field in 'form' for empty values, and cancel the submit action if there are any.
Of course, you will still have to check for empty fields in PHP for security reasons, but this should reduce the overhead of querying your server with empty fields.
window.onload = function (event) {
var form = document.getElementsByName('form')[0];
form.addEventListener('submit', function (event) {
var inputs = form.getElementsByTagName('input'), input, i;
for (i = 0; i < inputs.length; i += 1) {
input = inputs[i];
if (input.type === 'text' && input.value.trim() === '') {
event.preventDefault();
alert('You have empty fields remaining.');
return false;
}
}
}, false);
};
Attach an event handler to the submit event, check if a value is set (DEMO).
var form = document.getElementById('test');
if (!form.addEventListener) {
form.attachEvent("onsubmit", checkForm); //IE8 and below
}
else {
form.addEventListener("submit", checkForm, false);
}
function checkForm(e) {
if(form.elements['name'].value == "") {
e.preventDefault();
alert("Invalid name!");
}
}