I have a form that take only one user input. Also i used react formik for the form and yup for validation.
I want the user to be taken to next page after the input is validated.
Validation is working but on click of the next page button does not take to next page.
Here is my code;
.
.
.
const Home = () => {
const navigate = useNavigate()
const initialValues = {
phoneNumber: ''
}
const onSubmit = values => {
console.log('form data', values)
navigate.push("/NextPage")
}
const validationSchema = Yup.object({
phoneNumber: Yup.string()
.min(11, 'Invalid phone number format!')
.max(11, 'Invalid phone number format!')
.required('Please enter your phone number!'),
})
return (
{/*...*/}
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}>
<Form className='phone-input'>
<Field
type='tel'
id='phone-input'
name='phoneNumber'
placeholder='0000-000-0000'
/>
<ErrorMessage name='phoneNumber'>
{
(errorMsg) => <div className='error'>{errorMsg}</div>
}
</ErrorMessage>
<button type='submit' id="phoneBtn" onClick={onSubmit}>Next Page</button>
</Form>
</Formik>
</div>
)
}
export default Home
I don't think you need to do .push() to navigate. Just use-
navigate("/NextPage")
Related
i´m new at programming..
I'm coding a form that has a Select list of Options, which come from an array of objects (i named it initialState for useReducer use).
Now i have to use the useReducer hook to update those options when the form is submitted. The submitted option has to be eliminated after submitting.
I just started coding the hook, but i really don´t know what to do...
The app is rendering OK, and the "placeholder" initial state is showing the first option value. I'm okay with that.
Can you help me plase? Thanks!
import { useState, useReducer } from "react";
const handleSubmit = (e) => {
e.preventDefault();
}
const BookingForm = () => {
const initialState = [
{value: "17:00"},
{value: "17:30"},
{value: "18:00"},
{value: "18:30"},
{value: "19:00"},
{value: "19:30"}]
const reducer = (state, action) => {
?????? }
const [state, dispatch] = useReducer(reducer, initialState);
const [option, setOption] = useState({initialState});
return(
<div className="form_div">
<form className="form" onSubmit={handleSubmit}>
<label htmlFor="res-time" className="label">Choose time
<select id="res-time " className="input"
value={option}
onChange={(e) => setOption(e.target.value)}>
{initialState.map(item => {
return (<option key={item.value} value={item.value}>{item.value}</option>);
})}
</select>
</label>
<input type="submit" value="Make Your reservation" className="button" onClick={() => dispatch({type: "selected option"})}/>
</form>
export default BookingForm;
I have the invisible reCAPTCHA set up, but it doesn't seem to want to call my callback function. My form looks like:
<form id='ContactAgentForm' name='ContactAgentForm' class='custom-form-widget-form standard_form' action='contact_agent' listing_id=1233445>
...
<div class='field captcha-field recaptcha_field' >
<div id='g-recaptcha-div' class="g-recaptcha" ></div>
</div>
...
<div class="field button-field">
<button class="button button-primary"><span>Send</span></button>
<a class="button button-cancel btn-close" href="#cancel"><span>Cancel</span></a>
</div>
</form>
In the javascript, I want to handle the fact that there might be multiple forms on the page, so I create a list of all the forms. For each form, I attach/render the reCAPTCHA logic, attaching my callback with the form passed as a parameter:
<script>
var $form_list = jQuery("form.custom-form-widget-form");
var onFormPageSubmit = function(token, $form ) {
console.log("Got here! ", token );
var field = $form.find('.g-recaptcha-response')[0];
field.value = token;
$form[0].submit();
};
var onloadCallback = function() {
$form_list.each( function() {
var $form = jQuery(this);
var $recaptcha = $form.find( ".g-recaptcha" );
if ( $recaptcha.length )
{
var recaptchaId = grecaptcha.render($recaptcha[0], {
'callback': function (token) { onFormPageSubmit(token, $form); },
'sitekey': "{$captcha_config.invisible_captcha_site_key}",
'size': 'invisible',
'badge': 'inline'
});
$form.data("recaptchaid", recaptchaId);
}
});
};
</script>
And just below that, I load the recaptcha/api.js file:
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback"></script>
With some judicial 'console.log' statements, we get through all of the code EXCEPT for the callback (onFormPageSubmit). The "protected by reCAPTCHA" logo is there, but it seems that the form is just submitted, ignoring the reCAPTCHA call altogether.
All help appreciated.
Somewhere along the line, the validation function for the form was lost (it's in another file). The validation function was attached to the button, and it executed something like this:
$submit_button.on( 'click', function( event ) {
event.preventDefault();
// get the recaptchaid from form data
var $recaptcha_id = $form.data( "recaptchaid" );
if ( $recaptcha_id != undefined )
{
grecaptcha.execute($recaptcha_id);
}
} );
The "grecaptcha.execute" is the important thing - this is what triggers the actual reCAPTCHA call.
In my departments.component.html, I have this:
Focus on the #form and calling of addDepartment(form.formValues)
<app-dialog-form *ngIf="showDialogBox" [(showDialogBox)]="showDialogBox" #form [values]="department">
Register Department
<div class="action" action>
<button class="ui button basic" (click)="onToggleDialogBox()">Cancel</button>
<button class="ui button primary medium" (click)="addDepartment(form.formValues)">Save</button>
</div>
</app-dialog-form>
The getting of values in my formValues is this:
get formValues(): any {
let data;
data = this.dialogForm.value;
return data;
}
And here is my code for addDepartment()
addDepartment(department: Department) {
console.log(department.name);
if (typeof department === 'object') {
this.departmentService
.registerDepartment(department)
.subscribe(
res => { alert(res);
//this.goBackToDepartmentListPage();
},
error => alert(error)
)
}
}
But everytime, I submit the form values and try printing in the console the input, I get this error
Cannot read property 'value' of undefined at
DialogFormComponent.get [as formValues]
I need to integrate the mail chimp api with core php I tried more type of codes but not working. Finally, I found the below code. I have created an api key with mailchimp, likewise campaigns, template and list in the mailchimp.
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#subscribe').submit(function() {
if (!valid_email_address($("#email").val()))
{
$(".message").html('The email address you entered was invalid. Please make sure you enter a valid email address to subscribe.');
}
else
{
$(".message").html("<span style='color:green;'>Adding your email address...</span>");
$.ajax({
url: 'subscribe.php',
data: $('#subscribe').serialize(),
type: 'POST',
success: function(msg) {
if(msg=="success")
{
$("#email").val("");
$(".message").html('<span style="color:green;">You have successfully subscribed to our mailing list.</span>');
}
else
{
$(".message").html('The email address you entered was invalid. Please make sure you enter a valid email address to subscribe.');
}
}
});
}
return false;
});
});
function valid_email_address(email)
{
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
return pattern.test(email);
}
</script>
<?php
$api_key = "key";
$list_id = "id";
require('inc/MAPI.class.php');
$Mailchimp = #new Mailchimp( $api_key );
echo bool($Mailchimp);
//$Mailchimp_Lists = #new Mailchimp_Lists( $Mailchimp );
//$subscriber = $Mailchimp_Lists->subscribe( $list_id, array( 'email' => htmlentities($_POST['email']) ) );
if ( ! empty( $subscriber['leid'] ) ) {
echo "success";
}
else
{
echo "fail";
}
?>
<div class="message"></div>
<form role="form" method="post" id="subscribe">
<input type="email" id="email" name="email" placeholder="you#yourself.com" value="">
<button type="submit">SUBSCRIBE</button>
</form>
This is my code, but it's not returning, errors only. Please help me.
How do I do that in symfony?
http://dorward.me.uk/tmp/label-work/example.html
When I click into the input field username. The text disappears. If I don't enter nothing and click somewhere else the text is comeing up again. How do I do that in symofny in lib/forms/.
Thanks for an advice!
Craphunter
This isnt symfony - its javascript ... just take a look at the source (uses jQuery)
HTML:
<div class="slim-control">
<label for="username"> Username </label>
<input name="username" id="username">
</div>
<div class="slim-control">
<label for="password"> Password </label>
<input name="password" id="password" type="password">
</div>
JavaScript:
(function () {
var nonEmpty = "non-empty";
var inputs = jQuery('.slim-control input');
var setLabelStyle = function setLabelStyle () {
var label = jQuery(this);
if (label.val().length) {
label.addClass(nonEmpty);
} else {
label.removeClass(nonEmpty);
}
};
inputs.focus(function () {
jQuery(this).addClass(nonEmpty);
});
inputs.blur(setLabelStyle);
inputs.each(setLabelStyle);
}());
So if you want to do this - you would need to add the javascript to the template (indexSuccess.php) for example - you would probably need to modify the ids / classes to meet your local needs
Updated
You could create the following form - this would match the above form (untested):
$this->form = new sfForm();
$this->form->setWidgets(array(
'username' => new sfWidgetFormInputText(),
'password' => new sfWidgetFormInputPassword()
));
Creating forms (indeed all of Symfony) is very well documented here -> http://www.symfony-project.org/gentle-introduction/1_4/en/10-Forms
'input' => new sfWidgetFormInputText(array(), array('size' => '100', 'maxlength' => '255', 'value' => 'Some text', 'onblur' =>"if(this.value == '') { this.value='Some text'}", 'onfocus' =>"if (this.value == 'Some text') {this.value=''}")),
This is much shorter! Be careful that "Some text" is identical!
If you need to pass more, take a look to SetWidgetsHtml in Symfony form: (slide down)
http://www.symfony-project.org/forms/1_4/en/01-Form-Creation