I have a jQuery vote script that allows a user to vote on a poll that is displayed on a page. On a particular page there are many polls being displayed (via forms) and the jQuery grabs the values of the inputs in a particular form and send the data over to a query.php page.
This is what a sample poll page looks like:
QUESTION 1:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user1" name="to" />
<input type="hidden" name="pid" value="1"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
QUESTION 2:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user2" name="to" />
<input type="hidden" name="pid" value="2"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
And this is the jQuery Script I'm running:
var ajax_load = "<img src='images/ajax-loader.gif' alt='loading...' />";
$("form.poll_query > input[type='radio']").click(function(e) {
e.preventDefault();
var form= $(this).closest("form");
var pid = $("input[name='pid']", form).val();
var ans = $(this).val();
var page = $("input[name='page']", form).val();
var to = $("input[name='to']", form).val();
$(this).closest("#poll").html(ajax_load);
$.post(
"query.php?module=vote",
{answer: ans, pid: pid, to: to, page: page},
function(responseText){
$("#poll").hide(0,function() {
$(".result").html(responseText).fadeIn(1500);
});
},
"html"
);
});
When voting in the first poll everything renders correctly. The 'responseText' that is returned is displayed in the page where it is supposed to. But for every subsequent poll on the page the 'ajax_load' loads correctly where it is supposed to but the 'responseText' is loaded in the .result class of the FIRST poll.
This is what the page initially looks like:
Question 1?
o YES
o NO
Question 2?
o YES
o NO
if a particular user votes on question 2 this is what the page should look like:
Question 1?
o YES
o NO
Question 2
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Instead this is what actually happens (even though the user voted on question 2):
Question 1?
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Question 2
o YES
o NO
But if the user votes on question 1 the results is loaded properly:
Question 1?
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Question 2
o YES
o NO
I've tried changing $(".result").html(responseText).fadeIn(1500); to $(this).closest(".result").html(responseText).fadeIn(1500);
But still no luck.
You have duplicate element IDs for poll. You should use a class instead, then make your selectors in the callback more precise. You're on the right track with $(this).closest().
You'll need to do something like:
var pollArea = $(this).closest(".poll_area");
$.post(... , function(responseText) {
pollArea.find(".poll").hide(0,function() {
pollArea.find(".result").html(responseText).fadeIn(1500);
});
Note that the .poll and .result selectors are now scoped by the .poll_area that encloses the clicked radio button.
I'd suggest using an element based on an ID rather than a class. Therefore wrap each question into a div with a unique ID
<div id="q1">
QUESTION 1:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user1" name="to" />
<input type="hidden" name="pid" value="1"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
$("#q1 .result").html('...');
Related
i make a html site. there is questions on the site. i made it with form .After clicking on the button, I want to see all of the answers on the same page.i dont want as alert. how can i do it?
I apologize for the misspellings.
<script>
function findSelection()
{
var serieList=document.getElementsByName('serie')
for (var i=0; i<serieList.length;i++)
{
if(serieList[i].checked)
{
}
}
var markaList=document.getElementsByName('marka')
for (var i=0; i<markaList.length;i++)
{
if(markaList[i].checked)
{
alert(markaList[i].value)
}
}
var yerList=document.getElementsByName('yer')
for (var i=0; i<yerList.length;i++)
{
if(yerList[i].checked)
{
alert(yerList[i].value)
}
}
var nasilList=document.getElementsByName('nasil')
for (var i=0; i<nasilList.length;i++)
{
if(nasilList[i].checked)
{
alert(nasilList[i].value)
}
}
}
</script>
<html>
<head>
<title>Web Tasarım Anketi </title>
</head>
<body style="background-color:#d3ea93">
<center> <h1 style="color:red"> ANKET </h1> </center>
<form >
<fieldset><legend>Soru 1 </legend>
En sevdiğiniz yabancı dizi? </br>
<label> <input type="radio" name="serie" value="Game of Thrones">Game of Thrones </label>
<label> <input type="radio" name="serie" value="Person of İnterest">Person of Interest </label>
<label> <input type="radio" name="serie" value="South Park">South Park </label>
<label> <input type="radio" name="serie" value="Black Mirror">Black Mirror </label>
</fieldset>
</form>
<form >
<fieldset><legend>Soru 2 </legend>
En sevdiğiniz bilgisayar markası? </br>
<label> <input type="radio" name="marka" value="Asus">Asus </label>
<label> <input type="radio" name="marka" value="HP">HP </label>
<label> <input type="radio" name="marka" value="Toshiba">Toshiba </label>
<label> <input type="radio" name="marka" value="Dell">Dell </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 3 </legend>
Nerede yaşamak istersiniz?</br>
<label> <input type="radio" name="yer" value="Türkiye">Türkiye </label>
<label> <input type="radio" name="yer" value="Mars">Mars </label>
<label> <input type="radio" name="yer" value="Avustralya">Avustralya </label>
<label> <input type="radio" name="yer" value="Yeni Zelanda">Yeni Zelanda </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 4 </legend>
Nasıl ölmek istersiniz?</br>
<label> <input type="radio" name="nasil" value="Araba Kazasında ">Araba Kazası </label>
<label> <input type="radio" name="nasil" value="Uzay Boşluğunda">Uzay Boşluğunda </label>
<label> <input type="radio" name="nasil" value="Ecelimle">Ecelimle </label>
<label> <input type="radio" name="nasil" value="Maganda Kurşunu">Maganda Kurşunu </label>
</fieldset>
</form>
<input type="button" id="btnKaydet" value="Kaydet" onclick="findSelection()"></input>
</body>
</html>
You can use javascript to achieve this but ultimately you want to learn a server-side programming language, like php. To me php is the best option.
If you Google form and click the mozilla device docs for it you'll see an attribute called action, this attribute tells the form where to go or what to do (with inline javascript, but I highly recommend against this). You'll also find an attribute called method. Method is responsible for how the form handles the input values. The two most common values are post and get.
I usually only ever use post, because I'm posting the data to a script.
The most common use is something like
<form method="post" action="/area/scripts/post/form.php">
However, getting really fun with an mvc, would more look like:
<form method="post" action="<?php echo $this->getFormAction(); ?>">
Then in your form.php page you handle the data. To see what I mean, place this in your form.php for now:
<?php
var_dump($_POST) ;
This will display your form data.
To link it back to your idea of displaying on same page, you can also use ajax, however this means including jquery into your site. It 100% makes life easier but it does increase your sites size. Of course you can opt for the .min script but still, you include in every page, so..
Anyway. Using pure html I'm not sure is possible, javascript is a browser side programming language and I'm not sure entirely if you can assign values dynamically, you probably can but I'm no javascript expert.
I recommend using php for this as it also makes it secure (if you follow convention and do it correctly using safe code)
Also, I prefer this as a comment as an actual answer because it doesn't directly deal with your problem or its associated tags, but the character limit is not enough for a comment like this. Feel free to downvote if preferred and I'll simply remove if it gets to -3
Update after seeing comment
To combine variables in javascript you use + to concat strings.
E.g.
var message = document.getElementById('myId') + ' ' + document.getElementById('myIdTwo');
alert(message);
This only an example of how to use, but this should be what you're looking for.
Good luck!
you can do it via jquery give all your fields id
and write like this
<script>
$(document).ready(function()
{
$("#Button1).click(function()
{
$("#abc1").val($("#abc").val());
})
</script>
<body>
<input type="text" id="abc" />
<input id="Button1" type="button" value="button" />
<input type="text" id="abc1" />
</body>
I currently have a chart pulling in data from a local JSON file. I now need to submit data via a form to update the chart dynamically. I know Highcharts has an addPoint method which should work, just need some guidance on how to pass my form data to this method.
<form id="add_data">
<p>
<input type="date" name="date" id="human" value="date" />
</p>
<p>
<input type="integer" name="amount" id="amount" value="amount" />
</p>
<p>
<input type="radio" name="request_type" id="human" value="human" />
<label for="human">Human</label>
</p>
<p>
<input type="radio" name="request_type" id="good" value="good" />
<label for="good">Good</label>
</p>
<p>
<input type="radio" name="request_type" id="bad" value="bad" />
<label for="bad">Bad</label>
</p>
<p>
<input type="radio" name="request_type" id="whitelist" value="whitelist" />
<label for="whitelist">Whitelist</label>
</p>
<input id="submit" type="submit" value="Submit">
</form>
The Highcharts docs use this as an example, which is what I am trying to use, but instead of hard coding the data I need to pass in my form data. I think...if I am totally off please let me know. Any help is appreciated.
$('#add_data input:radio[name=request_type]').click(function() {
$index = $('#add_data input:radio[name=request_type]').index(this);
});
$('#submit').click(function() {
var chart = $('#container').highcharts(),
amount = parseFloat($('#amount').val());
chart.series[$index].addPoint(amount);
});
In your click action you need to extract values from inputs. For example if you need to add point with value from input AMOUNT it should be used like:
$('#submit').click(function() {
var chart = $('#container').highcharts(),
point = parseFloat($('#amount').val());
chart.series[0].addPoint(point);
i += 1;
});
I am totally new to web development so please do not leave any negative marks for this question. If you do not like this question please leave it as for another one who wish to answer.
There are 2 check box groups 'main' & 'sub.
if user select 'Main_CheckBox_1' from 'main' need to show 'Sub_Checkbox_1_Main_1' and 'Sub_Checkbox_2_Main_1' from 'sub'
and also if user select 'Main_CheckBox_2' need to show 'Sub_Checkbox_1_Main_2' & 'Sub_Checkbox_2_Main_2'
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>
<div id = "subDiv" >
<input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
1. how to identify which check box is selected from 'main' ?
2. how to show/hide check boxes in 'sub' depending on 'main' check boxes ?
Thanks you
1) Give all inputs with name main input[name='main'] the trigger to act on change. Then this.value will tell you which one in particular was changed.
2) Make a function that takes this.valueas parameter and then toggle (hide/show) the two corresponding checkboxes and the next element ()
$(document).ready(function() {
$("input[name='main']").change(function() {
showHide(this.value);
});
});
function showHide (chkbx) {
var k = "input[value='Sub_1_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
var k = "input[value='Sub_2_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
}
It'd be easier if you'd grouped your sub checkboxes like below. Use CSS to hide all groups during load. This would produce a lot more cleaner and readable DOM/code.
$(function() {
var $groups = $("#subDiv .group");
$('#mainDiv :checkbox').on("change", function() {
var index = parseInt($(this).val().slice(-1), 10) - 1;
$groups.eq(index).toggle(this.checked).siblings().hide();
});
});
#subDiv .group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1" /><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_2" /><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_3" /><span>Main_CheckBox_3</span><br/>
</div>
<div id = "subDiv" >
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_1" /><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1" /><span>Sub_Checkbox_2_Main_1</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_2" /><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2" /><span>Sub_Checkbox_2_Main_2</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_3" /><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3" /><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
</div>
I was trying to change the text of a submit button on change of radio button .My code for html part is :
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="Yes"/>
<label for="segment1" id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label>
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label>
<input type="submit" value="send" name="sendbutton" id="sendbutton"/>
My javascript code is as follow :
function check(){
var x;
x=document.f1.radio-view;
if(x[0].checked){
document.f1.sendbutton.value="PROCEED";
}
else if(x[1].checked){
document.f1.sendbutton.value="SEND";
}
}
But its not changing the test.What can be the reason for it?
If you decide to address elements directly, use their names properly:
var x = document.f1['radio-view'];
... as you cannot access with the dot syntax the properties which names are not valid identifiers. document.f1.radio-view is treated as document.f1.radio - view, which apparently makes no sense.
But actually, I'd rather skip this part completely: if radio-button is clicked, it's definitely set as checked. So this...
<input type="radio" onclick="check(this)" ... />
...
function check(button) {
document.f1.sendbutton.value = button.value === 'Yes' ? 'PROCEED' : 'SEND';
}
... should be quite enough, as this demo shows.
See Demo here: http://jsfiddle.net/Tngbs/
//HTML
<form>
<fieldset id="SPserviceStatus" data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Group<span class="required">*</span></legend>
<input type="radio" name="ss" id="s1" value="Yes">
<label for="serviceStatus1">Yes</label>
<input type="radio" name="ss" id="s2" value="No" checked="checked">
<label for="serviceStatus2">No</label>
</fieldset>
<input type='submit' id='submitBtn' value='SUBMIT' />
</form>
//JS
$("#s1").click(function () {
document.getElementById("submitBtn").value = "Yes Clicked";
return false;
});
$("#s2").click(function () {
document.getElementById("submitBtn").value = "No Clicked";
return false;
});
Is it possible to write a Javascript function to delete a drop down when it is blank?
<form name="myform" method="post" enctype="multipart/form-data" action="" id="myform">
<div>
<label id="question1">1) Draw recognizable shapes</label>
<br />
<input type="radio" value="Yes" id="question1_0" name="question1_0" />
Yes
<input type="radio" value="No" id="question1_1" name="question1_1" />
No
</div>
<div>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
<div>
<label id="question3">3) Hold a pencil</label>
<br />
<input type="radio" value="Yes" id="question3_0" name="question3_0" />
Yes
<input type="radio" value="No" id="question3_1" name="question3_1" />
No
</div>
<input type="submit" value="Delete Drop Down" onclick="return checkanddelete"/>
</form>
If somebody does not select question 2 for example, it deletes question 2 label and the drop down.
Assuming you actually meant radio button groups (and not drop down lists) then firstly your HTML is incorrect, you need to set the name values of each group of radio buttons to be the same:
<input type="radio" value="Yes" id="question1_0" name="question1" /> Yes
<input type="radio" value="No" id="question1_1" name="question1" /> No
Then you need to loop through the list of radio buttons, if none in the group are selected then delete the parent div:
$('input[type=submit]').on('click', function() {
var radioArr = [];
$(':radio').each(function(){
var radName = this.name;
if($.inArray(radName, radioArr) < 0 && $(':radio[name='+radName+']:checked').length == 0)
{
radioArr.push(radName);
$(this).closest("div")
.remove();
}
});
return false; //to stop the form submitting for testing purposes
});
While you are there, you might want to add some <label for=""> tags around your text.
Here is a jsFiddle of the solution.
If your dropdown has an id of DropDown, and you are looking to hide the dropdon on submit click:
function checkanddelete()
{
if ( $('#question2_0.=:checked, #question2_1:checked').length )
$('#dropdown').hide() // Or $('#dropdown').remove() if you do not plan on showing it again.
return false; // if you plan on not submitting the form..
}
Optimization for use in a module for a page include adding appropriate ids and classes to the divs, which I'm assuming that in full code are there, but if you are planning on making UI adjustments I would advise against using a submit button in the mix..
I don't know, what do you mean under "dropdown menu", but here some info, that can help you.
You can set a class name for the all Objects, you want to delete. E.g.
HTML
<div>
<label class='question2' id="question2">2) Competently cut paper </label>
<br />
<input class='question2' type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input class='question2' type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
JS
$(".question2").remove();
As an another solution you can set an ID for the DIV Tag above all of this elements
<div id='block_to_remove'>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
And then remove it in JS
$("#block_to_remove").remove();