I have seen on youtube when we upload any videos automatically, the title field of form gets filled with the name of the video file. How can i achieve this?
my form is
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>
Here's some jquery code to make it work:
$('#myfile').change( function(){
var fileValue = $(this).val();
$('#mytitle').val(fileValue);
});
And here's the modified HTML:
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input id="mytitle" type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input id="myfile" type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>
Click here for the working JSFiddle. If you've never used jQuery before, then tell me, as this may be confusing!
Edit: Here's the replacing code:
$('#myfile').change( function(){
var fileValue = $(this).val();
fileValue = fileValue.replace('_', ' ');
fileValue = fileValue.replace('-', ' ');
$('#mytitle').val(fileValue);
});
Here's the updated jsfiddle
Use this code:
//use this in your form tag
<input id="song" type="file" />
//use this in your destination(action)
document.title = document.getElementById("song").value ;
Related
I want to display "something" on the HTML forms textbox
this value should be a javascript variable
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
You have to put the script after the HTML, since when it is run, the input field doesn't exist yet, so it will return an error.
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
<script type="text/javascript">
var paramvalue = "something";
document.getElementById("client_id").value = paramvalue;
</script>
var textbox = document.getElementById('client_id');,
then
textbox.value = paramvalue;
will work.
Your issue is you have type='hidden' where it should be type='text' because hidden will not be visible. You also need to change it to run onload so you replace the value on page load.
<script type="text/javascript">
function init(){
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
}
body.addEventListener("load", init);
</script>
<form action="login.php" method="post">
<input type="text" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
Alternatively, you can keep your code, change input type = "text" and just move your script below your HTML code/ Form, negating the need for the JS function and the event listener
The user could also do :
<input type="text" name="clientID" id="client_id" value="" onload="init()" />
I want to create a form for my blog visitors like this:
<form name="myform" id="test">
<input type="text" name="url"/>
<input type="submit" value="submit"/>
</form>
If someone enters a URL: https://demo.website.com/page/blablabla.html
It will generate a URL: https://newwebsite.com/page/blablabla.html
So the point is: just change demo.website be newwebsite
Is this possible with javascript or jQuery?
Try this approach:
$("input[name='url']").on('change', function(e){
$(this).val($(this).val().replace("demo.website.","newwebsite."));
})
Working code would be somewhat like this
<form name="myform" id="test">
<input type="text" name="url" onblur="func(this)" />
<input type="submit" value="submit"/>
</form>
<script>
function func(elem){
var _url = elem.value;
var finUrl = _url.replace('demo.website','newwebsite');
console.log(finUrl);
}
</script>
How to submit form using JavaScript and redirect to a URL ?
<form name="f1" method="get" action="aaa.php">
name : <input type="text" name="value_1" value=""/><br>
age: <input type="text" name="value_2" value=""/>
<input type="submit" name="submit" value="send"/>
</form>
please see image in this link:
http://image.ohozaa.com/i/4d0/zCzQIH.jpg
after press submit button , i want to redirect page to www.example.com/aaa/robert/21
How can i do that ?
Try this with html code
<form name="f1" method="get" action="aaa.php">
name : <input type="text" id="value_1" name="value_1" value=""/><br>
age: <input type="text" id="value_2" name="value_2" value=""/>
<input type="button" name="submit" onclick="checkredirect()" value="send"/>
And javascript
<script type="text/javascript">
function checkredirect(){
var value_1 = $('#value_1').val();
var value_2 = $('#value_2').val();
window.location = 'http://www.example.com/'+value_1+'/'+value_2;
return false;
}
</script>
Don't forget to add jQuery library
Maybe something like this:
HTML:
<form id="f1" class="js-redirect" method="get" action="aaa.php">
name : <input type="text" name="value_1" id="value_1" value=""/><br>
age: <input type="text" name="value_2" id="value_2" value=""/>
<input type="submit" name="submit" value="send"/>
</form>
N.B.: name attribute in form tags is deprecated, use id attribute. Input, select and textarea tags should have ids as well.
JS:
$('.js-redirect').on('submit', function() {
var newUrl = this.action.replace('.php', '/' + $('#value_1').val() + '/' + $('#value_2').val());
this.action = newUrl;
})
set header in php file
$dynamic = $_GET['value_1'];
$id =$_GET['value_2'];
header('location:www.example.com/aaa/'.$dynamic.'/'.$id);
Try this function on click button
function myFunction() {
document.getElementById("myForm").submit();
}
An easy question for you I think :-)
<form id="upload" method="post" name="form">
<input id="id<?php echo $a; ?>" class="id" name="id" type="text" value="<?php echo $id_submit; ?>" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>
The source code looks e.g. like this:
Form 1:
<form id="upload" method="post" name="form">
<input id="id1" class="id" name="id" type="text" value="12345" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>
Form 2:
<form id="upload" method="post" name="form">
<input id="id2" class="id" name="id" type="text" value="65432" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>
After click on save.jpg it calls my jquery-function:
$(document).ready(function() {
$( "#upload" ).on("submit", function(e) {
e.preventDefault();
var id = $('.id').val();
…..
The problem is that when I click on save.jpg in the form 2, then it takes the value 12345 instead of 65432.
How can I fix that?
the form is needs to be unique
<form id="upload" method="post" name="form">
thats why it takes the first element found in the dom structure with the target id, change the id of the second form .
Also when you do
var id = $('.id').val();
there a more than one element with the given class. you can try this instead
var id = $(this).find('.id').val();
Happy Coding :)
Use a broader selector to target both forms then find the id of the current submitted form:
$( "form" ).on("submit", function(e) {
e.preventDefault();
var id = $(this).find('.id').val();//"this" is the current form
That works:
var id = $(this).('.id').val();
Thanks for your help guys.
I have an input which searcher's google web and another input to search google images. For each input i have buttons to fadeIn either. Can the search input be the same but search different sites?
Here is a fiddle of what I currently have: http://jsfiddle.net/kwC36/
To search the web I use:
<form action="http://google.com/search" method="get" class="websearch">
and to search images I use:
<form action="http://www.google.com/images?hl=en&q=" method="get" class="imagesearch">
Thanks alot
Yeah, you can switch action on the form:
$('.web').click(function(){
$('form')[0].action = "http://google.com/search";
// do something
$('.websearch').fadeIn();
});
$('.image').click(function(){
$('form')[0].action = "http://www.google.com/images?hl=en&q=";
// do something
$('.websearch').fadeIn();
});
Assign custom data attributes to the button so the form action can be dynamic:
HTML:
<form id="search-form" action="" method="get" class="websearch">
<input id="search-field" type="text" class="searcher" name="" />
</form>
<input type="button" value="Search the web" class="search-btn" data-action="http://google.com/search" data-field-name="" />
<input type="button" value="Search images" class="search-btn" data-action="http://www.google.com/images?hl=en&q=" data-field-name="q" />
JQuery:
$('.search-btn').click(function(e){
e.preventDefault();
$('#search-field').attr('name',$(this).data('field-name'));
$('#search-form').attr('action',$(this).data('action')).submit();
});
<input type="submit" name="srch_images" value="Search Images">
<input type="submit" name="srch_google" value="Search Google">
if( isset($_POST['srch_images'] )
{
something();
}
else if( isset($_POST['srch_google']) )
{
something_else();
}
You can use the same textbox to search for web and image. Also there is no need to have two form tags. Try this
$('.web').click(function(){
$('form').attr('action', "http://google.com/search").submit();
});
$('.image').click(function(){
$('form').attr('action', "http://www.google.com/images?hl=en&q=").submit();
});
HTML:
<form action="http://google.com/search" method="get" class="websearch">
<input type="text" class="searcher">
<input type="submit" value="Web Search" class="web">
<input type="submit" value="Image Search" class="image">
</form>
Javascript:
$('.image').click(function() {
$(this).parent()
.attr('action', 'http://www.google.com/images?hl=en&q=');
});
That should do it.