prevent page from refreshing on form submit

[carlarenee]

We're having an issue where we don't want the page to refresh when we submit a form. We've tried several work arounds but really need some advice. The reason we're using a form in the first place is that we're trying to pass a URL as a req.param, so we followed Bobby's advice to use a form and send it as a POST. Now we're running into the problem of the page reloading on submit, so it's changing our image. Some things we've tried using:

-event.preventDefault() -making the form a button rather than a form -onSubmit="return false'

Bobby - @gittheking Jason - @jasonseminara Trevor - @trevorpreston Rafa - @rapala61 Irwin - @irwintsay

[gittheking]

@carlarenee please attach the code snippet in question.

[carlarenee]

Bobby - @gittheking Jason - @jasonseminara Trevor - @trevorpreston Rafa - @rapala61 Irwin - @irwintsay

getVisionData(object) { console.log(object.value) object.value = roverImage fetch(/vision, { method: 'post' }) .then(r => r.json()) .then((data) => { this.setState({ visionText: data }) }) .catch(err => console.log(err)) }

We're also struggling with loading a random image... we're hoping for some help, we wrote a randomize function for dates to add in the url, and we keep getting the same image back:

function getRoverImages(req, res, next) {

const ROVER_KEY = process.env.ROVER_KEY; const month = Math.floor(Math.random() 12) + 1; const day = Math.floor(Math.random() 28) + 1;

fetch(https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-${month}-${day}&api_key=${ROVER_KEY}) .then(r => r.json()) .then((result) => { res.rover = result; console.log('the fetch for rover is', result); next(); }) .catch((err) => { res.err = err; next(); }); }

[gittheking]

Commenting to formant markdown...

getVisionData(object) {
  console.log(object.value)
  object.value = roverImage
  fetch(/vision, {
  method: 'post'
  })
  .then(r => r.json())
  .then((data) => {
    this.setState({
      visionText: data
    })
  })
  .catch(err => console.log(err))
}

We're also struggling with loading a random image... we're hoping for some help, we wrote a randomize function for dates to add in the url, and we keep getting the same image back:

function getRoverImages(req, res, next) {

  const ROVER_KEY = process.env.ROVER_KEY;
  const month = Math.floor(Math.random() * 12) + 1;
  const day = Math.floor(Math.random() * 28) + 1;

  fetch(https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-${month}-${day}&api_key=${ROVER_KEY})
  .then(r => r.json())
  .then((result) => {
    res.rover = result;
    console.log('the fetch for rover is', result);
    next();
  })
  .catch((err) => {
    res.err = err;
    next();
  });
}

[carlarenee]

Oops, we're trying another approach and still having a POST failure, 404 not found:

getVisionData(object) {
   console.log('^^^^^^^^^', object)
   fetch(`/vision`, {
     method: 'post',
     body: JSON.stringify(object)
   })
   .then(r => r.json())
   .then((data) => {
     this.setState({
       visionText: data
     })
   })
   .catch(err => console.log(err))
 }

Bobby - @gittheking
Jason - @jasonseminara
Trevor - @trevorpreston
Rafa - @rapala61
Irwin - @irwintsay

[trevorpreston]

got this.