I've got some automation that is looking for a HTML data- tag (example: "data-foobar"), and I have a login.js so that:
<div className={styles.whiteBoard}>
<main className={styles.content}>
<div>
<div className={styles.spacer}></div>
<form onSubmit={e => submit(e)}>
<TextField
className={styles.input}
label="Username"
autoFocus
variant="outlined"
margin="normal"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</form>
</div>
</main>
where and how would one place a HTML data- tag in the above code?
You can use the inputProps object of the TextField to set the data attributes.
<TextField inputProps={{'data-foobar': 'foo bar'}}/>
Related
When I use a text-input type , i can just give it a value and use that, even on another page
example:
<input type="text" class="form-control" name="name" value="<?php echo $row['name'];?>">
Can I do the same with a textarea?
example :
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
This is my code in where I retrieve an existing row of information from a given ID. The info consists of a name, emailaddress and comments :
<form method="post">
<div class="row gy-2 text-left">
<div class="row">
<div class="col-auto gy-2">
<label>Name</label> <br>
<input type="text" class="form-control" name="name" value="<?php echo $row['naam'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Email address</label><br>
<input type="email" class="form-control" name="email" value="<?php echo $row['email'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Tell me about it</label><br>
<style>
textarea {resize: none;}
</style>
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
</div>
<div class="row">
<div class="col-auto gy-3">
<button class="btn edit btn-info border border-dark" name="Update">Update</button>
</div>
</div>
</div>
</form>
For the textarea element, it goes between <textarea> and </textarea> tags:
<textarea><?php echo $row['comments'];?></textarea>
The <textarea> element does not use an HTML attribute named value like the <input> element does.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
However, when the HTML markup which contains a textarea element is parsed by the browser, an HTMLTextAreaElement object is created. This DOM element object, which represents the state of the textarea element on the web page does have a JavaScript object property named .value, which gives access via JavaScript to the text which the textarea element contains.
This JavaScript code logs the text that is contained in a textarea element:
console.info(document.querySelector('textarea').value);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
I got redirected after I submit the form, and I want to remain on the same page. I am not sure why I got redirected, I am not using &redirectTo for this.
I try some things but nothing worked till now.
[[!FormIt?
&hooks=`spam,email,FormItSaveForm,successMess`
&formName= `Contact Form`
&emailTpl=`emailChunkTpl`
&emailTo=`email#gmail.com`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<input type="hidden" name="nospam:blank" value="" />
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<span class="error-message error" > [[!+fi.error.input-name]] </span>
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
<span class="error-message error" >[[!+fi.error.input-email]] </span>
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
[[+placeholder]]
</div>
</div>
</from>
As in my answer on your other post, you should remove all the hooks and try one at a time (after you've cleaned up the markup for this form).
And what is successMess? Is that a custom snippet you've made? It's not a Formit hook that I have heard of. If it's your custom snippet you should paste the code into your question so we can see it.
I am using Angular 7. I don't know where the error occurs in this form. It always shows form is not a known property of this method. Where did I make a mistake in the below code? I am getting this error.
Can't bind to 'formGroup' since it isn't a known property of 'form'
<form [formGroup]="newClientForm">
<fieldset>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter name" class="form-control" name="name" formControlName="name" #name required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter email" class="form-control" name="email" formControlName="email" #email required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="password" class="st0" placeholder="Password" class="form-control" name="password" formControlName="password" #password required="required" pattern=".{6,}"
title="Minimum 6 characters required" autocomplete="off" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter mobile" class="form-control" name="mobile" formControlName="mobile" #mobile required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<!-- <input type="submit" value="Register" /> -->
<button type="submit" class="st1" value="register" (click)="register()">Register</button>
</div>
<br>
<div class="row" style="text-align:center">
<div class="forgot">
Login?
</div>
</div>
<br>
</fieldset>
</form>
Try this stackblitz link reactive form. I have created a similar form using your html code and have run it.
Things i did were very basics:
Imported ReactiveFormsModule from #angular/forms
and have created a formgroup in ts file and added all controls you used in your html.
It runs well.
Let me know if your issue is different from the solution provided.
Hello I need to put searching option and value in the URL. I know it's very basic but I have never implement the search function before ever always used the templates one but this time I need to use it. below is my code please help me.
Right now I am getting this in the link
list/%7Boption%7D/%7Bvalue%7D
but I want this in the link list/Hello/thisishelloworld or this may be list/option?Hello/value?thisishelloworld but I think I can get the second option using Get instead of Post method
AND YA ITS IN LARAVEL 5.2
<center>
<div class="form-group">
<label>Select your option from below</label>
<select class="form-control" id="options" name="options" style="width:100%" type="checkbox">
<option>Hello</option>
<option>World</option>
<option>it's Me</option>
</select>
</div>
<div class="col-md-4" id="value">
<div class="panel panel-warning">
<div class="panel-heading">
Enter your Search below
</div>
<form role="form" action="/list/{option}/{value}" method="post">
{{ csrf_field() }}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="{{ value }}" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
</div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function hide() {
$("#value").hide();
$("#h").hide();
$("#search").hide();
}
function show() {
$("#value").show();
$("#h").show();
$("#search").show();
}
function initHandlers() {
$("#options").change(function() {
show();
});
}
hide();
initHandlers();
</script>
Laravel 5. 2
Step 1:
First you have to create a route.
Routes.php :
Route::get('/list', function(){
// do process
})->name('search');
HTML :
something.blade.php :
{!! Form::open('search', ['route' => 'search', 'method' => 'GET']) !!}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="search" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
I'm using Joomla jQuery Registration extension which comes without any kind of botcheck feature and I'd like to add it but I don't know how I'd go about doing that. Here is the extension's code:
<?php
/**
* #title jQuery Dropdown Registration Module
* #version 1.7.2
* #package Joomla
* #author http://www.minitek.gr (Ioannis Maragos)
* #copyright Copyright (C) 2011 Minitek. All rights reserved.
* #license GNU General Public License version 2 or later.
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php JHTML::_('behavior.formvalidation'); ?>
<?php /*<link rel="stylesheet" href="modules/mod_dropdown_registration/css/style.css" type="text/css" /> */?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2" type="text/javascript"></script>
<script src="modules/mod_dropdown_registration/js/register.js" type="text/javascript"></script>
<?php
$user = JFactory::getUser();
$myID = $user->id;
if ($myID == 0) {
?>
<div id="registerContainer">
<span>Registracija</span><em></em>
<div style="clear:both"></div>
<div id="registerBox">
<form id="member-registration" action="<?php echo JRoute::_('index.php?option=com_users'); ?>" method="post" class="form-validate">
<fieldset id="reg-body" class="userdata">
<div class="reg-field">
<label for="jform_name" id="jform_name-lbl">
Ime i prezime:
</label>
</div>
<div style="float:left;">
<input type="text" maxlength="50" class="inputbox required" value="" size="40" id="jform_name" name="jform[name]"/><br/>
Molimo Vas da unesete stvarno ime i prezime!
</div>
<div style="clear:both;"></div>
<div style="height: 7px;"></div>
<div class="reg-field">
<label for="jform_username" id="jform_username-lbl">
Korisničko ime:
</label>
</div>
<div style="float:left;">
<input type="text" maxlength="25" class="inputbox required validate-username" value="" size="40" name="jform[username]" id="jform_username"/>
</div>
<div style="clear:both;"></div>
<div class="reg-field">
<label for="jform_password1" id="jform_password1-lbl">
Lozinka:
</label>
</div>
<div style="float:left;">
<input type="password" value="" size="40" name="jform[password1]" id="jform_password1" class="inputbox required validate-password"/>
</div>
<div style="clear:both;"></div>
<div class="reg-field">
<label for="jform_password2" id="jform_password2-lbl">
Potvrdite lozinku:
</label>
</div>
<div style="float:left;">
<input type="password" value="" size="40" name="jform[password2]" id="jform_password2" class="inputbox required validate-password"/>
</div>
<div style="clear:both;"></div>
<div class="reg-field">
<label for="jform_email1" id="jform_email1-lbl">
E-mail:
</label>
</div>
<div style="float:left;">
<input type="text" maxlength="100" class="inputbox required validate-email" value="" size="40" name="jform[email1]" id="jform_email1"/>
</div>
<div style="clear:both;"></div>
<div class="reg-field">
<label for="jform_email2" id="jform_email2-lbl">
Potvrdite e-mail:
</label>
</div>
<div style="float:left;">
<input type="text" maxlength="100" class="inputbox required validate-email" value="" size="40" name="jform[email2]" id="jform_email2"/>
</div>
<div style="clear:both;"></div>
<br/>
<font color = "#FF0000">Sva polja su obavezna!</font><br/>
<br/>
<button type="submit" class="button validate">Registracija</button>
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="registration.register" />
<?php echo JHtml::_('form.token');?>
</fieldset>
</form>
</div>
</div>
<?php
}
?>
I'm sorry if doesn't come out as a code block but the instructions are unclear. Anyhow - what I'd like to do is add a text field before the Submit button which will have something like a "What is 3 plus 2" label in front of it, and the submit won't work if the answer is incorrect. Is there any way to do this without editing Joomla core files?
You could user jQuery to add your label and input elements to the page. Then bind a .click() listener to the submit button that checks the validity of your answer before the form can be submitted. Do not that this is not a very secure bot checking solution. To add an extra level of security you might consider changing the 2 and 3 to two and three and also perhaps alternate between plus, minus, multiply and divide and store the answers and question combos in your Joomla session instead of calculating it all in JS.