jquery - Button click has to be in order in javascript -
i have 2 buttons in same form 1 submit , save cm , want give alert if user clicking save cm button out first clicking search button . calling same js function both of these onclick event passing variable says clicked
function setaction(var) if (var == action) { } else // save cm { } i tried many ways nothing working 1. tried include hidden variable in form , changed hidden variable value in if( var ==search ) , when clicked save cm again going function again new call , not able previous function call value
if (action == 'save cm') { if(document.getelementbyid('searchbuttonclicked').value==='notclicked') { alert(document.getelementbyid('searchbuttonclicked').value); alert('please search physician before saving content manager'); return false; } } the above condition true
- i tried disable button when page loads
and in search action function tried enable button below document.getelementbyid('savetocm').removeattribute("disabled");
but 1 not enabling button @ . appreciated
the following jsp , tried delete code since huge
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="pragma" content="no-cache" /> <title></title> <link rel="stylesheet" href="<c:url value="/css/styles.css"/>" type="text/css"/> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> jquery(document).ready(function() { var specialdates = {}; var = new date(); specialdates['10' + now.getmonth() + '' + now.getfullyear()] = [true, 'mg-special', 'by manager']; specialdates['25' + now.getmonth() + '' + now.getfullyear()] = [true, 'as-special', 'by associate']; var others = [true, '', '']; $("#dateofsleepstudy").datepicker({ 'beforeshowday': function(date) { var target = date.getdate() + '' + date.getmonth() + '' + date.getfullyear(); return specialdates[target] || others; }, 'inline': true }); }); </script> <script> if(typeof string.prototype.trim !== 'function') { string.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); } } function setaction(action) { var numbers = /^[0-9]+$/; var letters = /[a-za-z]+$/; var datevalformat =/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ; if (action == 'search') { document.getelementbyid('action').value = action; alert( document.getelementbyid('savetocm').disabled); //$("#savetocm").prop("disabled",false); // document.getelementbyid('savetocm').removeattribute("disabled"); //document.getelementbyid('savetocm').disabled = false; alert(document.getelementbyid('savetocm').disabled); document.getelementbyid('searchbuttonclicked').value = 'clicked'; return checkmandatoryattribute(); } else { alert(document.getelementbyid('savetocm').disabled);alert('save cm'); } document.getelementbyid('action').value = action; return true; } function checkmandatoryattribute() { var numbers = /^[0-9]+$/; var letters = /[a-za-z]+$/; var datevalformat =/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ; if (document.getelementbyid('lastname').value.trim() == '') { alert('last name required.'); return false; } return true; } </script> </head> <body> <div class=headerimg align=left></div> <br/> <table style="width:1200px" class="form"> <tr> <td align="center" valign="top"> <form:form name="searchform" commandname="searchform" action="search.do" method="post"> <table style="width:100%;border-bottom: #6699cc 1px dotted"> <tr> <td class="label" align="left"> last name</td> <td><form:input path="lastname" maxlength="50" cssclass="textbox"/></td> <td class="label" align="left">first name</td> <td><form:input path="firstname" maxlength="50" cssclass="textbox"/></td> <td class="label" align="left">state</td> <td><form:input path="state" maxlength="50" cssclass="textbox"/></td> </tr> <tr> <td></td> <td></td> <td class="label" align="left">npi</td> <td><form:input path="npi" maxlength="50" cssclass="textbox"/></td> <td class="label" align="left">city</td> <td><form:input path="city" maxlength="50" cssclass="textbox"/></td> </tr> <tr> <td></td> <td></td> <td class="label" align="left">date </td> <td><form:input id ="dateofsleepstudy" path="dateofsleepstudy" cssclass="textbox" required pattern="\d{2}\/\d{2}\/\d{4}"/></td> </tr> <tr> <td align="right"> </td> </tr> <tr> <td/> <td/> <td/> <td><form:hidden path="action"/></td> <td align="left"><input type="submit" value="search" id="physsearchbtn" name="physsearchbtn" class="buttondis" onclick="return setaction('search')"></td> <td><input type="button" value="reset" class="buttondis" onclick="doreset()"></td> </tr> <tr> <td> </td> </tr> </table> <br/> <table style="width:450px;"> <tr> <td colspan="50" align="right"> <input type="button" name="savetocm" id="savetocm" value="save cm" class="buttondis" disabled=true onclick="return setaction('savetocm')"/> </td> </tr> </table> </form:form> </td> </tr> </table> </body> </html>
what want define variable outside of function set false. inside conditional logic search button being clicked, set variable true. run check value true inside of conditional save button being clicked.
this way, search must clicked before save trigger save logic, seen in following example:
var search_clicked = false; function setaction(action) { if (action == 'search') { search_clicked = true; console.log("search clicked"); } if (action == 'save') { if (search_clicked == true) { // trigger when search has been clicked console.log("both buttons clicked"); } else { console.log("you need click search first"); } } }<button onclick="setaction('search')">search</button> <button onclick="setaction('save')">save</button>hope helps! :)
Comments
Post a Comment