This question already has answers here:
What is the difference between JavaScript's getElementById() and getElementsByName() functions?
(6 answers)
Closed 5 years ago.
I have a form below, which in the "select option" will trigger the function selectType(), I found that the function selectType() has been ran, because the alert works and show in the screen, then the "document.getElementById("selectType").submit();" seems won't works, because it wont go to the url I expected.
Edited at 2017/02/26 : Thanks for the answer.
I found that if the form inside "#using (Html.BeginForm())", then the "document.getElementById("selectType").submit();" won't works, if the form is outside the "#using (Html.BeginForm())", it works.
<script>
function selectType() {
alert("aa");
document.getElementById("selectType").submit();
}
</script>
<form id="selectType" action="/TRecords/Audit">
<input type="text" name="id" class="dateInput" value=#ViewBag.SId hidden>
<select onchange="selectType();" name="auditType" class="form-control">
<option>Select Type</option>
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
<option value=4>D</option>
</select>
</form>
You almost got it right but this line:
<form name="selectType" action="/TRecords/Audit">.
Need to be change for that:
<form id="selectType" action="/TRecords/Audit">
Just change 'name' to 'id'.
<form id="selectType" action="/TRecords/Audit">
In order to use 'getElementById' method your need to access using 'id' attribute.
"document.getElementById("selectType").submit();" seems won't works
Because you have set name of form to be selectType and not id.
Either set <form id="selectType">..</form>
Or if name is must, then use document.getElementsByName('selectType')[0].submit();
Thanks for the answer.
I found that if the form inside #using (Html.BeginForm()) then the document.getElementById("selectType").submit(); won't work. If the form is outside #using (Html.BeginForm()) it works.
Related
I'm beginning to study web development, just html, css and bootstrap so far... And training the things that I've learned, I just got stucked with the following situation:
<div class="input-group">
<input required type="email" name="" id="email" class="form-control">
<div class="input-group-append">
<select name="" id="kasp">
<option value="#gmail.com">#gmail.com</option>
<option value="#homail.com">#homail.com</option>
<option value="#yahoo.com.br">#yahoo.com.br</option>
</select>
</div>
</div>
Using only this, would it be possible to put together what was typed in the with what was selected?
I guess that some javascript may be necessary to do it, but I'm also curious to know if there's some way of doing it without js, so what do you tell me? I haven't started with javascript yet, but anyway, how would it looks like?
You can do it in the server script when you submit the form. But if you want to do it on the client, you have to use JavaScript.
Use .value to get the values of each input, and + to concatenate strings.
var full_email = document.getElementById("email").value + document.getElementById("kasp").value
I've made a 'question-answer form' in HTML and linked it with Javascript so that people could answer with a specific number. Here is the sample of my code:
HTML code:
<p>Question</p>
<p>1)"ans1"</p>
<p>2)"ans2"</p>
<p>3)"ans3"</p>
<p>4)"ans4"</p>
<form method="POST" name="CorrectForm"
onSubmit="checkCorrect(document.CorrectForm.numCorrect.value); return false;">
<input type="text" name="numCorrect" id="numCorrect">
<input type="Submit" name="Submit">
</form>
JavaScript:
var correctnumber = 1;
var errormessage = "blabla";
function checkTrue (numTrue){
if (numCorrect == correctNumber){
alert("Correct")
}else{
alert(errormessage);
}
}
Now what I want is to let people choose an answer from a dropdown list. So I want the answers to be checked when the submit button is pressed.
So, HTML looks like
<p>Question</p>
<select>
<option value="ans1">ans1</option>
<option value="ans2">ans2</option>
<option value="ans3">ans3</option>
<option value="ans4">ans4</option>
</select>
So now I'm need of the JS part.
I apologize if this question has been asked a million times before, as I tried searching for a solution but didn't find one.
Thanks in advance!
Instead of creating a function that validates just the input number, you can create a function that validates the full form. See this example:
<!DOCTYPE html>
<html>
<head>
<title>Validation test</title>
<script>
var rightAnswer = 3;
function checkAnswer(form) {
if (parseInt(form.elements["answer"].value) == rightAnswer) {
alert("Correct");
} else {
alert("Wrong");
}
return false;
}
</script>
</head>
<body>
<form method="POST" onsubmit="checkAnswer(this); return false;">
<p>Question:</p>
<select name="answer">
<option value="1">ans1</option>
<option value="2">ans2</option>
<option value="3">ans3</option>
<option value="4">ans4</option>
</select>
<input type="submit">
</form>
</body>
</html>
Some remarks:
In the code for the event onsubmit="", you can use the keywork this to refer to the form itself, and pass it to the checkAnswer() function.
When you have the variable form that points to your HTML form, you can retrieve its fields through form.elements["NAME"], where NAME matches the attribute name="" in the HTML tag. This works for all controls, select, button, input, with the exception of <input type="image">.
See MDN about this, it contains good reference about every object in the HTML DOM, in particular <select>.
You might still need to convert the value to an integer to be able to compare it to your right answer, that's the reason for parseInt.
This approach can be generalized: what you want to do is equivalent to form validation, you can find online plenty of libraries and tutorials that explain in detail how to do it; there are also many answers, if you know what to look for.
I am having trouble trying to figure out how to navigate to different web pages using a drop down list and submit. I have three forms:
main.php
two.php
three.php
In my main.php page I have a drop down list consisting of only two options 'second' and 'third'. How can I use these two options to navigate to other php pages? For example, if I selected the option 'two' and click submit, the page should then take me to the second.php page. And if I select option 'three', I will be taken to the third.php page.
Also, once I am directed to one of the php pages, how can I then be able to go back to the 'main.php' page if I decide to go to the other php page instead? (I thought perhaps the use of a back button).
Below is part of my 'main.php' page:
<label>Select the page you wish to go:</label></td>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select></td>
On <select></select> value change :
HTML :
<select name="pages" onChange="my_function(this)">
JavaScript :
function my_function(element){
document.location.href = element.value
}
Example
On <button></button> click :
HTML :
<button onClick="my_function()"></button>
JavaScript :
function my_function(){
document.location.href = document.querySelector('select[name="pages"]').value
}
Example
You can do multiple things. If you dont wan't to rely on javascript, make the form submit to a file like router.php.
inside router.php put:
<?php
if (isset($_POST['pages']) {
header('Location: ' . $_POST['pages']);
}
Which will effectively forward the request to the page you submitted in the select.
You also have to change your html a bit:
<label>Select the page you wish to go:</label></td>
<form method="post" action="router.php">
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" value="go there" />
</form>
If you are fine with javascript go with #notulysses's answer, its way easier and quicker.
Using POST values directly in a header method is kinda nasty imo.
Jquery solution
HTML CODE:
<form id="frm" method="post" action="" >
<label>Select the page you wish to go:</label>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" name="sub" value="Finish" />
</form>
JQUERY CODE
$('#frm').on('submit',function () {
var nextPage= $('select option:selected').val();
$(this).attr('action',nextPage);
return true;
});
Happy Coding :)
I was having a problem loading a view into a page, I got it to work about 90%, but Im more wondering about the problem, like the why and such and was hoping for some enlightenment, Im trying to load a view into a div tag with the .load() function, but for some reason if the view has another div tag starting it, it won't load. The view is
<div id="gameselectform" style="display: none">
<form id = "selectgame" onsubmit = "loadForm(); return false;" method="get">
<select name="game" id="gameselect" method="get">
<option value="starcraftii">Starcraft II</option>
<option value="worldofwarcraft">World of Warcraft</option>
<option value="callofduty">Call of Duty</option>
</select>
<input type="submit" value="Add" >
</form>
</div>
and if I remove the div tag, it loads. Im wondering why, and if there is a way around this? Thanks a lot in advanced! Im pretty new to javascript and jQuery, so don't use too many big words! Haha
Edit:
The javascript function is:
function loadForm(game){
game = game || $("#gameselect").val();
var url = "<?php echo BASE_URL;?>Gameformload/"+game;
$("#maindisplay").load(url);
}
It might be because of the display:none and the DOM?
Have you tried swapping the display property for visibility:hidden;
I am working with Prototype while using the pylons framework and trying to make an Ajax call.
Here is what my html looks like:
<form method="POST" action = "javascript:void(0)" onsubmit = "new Ajax.Updater('graph','/saffron_main/click_out_display'); ">
<label for="tids">Select Relevant Tids</label>
<select id="tids" multiple="multiple" name="tids" title="Tids">
<option>1</option>
<option>2</option>
</select>
<p><input class = "button" type="submit" name="submit" value="submit" /></p>
</form>
<div id = "graph">
</div>
I can see that the my controller gets called and a http request gets made to /saffron_main/click_out_display. Everything looks like it is working properly. The only problem is the div never gets populated. I am pulling out my hair trying to figure this one out and any helps would be greatly appreciated! Thanks!
What happens if you put a return false; inside the onsubmit after you instantiate an Ajax.Updater ?
Why -
It currently would be returning true by default and the page may be getting posted back, not via Ajax