How to make form component submit using button in form?

Question

I have the following code where a text input box accepts an url and if it is valid it should create a display area and provide a nice preview of the url.

But I am not sure how to associate the submit from the button with the submit from the form.

import React, {useState} from 'react';
import './App.css';
import Microlink from '@microlink/react';
import { String } from 'core-js';
import Card from '@material-ui/core/Card';
import TextField from '@material-ui/core/TextField';
import Button from "@material-ui/core/Button";

function validURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

function App (){
  const [myurl, setMyurl] = useState("")
  const [display, setDisplay] = useState(true)

  const handleChange = (event) => {
    const url = event.target.value    
    var str = validURL(url)
    console.log(str)
    str ? setMyurl(String(url)) : setDisplay(false)
  }

  return (    
    <form>
      <TextField
        id="outlined-name"
        label="Name"        
        margin="normal"
        variant="outlined"
        onSubmit={event => handleChange(event)}        
      />
      <Button
        type="submit"
        variant="contained"                          
      >
       Submit
      </Button>

      {display ? 
      <Card>
      <Microlink url={myurl}/>;        
    </Card> : null}


    </form>

  )
}

export default App;

Brad Ball · Accepted Answer · 2019-06-16 15:18:50Z

2

You need to put the onSubmit inside the form tag like this. Also need to have a controlled form. Meaning, you need an onChange, I wrote it for you.

 return (    
    <form onSubmit={event => handleChange(event)} >
      <TextField
        id="outlined-name"
        label="Name"        
        margin="normal"
        variant="outlined"
        value={myurl}
        onChange={e => setMyUrl(e.target.value)}

      />
      <Button
        type="submit"
        variant="contained"                          
      >
       Submit
      </Button>

      {display ? 
      <Card>
      <Microlink url={myurl}/>;        
    </Card> : null}


    </form>

  )
}

export default App;

edited Jun 16, 2019 at 15:18

answered Jun 16, 2019 at 15:07

Brad Ball

6194 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alexander Staroselsky Over a year ago

That's not enough. They would also need at minimum a change handler on the TextField as well as value to ensure value of the input gets updated.

Brad Ball Over a year ago

yeah i didn't look at it close enough I made update

Zanam Over a year ago

So, submit in form is able to automatically figure that Button submit is married to them and it doesn't need any explicit mention anywhere ?

Brad Ball Over a year ago

yeah because on the button you have type="submit"

Collectives™ on Stack Overflow

How to make form component submit using button in form?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related