We Keep Coding

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>

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>

You must do what the response is actually asking you to do which simply is adding the method attribute to the form element: <form method="POST">
Working DEMO

jquery unable to log input value

HTML:
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton">Search</button>
</div>
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function() {
console.log(name);
});
i am trying to get the value of the input using .val() but when i console log it turns out blank every time, can someone please tell me how to fix this?

$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val(); //this should be here
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>

The name variable is being set only once on script load, when it's actually empty and stays at this state.
Declare it inside the functions body to get a new, actual value with every function call.
$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val();
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background"></div>
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>

You need to get the value using : $('#search-Bar').val()
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function(){
console.log($('#search-Bar').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>

Angularjs, Modify/Remove data on form submit

I have an input field in form that I dont want to send. Even though i removed the name on input field it stills get sent probably due to angular magic.
To prevent this I thought if I could remove this item from post request it'd be the solution.
<input type='radio' ng-model='birthday' ng-value='true'>
when form submits POST has field called birthday despite input not having a name attribute. So how do i prevent it from showing up.
Form is html template, and controller is called on ng-submit

I think that you may be looking for the disabled property:
<input type='radio' ng-model='birthday' ng-value='true' disabled="true">
Edited
Here is an example of how you could use the disabled property for not sending undesired information with the form on submit:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var TestApp = angular.module("TestApp", []);
TestApp.controller('TestCtrl', function($scope) {
$scope.needsBirthdayDisabled = false;
$scope.needsBirthday = false;
$scope.sendForm = function(form) {
$scope.needsBirthdayDisabled = true; //if you comment this line, the "yep"'s input value will be sent with the form
form.$submitted = true;
};
});
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<!-- the method is set to GET for test purpose (so we can easily see the sent values on the URL) -->
<form action="" method="GET" name="myForm" ng-submit="sendForm(this)">
<div>
<label for="name">Name</label>
<input type="text" name="name" ng-model="name"/>
</div>
<div ng-show="needsBirthday">
<label for="birthday">Birthday</label>
<input type="text" name="birthday" ng-model="birthday"/>
</div>
<div>
<label>Needs Birthday</label>
Yep <input type='radio' name="yep" ng-model='needsBirthday' ng-value='true' ng-disabled="needsBirthdayDisabled">
</div>
<input type="submit" value="Go!"/>
</form>
</div>
</body>
</html>

generate alert on button click based on input type hidden

I have html that has tile view and each tile has some info with button. I want to check the value of an input hidden field and if the value is not in array defined raise an alert.
html
<div class="box" style="width:30%%">
<div class="boxInner">
<form id="form_myws" method="POST">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>
</div>
</div>
javascript
<script type="text/javascript">
$('#submit').click(function(){
var state_list=["AVAILABLE","IMPAIRED","INOPERABLE",];
var curr_state=$(this).find("input[type='hidden'][name='state']");
console.log(curr_state.val());
if (jQuery.inArray(curr_state.val(),state_list)<0){
alert("submission is allowed only with AVAILABLE,IMPAIRED,INOPERABLE states.");
}
});
It is not generating any alert. How to achieve that?

var curr_state=$(this).find("input[type='hidden'][name='state']");
change it to
var curr_state=$(this).closest('form').find("input[type='hidden'][name='state']");
also add
return false;
inside if statement so it won't submit form.

If you want to subvert submit you need to do:
$('#submit').click(function(e){
// this:
e.preventDefault();
// more code
// .. or better
return false;
});
You can contain these responses in if --> then constructs but you need to do one or the other to prevent a form from submitting. If you're not using a form, don't use submit!
You can also access the hidden input value like this:
$('#form_myws > input[name="state"]').val();
Working snippet:
var val = $('#form_myws > input[name="state"]').val();
$('body').append(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_myws">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>

in your case:
var curr_state=$(this).find("input[type='hidden'][name='state']");
$(this) get the button element you selected , you can't find any childen nodes via find() So you should select the hidden input correctly like:
var curr_state=$($(this).parent()[0]).prev()[0];
or like this:
var curr_state=$($(this).parent()[0]).siblings('[name="state"]')[0];

i am trying to write a simple textbox (for people to type url in it) with a button in html

i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>

What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>

This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>

The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.

There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page