i have the html as follows
<div class="element-container" id="div_3">
<div id="submit_submit" class="element">
<div class="fleft">
<input type="submit" value="Click me!" name="submit" id="submit"/>
</div>
<div class="clr"/>
</div>
</div>
When i click on element-container i want the label of submit button i.e. Click me!
Please give a solution , I've tried $('#submit').attr('value'). but i didn't get the result
There's a built-in method in jQuery for returning the value of INPUT elements, val(). The following should work:
$('#submit').val();
I've never tried it with a submit button specifically though.
Related
this is my code i want to have disable submit button after page load and enabled button when im typing in the textbox. pls help thanks
<div class="container" id="frmtoken">
<form method=POST action="authorize.php">
<div class="featured-desc-left">
<p>Enter token and wait to be connected.</p>
<p><strong>note: Only one device per token is allowed</strong></p>
</div>
<div class="two columns featured-desc-left">
<p><input type="text" name="token"></p>
</div>
<div class="featured-desc-left">
<p>
<input name="tconnect" type="submit" value="Connect"
onClick="this.form.submit(); this.disabled=true; this.value='Sending...';"/>
</p>
</div>
</form>
</div>
jQuery
$(document).ready(function(){
$("input[type=submit]").attr("disabled","disabled");
});
$("input[type=text]").on("keydown",function(){
$("input[type=submit]").removeAttr("disabled");
});
Bearing in mind this will apply to all submit inputs on the page when any text inputs on the page are typed in so you probably should assign classes/ids.
I am new to JQuery and need suggestions on following requirement.
I have a form with a submit button as below. Page accepts locale as an input parameter. Depending on the value of locale, on page load I am populating the labels of the input fields in respective language using jQuery.i18n.properties.js plug-in, but I could not update the display value of the button.
Please suggest solution or if there is another way to achieve this.
HTML code:
<input type="submit" data-inline="true" id="submit" value="Submit"/>
Have tried below jQuery options to update the button label:
$("#submit").val($.i18n.prop('submit'));
$("#submit").html($.i18n.prop('submit'));
$("#submit").prop('value',($.i18n.prop('submit')));
$("#submit").text($.i18n.prop('submit'));
None of them worked. But I see the value gets updated as below in Developer tools window, for this button.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" id="submit" value="New Text">
</div>
Try $("#submit")[0].value = $.i18n.prop('submit');. Does that work for you?
(Even though it's a JS workaround, not a JQuery solution)
If your button is an input tag, use the jQuery val:
function changeBtnText() {
$("#submit").val("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit" value="My button">
<button type="button" onclick="changeBtnText()">Change button text</button>
If your button is a button tag, use the jQuery text (or html):
function changeBtnText() {
$("#submit").text("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="submit">My button</button>
<button type="button" onclick="changeBtnText()">Change button text</button>
Note: I recommend giving your button an ID different from "submit" to avoid confusion.
I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.
I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();
please help me someone,,,,
i write some code to get the popup window using the following code.
<div id="EMAIL_CONFIRMATION_PENDING" class="popupContact" style="z-index:10003;">
<div class="popup_textarea">
<h3><h:outputLabel value="#{labelMsgs.emailPendingLabel}"/></h3>
<div class="VerifyEmailText">
<h:outputLabel value="#{labelMsgs.clickToSendEmail}"/>
<span class="FontItalic"><h:outputLabel value="#{headerBean.emailAddress}."/></span>
<br /><br />
</div>
<div class="SuspendedBoxMsg">
<h:outputLabel value="#{labelMsgs.accountSuspend}"/><br />
<h3><h:outputLabel value="#{sessionScope.DASHBOARD_EMAIL_EXP_TIME}"/></h3>
<h:outputLabel value="#{labelMsgs.unlessYouVerify}"/>
<br />
</div>
<div>
<span class="FontWeight">
<h:outputLabel value="#{labelMsgs.spamMailFolder}"/>
</span>
<a4j:commandLink id="resendLink" styleClass="violet_color_link" value="#{labelMsgs.regSuccSendMail}" onclick="javascript:resendLink(); this.onclick=null;" action="#{headerBean.resendEmail}" />
</div>
<div class="OkButton">
<div class="button_input">
<a4j:commandButton id="emailConfm" styleClass="image_button" value="#{labelMsgs.okButton}" action="#{accntDashboardBean.popupRefresh}"
reRender="frmAccountDashboardMenu:POPUP_PANEL" oncomplete="disablePopup1('EMAIL_CONFIRMATION_PENDING', 'backgroundPopup');popupCall('#{sessionScope.toShowPopupOf}');"/>
</div>
</div>
</div>
</div>
in this am using the id of the div to populate the popup,like this i have write some other popup code with different ids. for this i write the code in window.onload function to get the popup,
so, i need to set the default focus on the submit button which i mentioned in the above code.
You can set the focus to the submit button with the use of JavaScript or jQuery:
JavaScript:
document.getElementById('emailConfm').focus();
jQuery:
$('#emailConfm').focus();
you can use the following to set focus into the button
document.getElementById('emailConfm').focus();
But this may not work, to fix this I have done something like this
setTimeout(function() { document.getElementById('emailConfm').focus(); },100);
You can use HTML form tag inside your div to set focus on Submit button.
Use your input tags inside form tag, so whenever you are entering User Name or Password Submit button is always focussed on press of Enter button.
<form>
<input type="text"/>
<input type="password"/>
<input type="submit"/>
</form>