We Keep Coding

Dynamically Remove a Form Element Based on User Selection in HTML/JavaScript

I am trying to remove the option to upload a file upon the selection of the No radio button but when I click No it doesn't go away. I have no idea what I'm doing when it comes to JavaScript. How do I make it go away (or come back).
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No" "removeElement();">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function removeElement(){
var parent = document.getId(file);
parent.removeChild(file);
}
</script>
Any help would be greatly appreciated!

You can't just put removeElement(); in the middle of the html tag.
I'm assuming you want to hide the file tag? You'll first want to remove the required.
You will need to add an event listener on your No.
In jQuery this looks like this
$('#no').change(
function() {
if ($(this).is(':checked') && $(this).val() == 'no') {
$(this).hide(); //Change this for the id of the element you want
}
else {
$(this).show(); //Change this for the id of the element you want
}
});
Partly inspired by this source
If you're looking for pure JavaScript, here's what my solution would look like :
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
(Not tested)

for hide:
document.querySelectorAll('input[type=file]').style.display = 'none';
for show:
document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''

how to display a value(in text field) from one form(after submitting it) to another form (both are on the same page)

So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.

Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>

If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method

How to join input to form

Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!

If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}

Prevent jquery mobile refresh on form submit

I'm trying to get this form to execute this function on submit but for some reason, it pops the alert up, but then refreshes the entire page. I've tried other online solutions like: Prevent form redirect OR refresh on submit?
But that did not work.
function addFood() {
alert("123");
return false;
}
<form onsubmit="return addFood()" data-ajax="false">
<input type="text" name="" id="name" value="" placeholder="name" data-clear-btn="true"/>
<input type="text" name="" id="brand" value="" placeholder="brand" data-clear-btn="true"/>
<input type="text" name="" id="extra" value="" placeholder="extra" data-clear-btn="true"/>
<input type="number" name="" id="amount" value="" placeholder="amount" data-clear-btn="true"/>
<input type="number" name="" id="calories" value="" placeholder="calories" data-clear-btn="true"/>
<input type="number" name="" id="fat" value="" placeholder="fat" data-clear-btn="true"/>
<input type="number" name="" id="carbohydrate" value="" placeholder="carbohydrate" data-clear-btn="true"/>
<input type="number" name="" id="fibre" value="" placeholder="fibre" data-clear-btn="true"/>
<input type="number" name="" id="sugar" value="" placeholder="sugar" data-clear-btn="true"/>
<input type="number" name="" id="protein" value="" placeholder="protein" data-clear-btn="true"/>
<input type="submit" value="submit"/>
<form>

Remove onsubmit and set your <form>'s action attribute to # (I would also add an id)
<form id="myForm" action="#" data-ajax="false">
If you need something to happen when your <form> is submitted, use:
$("#myForm").submit(function(){
// do stuff that will fire off when my form is submitted
});

Javascript automatic form submission

I took this quick script from another post on StackOverflow, but it doesn't seem to work on my form. It just throws an error saying 'object expected'. Can anyone help me fix it.
<html>
<head></head>
<body onLoad="document.forms[0].submit()">
<form name="EPDQForm" method="post" action="mypage.aspx" >
<input name="item" type="hidden" value="data">
</form>
</body>
</html>
EDIT:
This is the exact page code (I removed most of it for displaying on here):
<html>
<head></head>
<body onLoad="document.forms[0].submit()">
<form id="myform" name="myform" method="post" action="https://secure2.mde.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e">
<input name="epdqdata" type="hidden" value="972">
<input name="returnurl" type="hidden" value="http://www.xxxx.co.uk/Secure/EPDQReturn.aspx">
<input name="merchantdisplayname" type="hidden" value="xxxxxx">
<input name="submit" type="hidden" value="purchase">
<input name="shipping" type="hidden" value="0.00">
<input name="baddr1" type="hidden" value="152 Smith St">
<input name="baddr2" type="hidden" value="">
<input name="bcity" type="hidden" value="Manchester">
<input name="bcountry" type="hidden" value="UK">
<input name="bpostalcode" type="hidden" value="M4 6DH">
<input name="email" type="hidden" value="xxxx#xxxx.co.uk">
<input name="saddr1" type="hidden" value="152 Smith St">
<input name="scity" type="hidden" value="Manchester">
<input name="scountyprovince" type="hidden" value="Alderney">
<input name="scountry" type="hidden" value="UK">
<input name="spostalcode" type="hidden" value="M4 5GG">
</form>
</body>
</html>
This code shows the error. And I don't see why. In firefox it says:
document.forms[0].submit is not a function

What happens if you remove the onload attribute from your opening <body> tag and place this code just before your closing </body> tag?
<script>
var frm = document.getElementById('myform');
if (frm) {
frm.submit();
}
</script>

Ok, the problem is in this part : input name="submit" type="hidden" value="purchase".
Submit input has the same name as the form function.
If you replace the name 'submit' by other name (submit1 as example) it should be working as a charm. :-)
Good luck.