</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> <a href="/posts/18228370/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
</p>
<p class="mb0 mt6">Closed <span title="2013-08-14 09:51:50Z" class="relativetime">6 years ago</span>.</p>
</div>
</div>
</aside>
<input onclick="getInvitevalue(__id__, this)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>
<input onclick="getCancelvalue(__id__, InviteTeacher)" type="button" value="Cancel" name="Cancel" class="Cancel" id= "Cancel"/>function getInvitevalue(idValue,invite){var field1 = idValue;
$.ajax({ url: "inviteteacher.php", type: "POST", data: ({name: field1}),}).done(function() {
if(invite.value = 'Invite')
invite.value = 'Pending Request';});}function getCancelvalue(idValue,cancel){var field2 = idValue;
$.ajax({ url: "inviteteacher.php", type: "POST", data: ({name: field2}),}).done(function() {
if(cancel.value = 'Pending Request')
cancel.value = 'Invite';});}
Here onclick id which is used to display dynamic values.Refer my code and say how I change it in boonex-Dolphin??
</div>
Shorter code--> no need of wrapping butoons in div
$('.b2').attr('disabled', true);
$('.b1').click(function () {
this.value = 'Pending Request';
$(this).next('.b2').removeAttr('disabled');
});
$('.b2').click(function () {
$(this).attr('disabled', true).prev('.b1').val('Invite');
});
Now using class for the button and buttons are wrapped in div
HTML
<div>
<input type="button" class="b1" value="Invite" />
<input type="button" class="b2" value="Cancel" />
</div>
$('.b2').attr('disabled', true);
$('.b1').click(function () {
this.value = 'Pending Request';
$(this).parents('div').find('.b2').removeAttr('disabled');
});
$('.b2').click(function () {
$(this).attr('disabled', true).parents('div').find('.b1').val('Invite');
});
$('#b1') refers to the element with id b1
this.value = 'Pending Request' change the text of the current element clicked in below code change value of element with id b1
HTML
<input type="button" id="b1" value="Invite" />
<input type="button" id="b2" value="Cancel" />
js
$('#b1').click(function () {
this.value = 'Pending Request';
});
$('#b2').click(function () {
$('#b1').val('Invite');
});
Here's a jsFiddle demo, I have also set the cancel button to disabled when no request is running and so on.
HTML:
<button id="btn_start_request">Invite</button>
<button id="btn_cancel_request">Cancel</button>
JS:
function startRequest() {
$("#btn_start_request").text("Pending request ..").attr("disabled", true)
$("#btn_cancel_request").attr("disabled", false)
// start request here
}
function cancelRequest() {
$("#btn_start_request").text("Invite").attr("disabled", false)
$("#btn_cancel_request").bind("click", cancelRequest).attr("disabled", true)
// cancel request here
}
$(function() {
$("#btn_start_request").bind("click", startRequest)
$("#btn_cancel_request").bind("click", cancelRequest).attr("disabled", true)
})