required with input and javascript not working

Question

I would like to set a required before submitting but isn't work any idea? May over JS ? Thank you for your support

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr><td><input type="text" size"30" placeholder="Text " maxlength="10" id="source" required>
<button type="submit" class="formButton" id="submit">Submit</button></td></tr>

<tr><td height="20px"></td></tr>                            
<tr><td><input type="text" style="border:none" size="40" id="target" class="form69" onClick="myFunct()"></td></tr>
<tr><td height="150px"></td></tr>   

<script>
$(".formButton").click(function() {
 $(".form69").show();
});
</script>

<script>
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('text test' + source + ' text');
}); 
</script>

Scott Marcus · Accepted Answer · 2018-05-20 16:01:54Z

2

Your form fields must be inside of a form element.

Also (FYI), you don't need a separate script tag for each of your functions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" size="30" placeholder="Text " maxlength="10" id="source" required>
  <button type="submit" class="formButton" id="submit">Submit</button>

  <input type="text" style="border:none" size="40" id="target" class="form69" onClick="myFunct()">
</form>

<script>
  $(".formButton").click(function() {
   $(".form69").show();
  });

  $('#submit').click(function(){
    var source = $('#source').val();
    $('#target').val('text test' + source + ' text');
  }); 
</script>

edited May 20, 2018 at 16:01

answered May 20, 2018 at 15:35

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

Comments

Willem van der Veen · Accepted Answer · 2018-05-20 15:36:00Z

1

You don't have a form tag. Add a form tag like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<tr><td><input type="text" size"30" placeholder="Text " maxlength="10" id="source" required>
<button type="submit" class="formButton" id="submit">Submit</button></td></tr>
</form>

<tr><td height="20px"></td></tr>                            
<tr><td><input type="text" style="border:none" size="40" id="target" class="form69" onClick="myFunct()"></td></tr>
<tr><td height="150px"></td></tr>   

<script>
$(".formButton").click(function() {
 $(".form69").show();
});
</script>

<script>
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('text test' + source + ' text');
}); 
</script>

answered May 20, 2018 at 15:36

Willem van der Veen

37.1k19 gold badges208 silver badges178 bronze badges

1 Comment

Stef Over a year ago

this script will display the output whatever i put in the text fill. if i set a form it will submitted to nirvana like reload the page. that's why is it possible without form ?

Collectives™ on Stack Overflow

required with input and javascript not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related