Change handler not working - javascript

I am completely new to JQuery and am having trouble getting a simple HTML page containing JQuery (that I gleaned from another Stack Overflow thread, which unfortunately wasn't complete enough for a JQuery newbie like me, apparently!) to work properly.
When I choose a filename, I expect the "mytext" text input field to contain the name of the file I uploaded, but this does not happen.
$(document).ready(function() {
$('#myfile').bind('change', function() {
var fileName = '';
fileName = $(this).val();
$('#mytext').html(fileName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<input type="text" id="mytext" name="mytext">
<input type="file" id="myfile" name="myfile">
</form>

you were missing a /script on the jQuery tag
You were using .html() instead of .val() for the field
You should use .on instead of .bind
$('#myfile').on('change', function() {
fileName = $(this).val().split('\\').pop();
$('#mytext').val(fileName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mytext" name="mytext">
<input type="file" id="myfile" name="myfile">

Related

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

input file "No File Choosen" text hide using button in jquery MultiFile

I have following input file
<input type="file" id="sampleInput" name="files" onchange="return Plugins.sampleAction(this);"/>
In this file input I'm trying to remove "No File Choosen" text, for that I did following modification
<input type="file" id="sampleInput" name="files" onchange="return Plugins.sampleAction(this);" style='display:none'/>
<button id="image_alt" type="button">Select image</button>
<script type="text/javascript">
$('#image_alt').addEventListener('click', function () {
$('#sampleInput').click();
});
</script>
but when I click button this one not opening the file up-loader window
You can try this
$('#image_alt').on('click', function () {
$('#sampleInput').click();
});
addEventListener is the javascript way to listen for events, but you call it on a JQuery object. Give a look at JQuery.on() to manage events using JQuery.
try this
<button id="image_alt" type="button">Select image</button>
<p class="file_selected">File name</p>
<script type="text/javascript">
$('#image_alt').on('click', function () {
$('#sampleInput').click();
});
function changeVal(obj,cnt){
$(cnt).text($(obj).val());
}
</script>

Dynamic URL from user input to search

What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )
<script type="text/javascript">
$(function () {
$('#submit').click(function() {
$('#button').click(function(e) {
var checkInDate = document.getElementById('checkInDate').value;
var checkInMonthYear = document.getElementById('checkInMonthYear').value;
var checkOutDate = document.getElementById('checkOutDate').value;
var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
var numberOfAdults = document.getElementById('numberOfAdults').value;
var rateCode = document.getElementById('rateCode').value
window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en&regionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");
window.location = url;
});
});
Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".
For this to work you need to use the "GET" method.
<form action="http://www.Link.com/redirect" method="GET">
<input type="hidden" name="path" value="hd"><br>
<input type="hidden" name="brandCode" value="cv"><br>
<input type="hidden" name="localeCode" value="en"><br>
<input type="hidden" name="regionCode" value="1"><br>
<input type="hidden" name="hotelCode" value="DISCV"><br>
<input type="text" name="checkInDate"><br>
<input type="text" name="checkInMonthYear"><br>
<input type="text" name="checkOutDate"><br>
<input type="text" name="checkOutMonthYear"><br>
<input type="text" name="numberOfAdults"><br>
<input type="text" name="rateCode"><br>
<input type="submit">
</form>
Clicking "Submit" changes the URL to the desired one.
If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link
This is much better than trying to re-implement URL manipulation on your own.

Including an external page in a form of a current page

I have a external page loaded using scripts inside a form of a current page, and tried to call the inputs on the external page to be sent from a form inside the current page. It seems like the data on the external page cannot be sent from the current form. Can somebody please tell me why?
Here are example codes to explain the situation.
PAGE A
<form method="post" action="testing.php">
<input type="hidden" name="program" value="diploma"/>Diploma/Foundation
<input type="hidden" name="program" value="bachelor"/>Bachelor Degree
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function loadPageIntoDiv(url) {
var $div = $("div#imgbox");
$div.load(url, function() {
$div.find("a").on("click", function(evt) {
var $link = $(this);
loadPageIntoDiv($link.id("test"));
evt.preventDefault();
return false;
});
});
}
</script>
<div id="imgbox">
</div>
<input type="submit" name="submit" />
</form>
PAGE B
<div>Input1</div>
<div><input type="text" name="uubsss"</div>
<div>Input2</div>
<div><input type="text" name="uubbsssa"</div>
<div>Input3</div>
<div><input type="text" name="uubbasssab"</div>
the function to load div is in loadPageIntoDiv(), and will call diploma-foundation.php into the first A tag with an id of "test1"
please help me with this. Thank you in advance dear stackoverflow-ers.

jQuery submit by form id conditions not working

I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});

Categories