How do I get value from html input control? - html

I am trying to get the value from html input control and send it to my controller on my image click event. Here is the code snippet to capture an email ID and send it to another view.
<div id="div1">
<a href="<%= Url.Action("ActionName", "Controller", new {strEmailAddress = ????? }) %>">
<img alt="sign up" src="<%= ResolveUrl("~/media/signup_btn.png") %>" border="0" /></a>
</div>
<input name="Email address" type="text" value="Email address" />
How do I get the value from this input element?
Thanks

//try something like this using a javascript function
<html>
<head>
<script>
function WhatsMyValue(field)
{
alert("field:" + field.value);
}
</script>
</head>
<body>
<form name="f1">
<input type="text" onkeyup="WhatsMyValue(this);" name="text1">
</form>
</body>
</html>

link JQuery here
<script>alert($("#myCon").html());</script>
<input type="text" id="myCon" name="text1">

Related

I want to provide user authentication through firebase but sign in page is accepting invalid inputs

<script>
function save_user()
{
const uid = document.getElementById('user_id');
const userpwd = document.getElementById('user_pwd');
const btnregister=document.getElementById('btn-action');
//btnregister.addEventListener('click', e=>
//{
const email=uid.value;
const pass=userpwd.value;
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
console.log(error.Message);
});
firebase.auth().onAuthStateChanged(function(user) {
if(user) {
window.location='userpage.html';
}
});
}
</script>
<link href="page2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
<img src="images/5.jpg" alt="">
</div>
<div class="loginbox">
<img src="images/logo.jpg" class="user"/>
<form action="" method="post">
<p>Email</p>
<input type="text" name="" placeholder="Enter Email" id="user_id"/>
<p>Password</p>
<input type="password" name="" placeholder="......" id="user_pwd"/>
</br>
</br>
</br>
<input type="button" name="" value="Sign In" id="btn-action" onclick="save_user();">
Forgot Password
Register
</form>
</div>
</body>
</html>
I want to provide user authentication through firebase but sign in page is accepting invalid inputs.How to print an error message if the user is not present in Firebase authentication?
You may simple use html5 input regex to able correct email format into input:
<form action="" method="post">
<input id="emailAddress" type="email"pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/">
<input type="submit">
</form>

Submitting value depending on what button is clicked

Sorry I'm not sure how to phrase this properly
Is it possible to do this?:
Example I want to have 4 buttons/divs for the user to click on
Maybe with a form like this?
input value="Yes" name="response"
input value="No" name="response"
input value="Maybe" name="response"
input value="Later" name="response"
If the user clicks "Yes" then it will form submit that data with "Yes" to be stored in the database slot of "response"
So it's like 4 boxes with "Yes" "No" "Maybe" and "Later" which can be click by the user after which will be submitted like a form
Sorry once again as I'm lost as to how to do this(hopefully the solution is simple?)
Thanks in advance!
Hi i have one idea to do this With JQuery
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<input class="btn1" type="button" value="Yes" />
</div>
<div>
<input class="btn1" type="button" value="No"/>
</div>
<div>
<input class="btn1" type="button" value="Maybe"/>
</div>
<div>
<input class="btn1" type="button" value="Later"/>
</div>
<div id="display">
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function(e) {
e.preventDefault();
document.getElementById('display').innerHTML=$(this).val();
});
});
</script>
</body>
</html>
Fiddle link: https://jsfiddle.net/pranavadurai/jbxdbkLk/2/
There are two different ways you could approach this. A form can have multiple submit buttons, via <input type='submit' name='custom_name' .... You could also have a drop down (<select>) that the user selects from the options you present them, and have a separate submit button.
Examples
Multiple Submit Buttons
<form id="my_form" ...>
<!-- actual form contents -->
<input type="submit" name="submit_value" value="Yes" />
<input type="submit" name="submit_value" value="No" />
...
</form>
In this situation, the POST/GET data for submit_value would be set to whatever the user clicked.
Dropdown
<form id="my_form" ...>
<!-- actual form contents -->
<!-- drop down -->
<select name="my_option">
<option value="yes">Yes</option>
<option value="no">No</option>
...
</select>
<!-- normal submit button -->
<input type="submit" value="Submit" />
</form>
In this case, the POST/GET data for this form would be my_option for the choice you were asking about.
i will propose a solution evolving jQuery, HTML and some database
<html>
<head>
<title>Hi folk</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Here goes your database query
});
$("#btn2").click(function(){
//Here goes your database query
});
$("#btn3").click(function(){
//Here goes your database query
});
$("#btn4").click(function(){
//Here goes your database query
});
});
</script>
</head>
<div>
<div>
<input id="btn1" type="button" value="Yes" />
</div>
<div>
<input id="btn2" type="button" value="No"/>
</div>
<div>
<input id="btn3" type="button" value="Maybe"/>
</div>
<div>
<input id="btn4" type="button" value="Later"/>
</div>
</div>
</html>

How to display an onSubmit that results in a URL in an iframe on the same website?

I created a form in which you can enter a text
With onSubmit, this text creates a URL
I would like to have this website opened in an iframe on the same page where the form is.
What I've done:
<form onsubmit= "location.href = 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller'; return false; target="eBay";">
<input type="text" name="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"src="" width="90%" height="90%"></iframe>
I supposed that the target attribute would do the trick, but I still get redirected to the generated URL. What am I doing wrong? Thanks for any help :)
I have put whole code
<html>
<head>
<title>Please Rate if it helps</title>
<!-- PUT A PATH OF JQUERY LIBRARY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
function onSubmitCallIt() {
$("#eBay").attr("src", 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller');
}
</script>
</head>
<body>
<form>
<input type="text" id="score" name="score" placeholder="Copy Seller ID here">
<input type="button" value="Enter/Click" onclick="onSubmitCallIt();">
</form>
<iframe id="eBay" name="eBay" src="" width="90%" height="90%"></iframe>
</body>
</html>
Rate, If it helps...
function openWin(){
alert("in func");
var frame=document.getElementById("iFrame");
var sellID=document.getElementById("score").value;
var win="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=" + sellID + "&ftab=FeedbackAsSeller";
frame.src=win;
alert("done");
}
<form onsubmit="openWin()">
<input type="text" name="score" id="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"id="iFrame" src="" width="90%" height="90%"></iframe>

validation in angular coming up on page

I am using angularjs, were i have defined some routes and on the html page i have used some validations.
My html page looks like:
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
<span ng-show="loginForm.uName.$error.required">Username is required.</span>
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
When i run the page in browser, all the errors/validations are showing up on page load itself.
I would like the validation error to only come up, when there is any error on particular control and wants the button to be disabled, until and unless the form is fully valid.
index.html:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="../js/app.js"></script>
</head>
<body ng-app="test">
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
app.js:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '../partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '../partials/login.html',
controller: 'login'
});
});
your code should work as is. check out this plunker..
what you need is ng-app somewhere in your html
<html ng-app="plunker">
.
.
.
</html>

load external files using ajax/query

I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>