Blacksun Blacksun - 1 month ago 12
jQuery Question

Please use POST resquest when sending form with JS

What i'm missing here to print 'user_input' to display paragraph ?

is myform.submit required? Because actually I can access the variable and make an alert with it..

<script language="JavaScript">
function getData(input) {
var input = document.getElementById("user_input").value;
// alert(input)
document.myform.submit()
$('.display').text("The URL is : " + input)
}
</script>

<script
src="https://code.jquery.com/jquery-3.2.1.slim.js"
integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>

<form id="myform">
<label><b>Enter a URL</b></label>
<input type="text" name="message" id="user_input">
<input type="submit" id="submit" onclick="getData()"><br/>
<p id="display"><span></span></p>
</form>

Answer Source

Don't mix java-script/jQuery into each-other.

Since you are using jQuery library then do it in a better way like below:-

Working example:-

$(document).ready(function(){ // when document is rendered completely
  $('#submit').click(function(e){ // on click of submit button
    e.preventDefault(); // prevent the form submit
    var input =$("#user_input").val(); // get input value
    $('#display').text("The URL is : " + input); // add it as a text to paragraph
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" crossorigin="anonymous"></script>

<form id="myform">
  <label><b>Enter a URL</b></label>
  <input type="text" name="message" id="user_input">
  <input type="submit" id="submit"><br/><!-- no need of onclick-->
  <p id="display"><span></span></p>
</form>