I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>
Related
I have a requirement where i have a form, Input text and a button. On button click i need to call two URL on condition. Is this possible through JavaScript.
For example -
When i click button, if the input text is India the URL should go to http://google.co.in
If the input text is UK the URL should go to http://google.co.uk
What are the ways we can implement this requirement.
<form name="inputform" action="somewhere" method="post">
<input type="text" value="" />
<input type="button" />
</form>
Thanks in Advance
Regards
you can try something of this sort :
<form name="inputform" action="somewhere" method="post">
<input type="text" value="" id="t"/>
<input type="button" onclick="chkform()" />
</form>
<script type="text/javascript">
function chkform(){
var x = document.getElementById("t").value;
if(x==="India"){
window.location="http://www.google.com";
}
else if(x==="UK"){
window.location="http://www.google.co.uk";
}
}
</script>
$('form').on('submit', function() {
var inputVal = $('input[type="text"').val();
if (inputVal === "India") {
window.location.replace("http://google.co.in");
} else if (inputVal === "UK") {
window.location.replace("http://google.co.uk");
}
});
It would help a lot if these HTML elements were given class or ID attributes to identify them further but this code is a working mashup of JS and jQuery (as you tagged them both) of what I think you want.
N.B: If you are adding mote conditions, (instead of just India and UK) it may be worth using a switch statement as they look more readable
This code assumes that your button is the submit button for your form
Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this
Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo
I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>
I am using a simple Javascript toggle function with the following code.
<script>
function add_more(){
if (document.form.more[0].checked==true)
{
document.getElementById('moreTxt').style.display="block";
}
else if (document.form.more[1].checked==true)
{
document.getElementById('moreTxt').style.display="none";
}
}
</script>
do want to enter something more ?
<form name="form">
<input type="radio" value="yes" name="more" onclick="add_more()" /> Yes
<input type="radio" value="No" name="more" onclick="add_more()" /> No
<div id="moreTxt" style="display:none">
hi you can enter more here
<textarea rows="3" cols="4">
</textarea>
</div>
</form>
The Problem is if I click on 'yes', and for some reason I refresh the page, then the 'yes' radio button remains checked but moreTxt div hides (i.e. its default visiblity mode).
How should I tackle this problem?
Check the value of the control on document ready and adjust the div visibility accordingly.
This will reset all your input on load:
<script>
function resetChkBox() {
var e=document.getElementsByTagName('input');
var i=0;
while(i<e.length) {
if(e[i++].type=='radio') {
e[i].checked=false;
}
}
}
</script>
<body onload="resetChkBox()">
you should perform you add_more function onDucomentReady
Assuming you're using jquery:
$(document).ready(function() {
add_more();
}
)
or use plain javascript equivalent of document.ready()
If this is to be performed without jquery which should be the case since including jquery for such small thing will be overkill :
document.attachEvent("onDOMContentLoaded", function(){
ready()
});
In ready function check the value of the radio button.
Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!
<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});
Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event
You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.
lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function
i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).