I'm quite new AMPscript, the problem I'm facing is I want to store the radio button value into a variable then I want to display that variable please someone help me.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Radio Button</title>
</head>
<body>
<form
id="dashform"
action="%%=RequestParameter('PAGEURL')=%%"
method="post"
>
<div>
<input type="radio" name="option" value="reason_1" id="reason_1" />
<label for="reason_1">I never signed up, or didn't realize I had signed up, for your email list.</label>
</div>
<div>
<input type="radio" name="option" value="reason_2" id="reason_2" />
<label for="reason_2">Your content isn't relevant to me.</label>
</div>
<p>
<button id="btn">Select your option</button>
</p>
</form>
</body>
</html>
Related
I've read through several posts that have had similar issues with ReCAPTCHA v2 but I'm still unable to figure out the issue.
I followed the npm and google documentation by installing npm install --save react-google-recaptcha and including
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script> within the body of the index.html and the page in which i want the reCaptcha to be shown.
But for some reason the reCaptcha will not show up on the page; with or without the code to make the reCaptcha functional.
Edit
The reCaptcha v2 was showing on the screen without changing anything with the code for a few moments and disappeared. I restarted VSCode and Github Desktop but the issue hasn't been resolved.
Contact.jsx
import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg';
import ReCAPTCHA from "react-google-recaptcha";
import REACT_APP_SITE_KEY from '../.env'
const Contact = () => {
const onChange = () => {
}
return (
<div className=''>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
....
<div className='w-2/3 pb-5'>
<img src={Stockpic15} alt="" />
</div>
<form className='flex flex-col justify-center items-center sm:space-y-8 mobile:space-y-10 mobile:text-lg tablet:text-2xl'>
<input className='contact-input' type='text' name='first-name' placeholder='Your First Name' required/>
<input className='contact-input' type='text' name='last-name' placeholder='Your Last Name' required/>
<input className='contact-input' type='email' name='email' placeholder='Your Email Address' required/>
<textarea className='border-black border-2 rounded-md block w-full resize' name="message" rows="4" placeholder='Message'></textarea>
<button type="submit" href="#_" className="relative inline-block text-lg group">
...
</button>
<ReCAPTCHA
sitekey={REACT_APP_SITE_KEY}
oncChange={onChange}
/>
</form>
</div>
</div>
)}
export default Contact
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</body>
</html>
I find a checkbox function from the web as below, how to remove checkbox if click Uncheck, maybe need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
I am a newbie on reactjs. I was playing with multiple components for creating a form , but got an error which i am not able to solve.
I searched thoroughly, but couldnt find an answer.
Please help
The errors are the following:
TypeError: erroneousLine is undefined in JSXTransformer-0.12.2.js
ReferenceError: Login is not defined JSXTransformer-0.12.2.js:
login.jsx
var Login = React.createClass({
render: function () {
return (
<div className="container"><h2>Library</h2>
<form role="form" action="first.ejs">
<textField/>
<div className="form-group">
<label for="email">UserId:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email"/>
</div>
<div className="form-group">
<label for="pwd">Password:</label>
<input type="password" className="form-control" id="pwd" placeholder="Enter password" />
</div>
<div className="checkbox">
<label><input type="checkbox"/> Remember me</label>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form></div>
);
}
});
text_field.jsx
var textField=React.createClass({
render: function(){
return (<input type="text" name="username"/>);
}
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="src/text_field.jsx"></script>
<script type="text/jsx" src="src/login.jsx"></script>
<script type="text/jsx">
React.render(<Login/>, document.body);
</script>
</body>
</html>
There is a typo in your last script tag. The type should be javascript, not jsx.
<script type="text/javascript">
React.render(<Login/>, document.body);
</script>
I am trying to use the angular form validations in my form for a blog post, and more specifically a ng-disabled form. For reasons I cannot figure out the submit button is not disabled, where as it should be unless all three input fields are valid. Thanks for the help.
this is my blog template
<div ng-controller='BlgoCtrl'>
<div class='container'>
<h1> Teewinot Blgo</h1>
<div class="row">
<div class='col-md-12'>
<form role='form' name='blgoPost' novalidate>
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' placeholder='Technologies of the Future' required><br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required></textarea><br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" class='form-control' placeholder='•••••••••••••••' required><br>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
</div>
</div>
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teewinot</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular-route/angular-route.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-app="Teewinot">
<ng-include src="'app/templates/partials/navbar.html'"></ng-include>
<ng-view></ng-view>
<!-- angular module defintion and reoutes -->
<script src="app/js/app.js"></script>
<script src="app/js/routes.js"></script>
<!-- controllers -->
<script src="app/js/controllers/blog.controller.js"></script>
</body>
</html>
This is my blog controller
angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
'use strict'
});
You're missing ng-model on every field of your form. Keep in mind when you mention ng-model on any form field at that time ng-model creates the extra objects inside form name object with that specific name attribute which then considered while form validation like $error, $valid, $invalid, etc.
As your form name is blgoPost, when angular compile this page,it internally creates the object inside the scope of the name of blgoPost. And the all the input fields which has name & ng-model assign to them gets added inside that blgoPost object. But if you don't mention ng-model to the form fields then it will never get added inside the blgoPost form object.
HTML
<form role='form' name='blgoPost' novalidate="">
<input name="first" />
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
<br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
<br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='•••' required="" />
<br/>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
Working Fiddle
I want to uncheck the two checkbox on startup, and allow user to select only one check box at a time. Can I do it only using from ng-... attribute?
I am trying the following code
<div style="border:1px solid">
<label><input type="checkbox" ng-checked="!Titleshine_check" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-checked="!blink_check" ng-model="Titleshine_check">Shine</label>
<br>
</div>
http://plnkr.co/edit/2BLssmNTB5r8LjeGZf65?p=preview
Here you got full example
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="border:1px solid">
select type:
<form>
<input type="radio" name="opt1" ng-change="radioValue" ng-model="radioValue" value="this" unchecked> this
<br>
<input type="radio" name="opt2" ng-change="radioValue" ng-model="radioValue" value="that" unchecked> that
</form>
<span ng-bind="radioValue"></span>
</div>
</body>
</html>
and js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.radioValue="empty";
});
If you really, really want the checkboxes you can do it like this:
http://plnkr.co/edit/ukDKjBZsp7AtY5UiIhBj?p=preview
<div style="border:1px solid">
<label><input type="checkbox" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-click="blink_check = !blink_check" ng-model="!blink_check" >Shine</label>
<br>
</div>