I am stuck with the function which have to do if input has class 'inerror' then div next to it should appear, but when I am running the function it is displaying all the div. Is there is solution for it without using each function. here is my code
<head>
<script type="text/javascript">
$(function(){
if($('input').hasClass('inerror')){
$('input', this).next().show();
}
})
</script>
<style>
.inerror{border:solid 1px #F00}
.error{ display:none}
</style>
</head>
<body>
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" class="inerror" value="submit"/>
<div class="error">error</div> <br />
<input type="button" value="submit"/>
<div class="error">error</div> <br />
</body>
$('input', this).next().show()
This matches the next sibling of all <input> elements, regardless of the check before it.
Try this instead:
$("input.inerror").next().show();
Related
I have a problem, I created a captcha and I implemented a button to change the current one and it works very well in Google Chrome but it doesn't work in Firefox (V. 57.0 32 bit)
Here's the code:
<head>
<title>Captcha</title>
</head>
<style>
//Style
</style>
<script>
function refresh(){
document.getElementById("risp").value = "";
document.CaptchaImg.src="captcha.php";
}
</script>
<body style="background-image: url('pattern_17.png');">
<center>
<div id="div_captcha">
<h1 style="Font-Family:Impact">CAPTCHA</h1>
<h3 style="Font-Family:Impact">Sei un robot?</h3><br />
<form method="post" id="form" name="form">
<div style="background-image: url('pattern_17.png');">
<div style="float:left;padding-left:10%;">
<img src="captcha.php" id="CaptchaImg" name="CaptchaImg"/><br /><br />
</div>
<div style="float:right;padding-right:10%;">
<input class="myButton" type="button" value="Nuovo captcha" onclick="refresh();" /><br /><br />
<input class="myButton" type="reset" value="Reset"/><br /><br /><br />
<input type="text" name="risp" id="risp" value="" required maxlength="5" />
<input class="myButton" type="submit" value="invia" name="invia" style="width:80px"/>
</div>
</div>
</form>
</div>
</center>
</body>
Thanks in advance!
You don't need a name for the img, just the id.
The name attribute has been deprecated for the img element !
Try
document.getElementById("risp").value = "";
document.getElementById("CaptchaImg").src = "captcha.php";
Im trying it with laravel. On button click I need to display the same div .
My code:
<h6>Other features </h6>
<div id="add1">
<input type="text" name="selprice" />
<input type="submit" value="+" id="add">
</div>
This is my html code.Here,when I click the button**(ie.,+)** it should show up the same div(ie add1).
Script code:
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("#add1").show();
});
});
</script>
This is what I have tried.
if you are cloning div use class instead of id.
use this context to get the click element
use append to add the cloned div to container
$(document).ready(function() {
$(document).on("click",".add",function() {
$("#container").append($(this).parent(".add1").clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Update
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Here you go with the solution https://jsfiddle.net/nuu4ofwu/2/
var cnt = 1;
$(document).on('click', 'input[type=submit]', function(){
cnt++;
var div = $(this).parent().clone();
$('body').append(div);
$('div:last-child').attr('id', 'add' + cnt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add" />
</div>
You should define another div as a template:
HTML:
<div id="template" style="display:none;">
<div id="add_2">
<h6>Other features</h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add_button_number"></div>
</div>
</div>
Javascript:
<script>
$('#add').click(function(){
var str = $('#add_2').html();
$('#add1').after(str);
})
</script>
My code doesn't work here, anyone has any idea what's the problem. I don't know where the problem could be, the code looks correct.
<script type="javascript">
$(document).ready(function(){
$('.new-task').hide();
$('#addNewTask').click(function(){
$('.new-task').toggle();
});
});
</script>
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
{{>submitTask}}
<template name="submitTask">
<div>
<form class="new-task">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</template>
First, here are some resources to set you on the right path:
https://www.meteor.com/tutorials/blaze/creating-an-app
http://docs.meteor.com/#/full/
Make it easy on yourself by reading the docs and using the conventions of meteor. Add an event to the body template to handle the #addNewTask click event. Below is how to get this working in meteor.
In your javascript:
Template.body.events({
"click #addNewTask": function(event, template) {
$(".new-task").toggle();
}
});
In your html:
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
{{>submitTask}}
<template name="submitTask">
<div>
<form class="new-task" style="display:none;">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</template>
Try this script tag is causing problem
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.new_task').hide();
$('#addNewTask').click(function(){
$('.new_task').toggle();
});
});
</script>
</head>
<body>
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
<div>
<form class="new_task">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</body>
</html>
When I click "preview" here the save button in my preview mode is not disabled http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i
I think this is because the form object (testAddForm) is not available in the scope of the ng-if. I know that I should use an object in my controller because it's passed down all the way, but the form object is created by angular and not available in the ng-if. How can I work around that?
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestController">
<form name="testAddForm" novalidate>
<div ng-if="!previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-if="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
</body>
</html>
JS:
angular.module('app', []);
angular.module('app').controller('TestController', ['$scope', function($scope) {
$scope.data = {};
$scope.previewMode = false;
$scope.preview = function(show) {
$scope.previewMode = show;
};
}]);
As a workaround you can try using ng-hide and ng-show instead of ng-if
Example plunkr
<form name="testAddForm" novalidate>
<div ng-hide="previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-show="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
The input field is placed inside the ng-if condition and if ng-if is false, the elements inside are not in the DOM. Since in preview mode your input field is not in the DOM, it is not taken into account while validating the form.
An easy fix would be to use ng-show, like this:
<div ng-show="!previewMode">
Plunkr
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Certificate Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
#main .my-form form .text-box .add-box strong {
font-size: 36px;
}
-->
</style>
</head>
<body>
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" /></p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a>
</p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 250 < n ) {
alert('Maximum Amount of Students');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Student <span class="box-number">' + n + '</span></label> <input type="text" name="students[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
When I hit submit, the php only gets the first value of the array
$students = ($_POST["students"]);
this is my php for that form, I don't know why it is only returning the first value of the array, this is my first time using forms with JavaScript so it might just be a simple error, I'm not sure
This is your problem:
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
You are closing your form prematurely because of the closing </div> and then opening a new form.
Your html is invalid and the browser tries to make sense of it, causing your students[] elements to be outside of your form so they never get posted.
The results may vary per browser (tested in Firefox), but validating your html should solve your problem.
Ok, I found the error. I have this working. You are not adding the new elements inside of your form. I rearranged the HTML as the following.
<form name="class" action="generate.php" method="post">
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" />
</p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a> </p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</div>
</div>
</form>
Just to clarify, I moved the opening tag of the form outside of your "main" div, and then I closed the form after the "main" div's closing tag. No other changes.