Revised Question:
How can you display the text entered into an html text field in JavaScript?
https://jsfiddle.net/bjc7em1w/
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of
the plan and its annexes.</td>
<td> <input type="text" id="comments1"> </td>
</tr>
Since the discription of the problem was rather confusing to read, I will answer just the question:
var text = document.querySelector("#textbox").value;
alert("The textbox value is: " + text);
If you have any questions about this or want me to elaborate please say so.
If I understand correctly, you are looking to add feedback messages related to your form. You can add an empty span tag to the section where you want the message to display and call it on blur.
For example, add something like:
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of the
plan and its annexes.</td>
<td> <input type="text" id="comments1" onblur="message()">
<span class="message" id="message"></span>
</td>
</tr>
When the user leaves the section calling onblur, the message can be called like this:
function message() {
document.getElementById("message").innerHTML = "message written here";
}
You can add functionality to determine when and how the message is shown.
Related
Good evening everybody!
I'd like to hide a profile field if the user meta is blank.
For example, in the image, I'd like to hide the billing_ateco row because billing_ateco field is empty.
I have no idea where to start, if you have the solution or suggest me one similar thread (I didn't find anything in the similar questions section when I posted this) It would be a great help, thanks in advance!
If by user meta you mean user input, one approach would be to find all input elements, check if their value is empty and then hide their parent tr element.
// Find all <input> elements:
document.querySelectorAll("input").forEach( input =>{
// Check to see if the value is empty:
if ( input.value.trim() === "" ){
// Find the closest <tr> parent of the input and
// hide it:
input.closest("tr").style.display = "none";
}
});
<table>
<tr>
<td>
<label for="a">Label A</label>
</td>
<td>
<input id="a" />
</td>
</tr>
<tr>
<td>
<label for="b">Label B</label>
</td>
<td>
<input id="b" />
</td>
</tr>
<tr>
<td>
<label for="c">Label C</label>
</td>
<td>
<input id="c" value="Value" />
</td>
</tr>
</table>
I just want to show or hide some of my HTML form elements obviously using java depending on the previous selection.
I.e. if a user select Dyingtype drop-down "Bleached" obviously there is no need to show color selection radio buttons it only needs to show bleached white radio and when a user selects "Reactive" or "Vat" it only shows color selection radios and there is no need of bleached white radio button.
Please help I don't know java at all only know PHP.
My HTML code is below.
Thanks
<select name="dyingtype" class="formcss" id="10">
<option value="0">Select Dying Type</option>
<option value="1">Blaeached</option>
<option value="2">Reactive Dyed</option>
<option value="3">Vat Dyed</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Bleached/White</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input
name="color"
type="radio"
class="formcss1"
id="11"
value="1"
checked="checked"
/>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Dark Colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="12" value="2" />
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Average colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="13" value="3" />
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Pastel Colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="14" value="4" />
</td>
</tr>
<tr></tr>
Learning is great! It is clear you are an extreme beginner from calling JS Java, but this might help you get started in the right direction. Please note I'm not endorsing these methods, but I think it answers your question and will help you.
I suspect you will want to look into events: https://www.w3schools.com/jsref/event_onchange.asp
The idea is basically when a user selects a choice you need to hide / show elements that match.
Honestly, there are a lot of really great ways to do what you are asking, but since you are learning, executing a function from an event might be educational and I will try to keep it simple. What you will want to do is get all the elements you want to show, and change a style property. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById to make them visible.
Your code might include something like this:
function hideBleachButtons () {
const bleachElement = document.getElementById(YOUR ELEMENT ID);
bleachElement.style.property = 'set a val'
}
Here are a few videos with related material:
https://www.youtube.com/watch?v=YrE62Dzg4oM,
https://www.youtube.com/watch?v=IBVvDMUaYpI
I'm using Javascript to change an input value before submitting and saving it into a MySQL table, but after changing the value I get a blank row in the database.
I'm using it like this
document.getElementsByName('wifestatus').value = "nothing";
I tried getElementsById but it gives me the same result.
<td> <input type="radio" name="gotmarried" id="gotmarried1" value="لا" style="margin-right:5px"
onClick="disablewifestatus()"/> </td>
<td> <label style="margin-right:5px"> <b>****</b> </label> </td>
<td> <input type="radio" name="gotmarried" id="gotmarried2" value="****" style="margin-right:5px"
onClick="enablewifestatus()"/> </td>
<td> <label style="margin-right:5px; margin-left:5px"> <b>*****</b> </label> </td>
<td> ( </td> <td><input type="radio" name="wifestatus" id="wifestatus1" value="******" style="margin-right:5px"/> </td>
<td> <label style="margin-right:5px"> <b> **** </b> </label> </td>
<td> <input type="radio" name="wifestatus" id="wifestatus2" value="*****" style="margin-right:5px"/> </td>
<td><label style="margin-right:5px"> <b> ***** </b> </label> </td>
<td> <input type="radio" name="wifestatus" id="wifestatus3" value="****" style="margin-right:5px"/> </td>
<td> <label style="margin-right:5px; margin-left:5px"> <b>***** </b> </label> </td> <td> ) </td>
I'm using Joomla so sending process will be like this
$row->gotmarried = $_POST['gotmarried'];
$row->wifestatus = $_POST['wifestatus'];
How can I change the value of a form input and save it into the database?
You should use getElementById, not getElement(s)ById
Furthermore, when you getElements by some selector, it doesn't just return that element(s) it returns an array like object that you would need to loop through to change values on.
http://jsfiddle.net/vhuumox0/17/
I have 3 radio group and 6 radio buttons. During the form's submit event user should check at least one radio from different radio groups otherwise the submit event returns false but when i try to do this by using below implementation it always return false so i'am not able to post this form now. What can be the problem ?
HTML
<form id="internshipStage2Form" method="POST" action="form2.php">
<table id="companyInformation" border="1">
<tr>
<td valign="middle" align="center">
<label id="" for="">Did the engineering students work as trainees in the company in the previous years?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>
</td>
</tr>
<tr>
<td valign="middle" align="center">
<label>Are the company owners and the top managers are your relatives ?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g2Positive" type="radio" name="g2" value="YES"/>
No<input class="radioInput" id="g2Negative" type="radio" name="g2" value="NO"/>
</td>
</tr>
<tr>
<td valign="middle" align="center">
<label>Is the firm you declared above on this form same with the firm you intern firstly?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g3Positive" type="radio" name="g3" value="YES"/>
No<input class="radioInput" id="g3Negative" type="radio" name="g3" value="NO"/>
</td>
</tr>
</table>
<input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/>
</form>
JS
$('#internshipStage2Form').submit(function(){
var reqRadioFlag = 1;
$('input:radio').each(function(){
if(!$(this).is(':checked')){
reqRadioFlag = 0;
return false;
}
});
if(reqRadioFlag === 0){
alert("Please fill all requiredd areas !");
return false;
}
});
Try this
$('#internshipStage2Form').submit(function(event){
if($('input:radio:checked').length < 3)
{
alert("Please fill all requiredd areas !");
return false;
}
});
DEMO
You can check if every group is checked:
if ($('input[name=g1]:checked').length && $('input[name=g2]:checked').length && $('input[name=g3]:checked').length) //do submit
or check if there are 3 radio checked
if ($('input:checked').length == 3) //do submit
You can try this
$('table#companyInformation tr').each(function(){
var elem =$(this).children("td").eq(1);
if(!elem.find("input:radio:checked").length){
reqRadioFlag = 0;
return false;
}
});
DEMO
Not sure why Hiral deleted their answer, considering it's the most correct.
<input type="radio" required />
So long as just one of the radio buttons in the set has this attribute, the user will be required to select any one of the radio button set. It's a little weird, but I can promise you it works.
HTML5 validation is far more reliable than jQuery because it doesn't rely on you at all. We make mistakes in code and that breaks things, but with required it doesn't matter. It will even work if the user disables JavaScript ;)
Of course, as always, be sure to validate server-side!
I have a multiple choice questionnaire with five questions on my html page. Each question uses radio buttons for user to select one of five answers. I want to check that the user has selected one of those five radio buttons before allowing them to go to another page. A PHP page sends the answer to my database. If the user misses checking one of the answers, none of the answers go into the database.
I think I'm looking for some java script that will loop through each of the possible five answers to check at the form submit whether the user has checked one radio button before allowing them to proceed to the next page. Thanks for your help.
My html code for just two of the questions looks like this:
<tr> <td> Question 1. </td>
<td align="center"> <input type="radio" name="q1" value="0" /></td>
<td align="center"> <input type="radio" name="q1" value="1" /> </td>
<td align="center"> <input type="radio" name="q1" value="2" /> </td>
<td align="center"> <input type="radio" name="q1" value="3" /> </td>
<td align="center"> <input type ="radio" name="q1" value="4" /> </td>
</tr>
<tr> <td> Question 2. </td>
<td align="center"><input type="radio" name="q2" value="0"/></td>
<td align="center"> <input type="radio" name="q2" value="1"/> </td>
<td align="center"> <input type="radio" name="q2" value="2"/> </td>
<td align="center"> <input type="radio" name="q2" value="3"/> </td>
<td align="center"> <input type ="radio" name="q2" value= "4"/> </td> </tr>
Consider the following example..And do the changes in your code.....
You can call a js function(using onsubmit()). Like this
<form id="ID" method="post" action="servletName" onSubmit="return validateOption()">
<input type=radio name=r1 value="1" >A</input>
<input type=radio name=r1 value="2">B</input>
<input type="submit" value="Submit"><span id="error" style="display:none;"></span>
</form>
Your script goes here to validate whether option selected or not,Submission of page is possible only if onsubmit=true ie if validateOption() returns true.
<script>
function validateOption()
{
var group=document.getElementsByName("r1");
for ( var i = 0; i < group.length; i++)
{
if (group[i].checked)
return true;
}
// else you can show error message like this
document.getElementById("error").innerHTML="Please enter your choice";
return false;
}
</script>