I'm trying to basically grab whatever the user inputs in the username form and then use it in URL; if the input is "hello," the URL would end with /hello. Would I have to use js to get it done?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="o ">
<div class="col-sm-offset-2 col-sm-10">
<a class = "btn btn-default" href=inputUsername> Sign in / Sign up</a>
</div>
</div>
</form>
Yes, you can use JavaScript to grab the username. As mentioned in your question comments you can update your form to include an onsubmit attribute where you can instantiate a function to grab the name.
If you wish to use the inputUsername to define a redirect location onsubmit, you may need to use jQuery for the `preventDefault()' method (discussed here) to interpose on the standard action form submission.
<form class="form-horizontal" role="form" onsubmit="onFormSubmit()">
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="o ">
<div class="col-sm-offset-2 col-sm-10">
<a class = "btn btn-default" href=inputUsername> Sign in / Sign up</a>
</div>
</div>
</form>
Then do something like this:
<script>
function onFormSubmit() {
var inputUsername = document.getElementById("inputUsername").value;
window.location = "/" + inputUsername;
}
</script>
Related
When user click submit, it should open http://127.0.0.1:5000/default/+UserInput. But the giveme() function returns "?keyword=UserInput" instead of "UserInput". How can I get a correct URL?
<form id="myform" class="form-horizontal" action="http://127.0.0.1:5000/default/" +
giveme() method="get" >
<div id="searchkeyword">
<div class="form-group">
<label for="keyword" class="col-sm-3 control-label">Enter keyword</label>
<div class="col-sm-4">
<input type="text" name="keyword" id="keyword" class="form-control">
<br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Submit ยป</button>
<span class="small-paddingleft">*Required</span>
</div>
</div>
</form>
<script>
function giveme(){
document.getElementById("keyword").value;
}
</script>
Here is a function that gets what you want:
function giveme() {
const params = new URLSearchParams(window.location.search);
document.getElementById("keyword").value = params.get('keyword');
}
i need puppetter page.type css select.
<div class="preloader">
<div class="cssload-speeding-wheel"></div>
</div>
<section id="wrapper" class="login-register">
<div class="login-box">
<div class="white-box">
<form class="form-horizontal form-material" id="loginform" method="post">
<h3 class="box-title m-b-20">Sign In</h3>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" name="login-username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" required="" name="login-password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-12">
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button type="submit" name="doLogin" class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Log In</button>
</div>
</div>
<div class="form-group m-b-0">
i need username,password and dologin.
page.type("input[#placeholder='Username']", 'MYUSERNAME');
This code not working.. pls help me
There's no need for the # in your selector and placeholder is a pseudo element. You could use another attribute for your selector:
page.type("input[name='login-username']", 'MYUSERNAME');
Although I'd suggest giving your elements IDs as this will give better selector performance:
<input id="username" class="form-control" type="text" required="" name="login-username" placeholder="Username">
and then
page.type('#username', 'MYUSERNAME');
I think this will be helpful for you for solving your problem.I have tried to make it more simple understandable.So that you can be able to clarify your concept.
/**
* seperate your field information
*
*/
let loginAccount ={
username:"input[name='login-username']",
password:"input[name='login-password']",
loginSubmit:".btn"
}
/** Enter username */
await page.waitForSelector(loginAccount.username);
await page.click(loginAccount.username);
await page.keyboard.type('krdheeraj51');
/** Similiarly for login password */
await page.waitForSelector(loginAccount.password);
await page.click(loginAccount.password);
await page.keyboard.type('enter your password');
/** click your submit button */
await page.waitFor(2000);
await page.waitForSelector(loginAccount.loginSubmit);
await page.click(loginAccount.loginSubmit);
enter code hereI have an issue with my html. I am trying to save an input to my localstorage. For some reason, whenever I inspect my website I don't see the word I typed in my field. In other words it is not loading the input to my localstorage.
I am new to html and javascript and I am hoping you guys can help me out. I'm providing a picture to demostrate what I am trying to approach.
function getInput(){
var nameInput = document.getElementById('inputName').value;
localStorage.setItem('text', dataInput);
var dateInput = document.getElementById( 'inputDate').value;
localStorage.setItem('text1', dateInput);
}
<form class="form-horizontal">
<fieldset>
<legend>Endorse me</legend>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button onCLick="getInput()" type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</fieldset>
</form>
I am newbie to angular JS and i have created a form which is
HTML
<div data-ng-controller="ReservationController"
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10">
<label>Guest Name</label>
<input type="text" class="form-control" placeholder="" ng-model="res_guest_name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Phone</label>
<input type="phone" class="form-control" ng-model="res_member_phone">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>FAX</label>
<input type="phone" class="form-control" ng-model="res_member_fax">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Email</label>
<input type="email" class="form-control" ng-model="res_member_email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<button type="submit" class="btn btn-success" ng-click="res_save()">Save Changes</button>
</div>
</div>
</form>
</div>
CONTROLLER
function ReservationController($scope, $http, $cookieStore,$location,$filter) {
$scope.res_save = function()
{
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
My form gets submitted even after the required fields are left empty. it shows the error, then it gets submitted.
Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)
Use ng-disabled="myForm.$invalid"
where myForm is the name field on form
<form class="form-horizontal" name="myForm" role="form">
<button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>
If you don't want the button to be disable till then you can use
<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>
And in controller
$scope.res_save = function(valid)
{
if(valid){
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
You are not checking for Form valid state before saving it , don't expect angular to magically stop saving when form is invalid.
You should look into the documentation for ng-submit. If you move the res_save function into an ng-submit on the form (and removed the ng-click on the submit input) it will validate against required fields, prevent execution of the function until they are valid.
I want to disable all the form components so that it can't be edited when view button is clicked.
this is my form
<form action="#" class="form-horizontal" >
<div class="form-group">
<label for="fieldname" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="fieldhname" class="col-md-3 control-label">House name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
</div>
</div>
<div class="col-md-3"></div>
</form>
and this is my button
<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>
Rather than handling it at per-field level, you can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.
you can use fieldset tag by surrounding your buttons with a fieldset and using ng-disabled attribute:
<form action="#" class="form-horizontal" >
<fieldset ng-disabled="isClicked">
<!--your form here --!>
</fieldset>
</form>
now all that left is in the view(newItem) function do:
$scope.view = function(newItem){
$scope.isClicked = true;
// Your code here and set it to false when your are done with it
}
You could use an overlay and have a ng-show on it or you could add to each input ng-disabled
Set a scope variable when the view button is clicked.
Use ng-disabled in combination with the scope variable to disable the fields.