So here is what I am trying to do,
Lets say there is my url
http://myurl.com/watch?v=**XYZ**&caption=**ABC**&link=**http://google.com**
I want the text in bold as input from user e.g.:
**v**= textfield1
**caption**= textfield2
**link**= textfield3
SUBMIT button
After clicking submit a text should be generated "click here" which will should open generated url in new window.
http://myurl.com/watch?v=**XYZ**&caption=**ABC**&link=**http://google.com**
The best option is to use JavaScript.
You can take your values from textfield on submit (check here) and create your url.
After you car redirect to your page using window.location
Ι created a page that makes that you want.
index.php
<html>
<head>
<title>My Page</title>
<script type="text/javascript">
function takevalues()
{
var value1 = document.getElementById('textfield1').value;
var value2 = document.getElementById('textfield2').value;
var value3 = document.getElementById('textfield3').value;
window.location = "http://myurl.com?value1="+value1+"&value2="+value2+"&value3="+value3;
}
</script>
</head>
<body>
<form name="myform" action="javascript:takevalues()" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" id ="textfield1"> <br>
<input type="text" size="25" id ="textfield2"> <br>
<input type="text" size="25" id ="textfield3"> <br>
<br><br>
<input type="submit" size="value" id ="Submit">
</div>
</form>
</body>
</html>
Related
when submit button is clicked the input data is disappear in html How can I rectify the problem?
<html>
<head>
<title>hhhh</title>
</head>
<body>
<form id="form">
<input type="text" id="username" placeholder="username" />
<input type="submit" id="btn" />
</form>
</body>
<script>
var a = document.getElementById("username");
var b = document.getElementById("btn");
b.addEventListener("click", () => {
console.log(a.value);
});
</script>
</html>
I am using JEASYUI for my forms. I have an edit form with a textbox (pqty) and I want to set its max attribute to the value of another textbox (sqty), but I don't know if it's possible. I know you can set it just by using specific number but I need the variable. Something like data-options="max:*sqty value here*?
<div class="fitem">
<label>PO Qty:</label>
<input name="pqty" class="easyui-numberbox" data-options="required:true, max:***">
</div>
<div class="fitem">
<label>SO Qty:</label>
<input type="hidden" name="sqty">
<input name="sqty" disabled>
</div>
Use the javascript method for creating a numberbox to redefine an existing numberbox with new parameters (http://www.jeasyui.com/documentation/index.php).
In the following demo you can set a new max value in SO Qty. Tabbing out will then change the settings for PO Qty, including reducing its value if it is higher than the new maximum.
$(function() {
$("#sqty").on('change', function() {
newMax = $(this).val() * 1; // * 1 makes it numeric rather than a string
$('#pqty').numberbox({
max: newMax
});
});
});
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div id="me">
<div class="fitem">
<label>PO Qty:</label>
<input id="pqty" name="pqty" class="easyui-numberbox" data-options="required:true, max:22">
</div>
<div class="fitem">
<label>SO Qty:</label>
<input id="sqty" name="sqty">
</div>
</div>
I am very new to AngularJS and trying to understand how AngularJS can use along with ASP.NET-MVC5 application. In my first attempt I want to run AngularJS app from basic HTML page (in my case index.html) where app holding form template in html format, also I have add global variable, controller, service via factory and directives but I cannot manage to run this app 'employee-form' inside index.html. In order to test if angularJS is initialize and working properly, I have added very basic angularjs code inside in html and it works.. I am not sure where I have done mistake
AngularFormsApp.js (global variable)
var angularFormsApp = angular.module('angularFormsApp', []);
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The ideal employee, just don't mess with him",
department: "IT Development",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E', //E stands for element, meaning we want to use this directive as element
templateUrl: '~/App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html (form)
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<input type="text" id="notes" name="notes" class="form-control" />
</div>
<div class="form-group">
<label for="department">Department</label>
<select id="department" name="department" class="form-control">
<option>Engineering</option>
<option>Marketing</option>
<option>Finance</option>
<option>IT Development</option>
</select>
</div>
<br/>
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />perk Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" />perk Six Weeks</label>
</div>
<input type="submit" value="Submit Form" />
index.html
<!DOCTYPE html>
<html>
<head >
<title>Angular JS</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
</head>
<body ng-app="angularFormsApp">
<div class="AngularJSTestBlockCode">
<div>
<input type="text" ng-model="name" />
<br />
<h1>Hello {{name}}</h1>
</div>
<br /><br />
<div>
{{458/8}}
</div>
</div>
<div>-------------------------------------------------------</div> <br/><br/>
<div ng-controller="efController">
<employee-form>????????????????????
</div>
You need a route provider to render your html page. Here is your example
.config(['$stateProvider',function($stateProvider) {
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('dashboard.create-example',{
templateUrl:'views/example/create.html',
url:'/create-example',
controller:'Ctrl'
})
then in your controller(efController.js) put this $state.transitionTo('dashboard.create-example'); to render your page to any html you want
Instead of styling the data-valmsg-summary produced by Html.ValidationSummary() in a custom way, I would like to just show the box with the twitter bootstrap style applied to it whenever the field validation fails. How would I go about doing this? Currently my markup looks like this:
..
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div class="container">
<div class="row-fluid">
<br />
<br />
<br />
<br />
</div>
<div class="row-fluid">
<form class="navbar-form pull-right" action="/Login?ReturnUrl=%2F" method="post">
<h3 class="modal-header">Please sign in</h3>
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" class="input-large" placeholder="Username">
<input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Remember me
</label>
<button type="submit" class="btn btn-danger">Sign in</button>
<br />
<br/>
<div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >
<span class="close pull-right" data-dismiss="alert">×</span>
<strong>Ooops!</strong> You seem to be missing something:
<ul>
<li style="display: none"></li>
</ul>
</div>
</form>
</div>
</div>
I've tried adding the style="display: none" to my div, but that does not seem to do the trick either.
I was looking for something else and stumbled on this. Thought I would post the answer for the next person since I am 5 months late. Add to your document ready.
//I dont want to validate my ajax forms take that if statement out if you want 2.
if ($('form:not([data-ajax="true"])').length != 0) {
var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;
settings.submitHandler = function (form) {
//success
form.submit();
};
}
$("form").bind("invalid-form.validate", function (form, validator) {
var errors = validator.numberOfInvalids();
var message = "<ul>";
//loop thru the errors
for (var x = 0; x < validator.errorList.length; x++) {
var $group = $(validator.errorList[x].element).parent().parent(); //gets bootstrap class of form-group
var $element = $(validator.errorList[x].element); // gets the element to validate
var elementMessage = validator.errorList[x].message; // gets the message
$group.addClass("has-error"); // adds the bootstrap class has-error to the group
$element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover
message += "<li>" + elementMessage + "</li>"; //appends message to list
}
message += "</ul>";
// Function I have to add alert to the page, but basically you can do whatever you want with the message now.
RegisterError("There was some errors with your submission!", message, false);
});
Here is an example HTML page that demonstrates the issue:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="cp">
<form id="form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Test 1:</legend>
<input type="radio" name="r1" id="r1a" value="none" checked="checked" /><label for="r1a">A</label>
<input type="radio" name="r1" id="r1b" value="detail"/><label for="r1b">B</label>
<input type="radio" name="r1" id="r1c" value="measure"/><label for="r1c">C</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$(document).ready(function() {
var form = $('#form');
form.append('<div data-role="fieldcontain">');
form.append(' <fieldset data-role="controlgroup" data-type="horizontal">');
form.append(' <legend>Test 2:</legend>');
form.append(' <input type="radio" name="r2" id="r2a" value="none" checked="checked" /><label for="r2a">A</label>');
form.append(' <input type="radio" name="r2" id="r2b" value="detail"/><label for="r2b">B</label>');
form.append(' <input type="radio" name="r2" id="r2c" value="measure"/><label for="r2c">C</label>');
form.append(' </fieldset>');
form.append('</div');
form.trigger('create');
});
</script>
</body>
</html>
Save this page and load it in a borwser. You will see that the "Test 1" radio list comes up horizontal (as it should because of the data-type="horizontal" attribute). However the "Test 2" radio list, which is added dynamically, comes up vertically, which is the default setting. It seems the data-type="horizontal" has no effect on the dynamically created radio list.
Is there a refresh or event anyone knows about which I should trigger somewhere in the DOM to get this to work?
The problem is the way you are adding your new elements to the form. If you change your javascript function to this you'll see that it works:
$(document).ready(function() {
var form = $('#form');
var newElement = '';
newElement += '<div data-role="fieldcontain" data-type="horizontal">';
newElement += ' <fieldset data-role="controlgroup" data-type="horizontal">';
newElement += ' <legend>Test 3:</legend>';
newElement += ' <input type="radio" name="r3" id="r3a" value="none" checked="checked" /><label for="r3a">A</label>';
newElement += ' <input type="radio" name="r3" id="r3b" value="detail"/><label for="r3b">B</label>';
newElement += ' <input type="radio" name="r3" id="r3c" value="measure"/><label for="r3c">C</label>';
newElement += ' </fieldset>';
newElement += '</div>';
form.append(newElement);
form.trigger('create');
});
Think about it this way: Each time the append() function is used the browser attempts to add whatever you've given it to the DOM. But because you have broken your elements across different calls to append() the browser has to try to make sense of it. So when you have this:
form.append('<div data-role="fieldcontain">');
The browser sees that you've left off a closing div tag and tries to fix it for you by adding it. This means your next call to append() will not go inside the div you just added but after it because the browser has automatically closed it for you.
You should add complete, well-formed elements to avoid this issue.