Disable "Browse" button if the radio button isn't selected - javascript

<form action="" method="post" name="site_avatar" id="avatar" enctype="multipart/form-data">
<input type="radio" name="avatar" value="gravatar" />
<input type="radio" name="avatar" value="local" />
<input size="25" name="file" type="file" />
<input name="site_avatar" type="submit" value="Submit" />
</form>
This is my form with two radio buttons and one image upload field. I want to keep the "Browse" button disabled if the second radion button isn't selected (with the value "local").
Can anyone please help?

[See it in action]
Javascript
var form = document.getElementById("avatar");
var second = form.getElementsByTagName("input")[1];
var file = document.getElementById("file");
form.onchange = function() {
if (second.checked) {
file.disabled = false;
} else {
file.disabled = "disabled";
}
};
HTML
<input size="25" name="file" id="file" type="file" />
I would suggest you revisiting the names & ids in the form btw, because they are kinda messed up. :)

Related

HTML: Conditional submission of hidden input without JavaScript

If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.

How can I get URL of next page of a .asp page?

I am trying to scrape the data at this link: https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112
I am able to get the first page, but when I get to next page (using the "next" button at bottom of page) the URL to the next page is generic: https://thereserve2.apx.com/myModule/rpt/myrpt.asp
How can I get a more specific URL to use in my automated scraping effort?
Thanks.
Check below HTML and JS code that submits the asp page and go to needed page, "next" button submit the form as you see in below JS an X999whichpage is the next page, you need to do the same submit the form with the needed page number.
function submitform2(X999sort, X999field, X999paging, X999whichpage, X999csv, X999action, X999actionfield) {
document.xxxx2.X999csv.value = X999csv;
document.xxxx2.X999action.value = X999action;
document.xxxx2.X999actionfield.value = X999actionfield;
document.xxxx2.X999sort.value = X999sort;
document.xxxx2.X999field.value = X999field;
document.xxxx2.X999paging.value = X999paging;
document.xxxx2.X999whichpage.value = X999whichpage;
document.xxxx2.submit();
}
<form id="xxxx2" name="xxxx2" action="https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112" method="POST">
<input type="hidden" name="X999myquery" value="">
<input type="hidden" name="X999tablenumber" value="2">
<input type="hidden" name="X999csv" value="">
<input type="hidden" name="X999sort" value="">
<input type="hidden" name="X999action" value="">
<input type="hidden" name="X999actionfield" value="">
<input type="hidden" name="X999field" value="On">
<input type="hidden" name="X999paging" value="">
<input type="hidden" name="X999whichpage" value="3">
</form>
Enter Page Number:<input type="text" id="whichpage" value="2">
<button onclick="javascript:submitform2('','','On',document.getElementById('whichpage').value,'','','')">Move to Page</button>
Another solution without JS
<form id="xxxx2" name="xxxx2" action="https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112" method="POST">
<input type = "hidden" name = "X999tablenumber" value = "2" />
<input type = "hidden" name = "X999csv" value = "" />
<input type = "hidden" name = "X999sort" value = "" />
<input type = "hidden" name = "X999action" value = "" />
<input type = "hidden" name = "X999actionfield" value = "" />
<input type = "hidden" name = "X999field" value = "" />
<input type = "hidden" name = "X999paging" value = "On" />
<input type = "text" name = "X999whichpage" value = "3" />
<input type="submit" value="Go To Page" />
</form>

Browser Specific issue - One input file field data not assign to another input file field

function assignFile(obj){
var file2 = document.querySelector('#fileData');
file2.files = obj.files;
console.log(file2.files);
}
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="fileData[]" id="fileData" multiple="" style="display: none;" />
File: <input type="file" id="file" name="file" onchange="assignFile(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
I have two file fields. I want to assign file data to fileData field.
I have posted my code. This code working fine in chrome. But not working in mozilla. Could you please check.

Sending one file to two inputs

I have a little problem and i cant solve it. Below is my form. The question is: how can i put image which was put in input where is ajaximage.php to another form to a hidden input. I want the image was firstly send by ajaximage.php and shown and keept by another form and send to upload.php
<div class="kontakt">
<input type="checkbox" name="check" value="1" onclick="document.getElementById('imgfile').style.display = this.checked ? 'block' : 'none';
this.elements['photoimg'].disabled = this.form.elements['nazwa3'].disabled = !this.checked" />
<form id="imageform" name="nazwa2" disabled="disabled"style="display: none" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input id="imgfile" style="display: none" type="file" name="photoimg" id="photoimg" />
<div id='preview'></div>
</form>
<form id="dodaj" method="POST" enctype="multipart/form-data" action="upload.php">
<input type="hidden" name="ok" value="1">
<input type="hidden" name="MAX_FILE_SIZE" value="665600">
<input type="file" style="margin-bottom:30px; margin-top:20px;" name="plik" size="40" />
<textarea rows="4" cols="50" style="margin-bottom:30px;" placeholder="Wpisz swój tekst." required name="tekst" wrap="virtual">
<?php
if(isset($_SESSION['tekst']))
{
$tekst = $_SESSION['tekst'];
echo $tekst;
}
?>
</textarea>
<input type="submit" value="Dodaj" />
</form>
</div>
You can't add a file from one <input type="file"> to another <input type="file">.
This is because you can't set a file inputs value due to security reasons.
You cannot pass uploaded files directly to another form. You need to move it into a temporary location and give it a unique filename which you can then store into a hidden field in the second form. When you submit the second form then you receive the hidden value and you are then able to access the previously uploaded file.
See this: http://php.net/manual/en/function.move-uploaded-file.php

name of uploaded file in title field

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 ;

Categories

Resources