I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"
Related
I used #John Strood's answer from here to build my current script. The below code is close to my need, I now just need to append text to the results.
For example, appending site:imdb.com/title toHakunamatata to get https://www.bing.com/search?q=site:imdb.com/title+Hakunamatata
#Spectric had a great answer for a single-submit form, but it does not seem to function with the current script.
<form action="" method="get">
<input type="text" value="Hakunamatata" id="box" name="search_query"placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="https://testurl1.com"
onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://testurl2.com"
onclick="document.getElementById('box').name='s'" />
</form>
If you are wondering, the onclick functions are necessary
testurl1 uses the search modifier of ?q and testurl2 uses ?s
Prepend the string to the input's value when the submit event is fired.
form.addEventListener('submit', function() {
box.value = 'site:imdb.com/title ' + box.value;
})
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
To conditionally prepend the string, move the logic to the button's click event listener.
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q';box.value = 'site:imdb.com/title ' + box.value;" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
How do I solve the error cannot read property of 'addEventListener' of null ? when I add this code,document.getElementById("myForm").addEventListener("submit", SaveBookmark) in my JS file
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="button" id="submitBtn">Submit</button>
</form>
First please notice that you're calling DOM is loaded or duplicated formID.
This code is working fine. please change <button type="button"> to be <button type="submit" .../>
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", SaveBookmark);
function SaveBookmark() {
alert('success');
}
</script>
I'm by no means an expert but to avoid that error your JS should look like this
const myForm = document.getElementById("myForm");
if (myForm) {
myForm.addEventListener("submit", SaveBookmark)
}
This ensures that your form element exists before you add the event listener
Should work easily:
document.getElementById('myForm').addEventListener('submit', function() {
alert("yes!")
})
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
It does not work because you have a
<button type="button" id="submitBtn">Submit</button>
instead of:
<button type="submit" id="submitBtn">Submit</button>
and you're trying to reach submit event.
Anyway, i recommend you not to add event listeners due to resource wasting. Use it when it's the only option.
I let you another way to reach the same with default click eventlistener:
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
</form>
<script type="text/javascript">
function saveBookmark(){
alert ("Bookmark saved");
}
</script>
You'll click on submit button anyway so, use onclick event instead of creating an eventlistener. It works simplest and waste much less resources...
And remember to add action attribute to the form, trying to re-program defined behaviour will only make your software heavy and heavy on codelines and timeloads. Thats why know the language its important.
Hope it help!
I am trying these days to do a search form that sends to two different pages with two different buttons with a single text box. So far I am doing this:
<form action="http://www.youtube.com/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="YouTube" />
</form>
<form action="https://torrentz.eu/search" method="get">
<input name="q" type="text" maxlength="128" />
<input type="submit" value="TorrentZ" />
</form>
of course the result is this:
I can work with that, but I want to make it "cuter" like this:
So far I have tried using a script but I did not get it so I scraped it, then I tried making an if/elseif but yet again, I was not sure what I was doing, I am not a good planner for what I see, a toggle button or a dropbox is not as fast, as I just need to press tab once or twice and enter to just search where I want.
As an extra note, I am just making my personal "new tab" for chrome, as the basic and the ones I find in extensions are pretty heavy for my mini laptop.
In HTML5 you can use formaction attribute.
<!DOCTYPE html>
<html>
<body>
<form>
<input name="search_query" type="text" maxlength="128" />
<input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
<input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
</form>
</body>
</html>
Since you tried and failed a script, let's look at ways we can achieve this.
Using form
Be extremely wary of what you do here. It is easy to send a get request using form but it always "flushes" out the query strings already present in the action URL, and submits the request by adding name-value pairs in its child nodes. Make sure to create your query as a child node.
<input type="text" id="box" name="searchbox" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="button" value="Youtube" onclick="search_youtube()"/>
<input type="button" value="Torrentz" onclick="search_torrentz()"/>
<script>
function search_youtube(){
var add="https://www.youtube.com/results";
var box = document.getElementById("box");
box.name="search_query"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
function search_torrentz(){
var add="https://www.torrentz.com/search";
var box = document.getElementById("box");
box.name="q"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
</script>
Using HTML5 formaction attribute
<form action="https://www.youtube.com/results" method="GET">
<input type="text" id="box" name="search_query" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="submit" value="Torrentz" formaction="https://www.torrentz.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" name="submit" value="Youtube" />
</form>
I have a form with two buttons -
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
Here one button is for approve and another button for disapprove. I have a Javascript function "submitForm()" which is called "onclick" of these button. The function is like this
function submitForm(){
//if('approvedButton' is clicked){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
//}
$("#reviewApprvDisapprvForm").submit();
}
In this function I have set the action with javascript. Here, I am trying to find for which button click the "submitForm()" method is called. There are two buttons - "approveButton" and "disapproveButton". How can I do this, can anyone help me?
Thanks in advance
I would do it like this:
Remove the onclick="" from the HTML, set the image inside the input element, add the action to the form directly:
<form:form id="reviewApprvDisapprvForm" action="/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" type="submit"><img src="/images/buttons/samplesApprovedButton.png"/></input>
<br />
<input id="disapproveButton" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
$(document).ready(function() {
$('#disapproveButton').click(function(){
//your disapprove logic here
});
});
This can help
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm('approve')" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm('notApprove')" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
and then
function submitForm(buttonVal){
if(buttonVal=='approve'){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
}
$("#reviewApprvDisapprvForm").submit();
}
Thanks
I have a sidebar in a Google spreadsheet with a HTML form in it.
Now, how do I handle the values submitted?
In index.html:
<form id="configs" action="#">
<fieldset>
////input fields here
<input type="submit" id="enviar" value="Send" onclick="google.script.run.validarForm()" />
</fieldset>
</form>
In code.gs the functin validarForm() is called but how do I pass the submitted values to it so I can validate it first and store them in variables?
Thanks in advance for your help!
You can pass parameters using google.script.run. I'd do something like this:
<form id="configs" action="#">
<fieldset>
<input type="text" id="exampleField1" />
<input type="text" id="exampleField2" />
<input type="submit" id="enviar" value="Send" onclick="enviarForm()" />
</fieldset>
</form>
<script>
function enviarForm(){
var exampleField1Value = document.getElementById("exampleField1").value;
var exampleField2Value = document.getElementById("exampleField2").value;
google.script.run.validarForm(exampleField1Value, exampleField2Value);
}
</script>
Of course, this can be done with event handlers instead of "onclick=", and jQuery too.