I am getting this error and the script never seems to work.
Uncaught ReferenceError: validate is not defined
I also tried to call the function onsubmit from the and also tried to place the function inside the page and in a separate JS file but same results.
The html file:show.gsp
<body>
<div class="row">
<div class="col-md-9 col-sm-9">
<g:form class="form-inline" role="form" action="update" name="form" >
<div class="form-group has-feedback">
<label class="control-label" for="mcc">GSM.Identity.MCC</label>
<br/>
<input type="text" class="form-control required" name="mcc" id="mcc" value="${mcc}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<div class="form-group has-feedback">
<label class="control-label" for="mnc">GSM.Identity.MNC</label>
<br/>
<input type="text" class="form-control required" name="mnc" id="mnc" value="${mnc}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<div class="form-group has-feedback">
<label class="control-label" for="co">GSM.Radio.CO</label>
<br/>
<input type="text" class="form-control required" name="co" id="co" value="${co}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<p>
<button type="submit" class="btn btn-success btn-sm" id="submit" onclick="validate()">Save Settings</button>
<g:link action="restart" class="btn btn-danger btn-sm">Restart OpenBts</g:link>
</p>
</g:form>
</div>
</div>
</body>
<script src="${resource(dir:'js', file:'main_script.js') }"></script>
and the script: main_script.js
//validation script
function validate(){
console.log("test");
var mcc = $("#mcc").val();
var mnc = $("#mnc").val();
var co = $("#co").val();
if (!$.isNumeric(mcc)){
$("#mcc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
if (!$.isNumeric(mnc)){
$("#mnc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
if (!$.isNumeric(co)){
$("#co").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
}
Javascript must be loaded within <head> or <body> tags.
you have added script tag after </body> tag, thats why it is not getting loaded and button event can't find validate() function which is within that Javascript
Add it before </body> tag as follows,
.
.
.
</g:form>
</div>
</div>
<script src="${resource(dir:'js', file:'main_script.js') }"></script>
</body>
As This Link says it should be used within <body> tag
Related
I have this code:
<div class="form-group">
<div class="form-group has-feedback">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick"></span>
</div>
</div>
Jquery
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
This code was created in bootstrap.
I need to show alert box after click showActionAfterClick class, but it's not working.
How can I repair it?
You have a space between your class identifier (.) and your classname showActionAfterClick:
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick">Text to see this button</span>
</div>
</div>
In this case, this happend because the span is an inline element and its width size depends of its content. So the span element have not width and you can't click it and trigger the alert (besides the bad syntax in your jquery query selector).
The #Jack Bashford example works because the span element has text inside and this provides the width to that element.
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span id ="showActionAfterClick" class="glyphicon glyphicon-search form-control-feedback glyphiconColor">Click ME!</span>
</div>
</div>
$(document).ready(function() {
$('#showActionAfterClick').click(function() {
alert('ok');
});
});
add id in your span tag instead of class and replace . with # and try now
Use this
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span onclick="test()" class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span>
</div>
</div>
<script>
function test(){
alert("ok");
}
</script>
I'm trying to make a calculator on dividing 2 variables in javascript. But I got an error like NaN. Please take a look at my code. I'm a beginner to javascript.
<script type="text/javascript">
var p_val, d_days, total_price
function calculate() {
p_val = parseInt(document.getElementById("purchased_price").value);
d_days = parseInt(document.getElementById("days"));
total_price = parseInt(p_val/d_days);
alert(total_price);
}
</script>
<div class="box-body">
<span class="text-danger"><?php echo validation_errors() ?></span>
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Purchased Price </label>
<input type="text" id="purchased_price" class="form-control" value="100000">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number Of Days</label>
<input type="text" id=days" class="form-control" >
</div>
<form action="<?=base_url()?>" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Depreciation Value</label>
<input type="text" id=result" class="form-control" >
</div>
<button class="btn btn-primary" type="button" onclick="calculate()" value="calculate">Calculate</button>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-info btn-lg" >Save</button>
</div>
<div class="col-md-3">
<a href="<?=base_url()?>location/location_list/" class="btn btn-info btn-lg" >Cancel</a>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</form>
</div>
Hello,
Im try to make calculator for divide 2 variable in javascript. But I got error like NaN Please look my code. I am beginner to javascript.
Just add .value to parse the value of d_days input like you did with p_val and not the whole object
d_days = parseInt(document.getElementById("days").value);
Btw, when you get an error specifying that X var is NaN, it usually means that you tried to compute mathematically something that is not a number.
I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>
your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}
Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});
I am using twitter bootstrap file upload, i want to store the image on databese and also i want to move in one folder,i spent lot of times, i can't get the file name value. see here enter firstname and select one image after submit the form ,now i got first name value but i cant get photo upload value...
<form class="form-horizontal form-bordered" method="POST" id="newUserForm" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">First Name<span class="star_mark"> *</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fname" name="fname" value="" aria-required="true" required="" data-msg-required="Please enter your firstname" placeholder="Enter your firstname">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Photo Upload<span class="star_mark"> *</span></label>
<div class="col-md-6">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="file" name="file">
</span>
Remove
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button class="btn btn-info btn-block" type="submit" id="user-submit">Submit</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#user-submit').click(function(event){
event.preventDefault();
if($('#newUserForm').valid()){
//console.log('success');
$.ajax({
type:'POST',
url :"php/register-newuser.php",
data: $('form#newUserForm').serialize(),
success: function(data) {
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
error:function(exception){
alert('Exeption:'+exception);
}
});
}
else{
console.log('please select all fields');
}
});
});
</script>
register-newuser.php
$fstname=$_POST['fname'];// i got ans here
$filename = basename($_FILES['file']['name']);
$newuser = array("fstName" => $fstname,'photoname' => $filename);
echo json_encode($newuser);
print_r($_FILES)//means nothing will happen, i didn't get any value like filename,size,extension....
To make an upload with AJAX you can use a jQUery plugin, for example this one. Bootstrap has nothing to do with upload.
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example