Hej,
I want to transfer the value of a radio button within a javascript to a new page using get. But nothing happens when I click on the radiobutton.
Unfortunately I don't know what to do and hope for your knowledge.
Thanks for your help!
Here is the script:
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
$('#total_records').text(data.length);
var html = '';
if(data.length > 0)
{
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td> <input type="radio" name="auswahl" onclick="window.location.href = "kunden_bearbeiten.php?var=value" value="+data[count].id+"> </td>';
html += '<td>'+data[count].id+'</td>';
html += '<td>'+data[count].firma+'</td>';
html += '<td>'+data[count].vorname+'</td>';
html += '<td>'+data[count].nachname+'</td>';
html += '<td>'+data[count].strasse+'</td>';
html += '<td>'+data[count].plz+'</td>';
html += '<td>'+data[count].ort+'</td></tr>';
}
}
else
{
html = '<tr><td colspan="5">Kein Eintrag gefunden</td></tr>';
}
$('tbody').html(html);
}
})
}
$('#search').click(function(){
var query = $('#tags').val();
load_data(query);
});
});
</script>
It is because you listening to click event i mostly use onchange event. This will work for you.
<input type="radio" value="me" onchange="window.location='shop.php?value=' + this.value">
I've found a solution, that works for me. I changed the type from radio to submit.
<form method="get"><input class="ButtonSelect" type="submit" name="auswahl" formaction="kunden_bearbeiten.php?var=value" value="'+data[count].id+'"></form>
Related
I have a table element that is loaded by jQuery and have a hidden input element on each row of my table and a button to open a pop up.
My problem is that when I try to get the value of hidden input when the button is clicked, I am not getting the value and it says undefined (I have used a jQuery function to get the value in click event of the button)
// function to get the hidden input value
$(document).on("click", '#registerhere', function(event) {
var id = $(this).find('#gameid').val();
console.log(id);
alert(id);
$colinforeg = $('#exampleModal');
$colinforeg.modal('show');
});
// ajax function to load the table
$.ajax({
url: 'allevents.php',
dataType: 'json',
type: 'post',
success: function(data, textStatus, jQxhr) {
console.log(data);
$.each(data, function (i, item) {
console.log(item[0]);
var events = '<tr>';
events += '<td>'+item[1]+'</td>';
events += '<td>'+item[4]+'</td>';
events += '<td>'+item[5]+'</td>';
events += '<td>'+item[6]+'</td>';
events += '<td>'+item[2]+'</td>';
events += '<td>';
events += '<button type="button" class="btn btn-primary" id="registerhere"> Register Here';
events += '</button>';
events += '<input type="hidden" id="gameid" value="'+item[0]+'">';
events += '</td>';
events += '</tr>';
$('#events').append(events);
});
},
Firstly, you are repeating the same id attributes in each appended row which is invalid. If you want to group common elements use classes instead.
With regard to the DOM traversal issues, note that the #gameid element isn't a child of the button, so find() isn't going to work there. You could instead get the closest('tr') and use find() from there:
// function to get the hidden input value
$(document).on("click", '.registerhere', function(e) {
var id = $(this).closest('tr').find('.gameid').val();
console.log(id);
// work with your modal here...
});
// ajax function to load the table
var events = '<tr>';
events += '<td>';
events += '<button type="button" class="btn btn-primary registerhere">Register Here</button>';
events += '<input type="hidden" class="gameid" value="foo">';
events += '</td>';
events += '</tr>';
$('#events').append(events);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tbody id="events"></tbody>
</table>
Currently the date and year is being verified but I would like to add a checkbox to the list.
Form code:
var html = '';
html += '<div class="ac-overlay"></div>';
html += '<div class="ac-container">';
html += '<h2>' + settings.title + '</h2>';
html += '<p>' + copy.replace('[21]','<strong>'+settings.minAge+'</strong>'); + '</p>';
html += '<div class="errors"></div>';
html += '<div class="fields"><select class="month">';for(var i=0;i<months.length;i++){
html += '<option value="'+i+'">'+months[i]+'</option>'}
html += '</select>';
html += '<input class="day" maxlength="2" placeholder="01" />';
html += '<input class="year" maxlength="4" placeholder="2016"/>';
html +="<br><br>";
html +='<p><input class="smoker" type="checkbox"/>Please verify that you are a smoker.</p>';
html +="<br>";
html += '<button>Submit</button></div></div>';
Validation script:
validate : function(){
_this.errors = [];
if (/^([0-9]|[12]\d|3[0-1])$/.test(_this.day) === false) {
_this.errors.push('Day is invalid or empty');
};
if (/^(19|20)\d{2}$/.test(_this.year) === false) {
_this.errors.push('Year is invalid or empty');
};
_this.clearErrors();
_this.displayErrors();
return _this.errors.length < 1;
},
I played around a bit with the following code but something is missing:
if ("Not sure what to enter here to validate the checkbox.".test(_this.smoker) === false) {
_this.errors.push('You have not selected if you are a smoker');
};
Was a bit of a work around but ended up changing the Checkbox to enable and disable the verify button.
$(document).ready(function(){
$('#isAgeSelected').change(function(){
if(this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
html +="<br><br>";
html += '<p><input type="checkbox" id="isAgeSelected"/> Please verify the date above is correct.';
html += '<div id="autoUpdate" class="autoUpdate" style="display:none"><button>Submit</button></div>';
html += '</div></div>';
See how it works here: http://jsfiddle.net/3WEVr/1135/
I'm working with jQuery Mobile in a google web app and just having some issues selecting a tag. More specifically, I have content that is loaded from an external source so need to have a loading page initially. Once the external source is available I then update the page with the content using jQuery. Included in this content is an input tag. The issue is when I update the page, I cannot then cannot find the value of this input tag.
Here is my code below:
(intial html - Before content is loaded)
<div class="ui-body ui-body-a">
<div id="googleList" >
<fieldset data-role="controlgroup" data-mini="true" >
<input type="checkbox" name="checkbox-v-6a" id="checkbox-1-a">
<label for="checkbox-v-6a">Loading . . . </label>
</fieldset>
</div>
</div>
Here is my jQuery to update the code above when the new content comes in:
function showTaskList(tasks)
{
//Generate HTML
var htmlToInsert = "<fieldset data-role=\"controlgroup\" data-mini=\"true\" >";
for(var i = 0; i < tasks.length; i++)
{
htmlToInsert += "<input type=\"checkbox\" data-id=\"" + tasks[i][1] + "\" name=\"checkbox-" + i + "-a\" id=\"checkbox-" + i + "-a\" class=\"custom taskCheckBox\" ";
if(tasks[i][2] != undefined)
htmlToInsert += "checked=\"checked\"";
htmlToInsert += " />";
htmlToInsert += "<input id=\"currency-controlgroup1\" data-id=\"" + tasks[i][1] + "\" type=\"text\" value=\"" + tasks[i][0] + "\" data-wrapper-class=\"controlgroup-textinput ui-btn\" class=\"taskinputBox\">";
}
//Insert HTML into site
$("#googleList").html(htmlToInsert + "</fieldset>");
//Refresh List
$("#googleList").trigger("create");
}
Here is my code to get the input tag value
$(document).ready(function(){
function processTaskList()
{
console.log("Test");
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("data-id");
console.log("CheckBox:" + checkBoxId );
});
}
});
CheckBoxId keeps coming back undefined when I click on one of the checkboxes. I want to be able to read the data-id value. I'm not sure how to fix this? Any help is appreciated.
I tested the code below again, and it works - Thanks for your help
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("id");
console.log("CheckBox:" + checkBoxId );
});
HTML:
<input type="text" id="inputsNum" />
<div id="content"></div>
jQuery:
$("#inputsNum").bind('change paste keyup', function () {
var count = $(this).val(),
content = "";
for (var i = 0; i < count; i++)
{
content += $(this).append($('<input>').prop('type', 'text'));
}
$(this).next().html(content);
});
Hi,
want to let the user to add multiple text inputs based on value he provided
i wrote the above code but i'm getting [object Object] error repeated actually based on the value i provided , means its working but why its doesn't append the text inputs !
need your help
thank you
Here is the working JS Fiddle
$(document).ready(function() {
$("#inputsNum").bind('change paste keyup', function () {
var count = $(this).val(),
content = "";
for (var i = 0; i < count; i++)
{
content += '<input type="text" />';
}
$('#content').html(content);
});
});
You can try replacing content += $(this).append($('<input>').prop('type', 'text')) with content += "<input type='text' />";
The append function that you are using returns an object and not the HTML as string like you expect it to. Thus when you add it as a string, the toString() method of the object converts it to [object Object] and that gets appended to your HTML
I have a form where you can generate automatically additional form boxes and send them to be handeled at PHP-script. How ever as I am quite lousy with Javascript and I am running in the following problem.
When the form is filled out I can see everything is filled out on the URL, except the the boxes created with JS (every box has unique name!). My guess is that the JS generated field drop out of the form tags, but can not figure out how to fix this. I would appreciate if someone could give me pointers or tell me how to fix this. I shortened the code for clarity (if something got left out please tell me). If someone is wondering why I am not using the form action. It´s because drupal tries to forward the site to wrong place if I do (surprise, not too good with drupal either :D)
<?php
require_once('customer.php');
?>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "<div class='product'><tr><td>Sku/ID: "+intTextBox+": <input type='text' name='sku_" + intTextBox + "'/></div>";
contentID.appendChild(newTBDiv);
}
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
</script>
<table>
<form name="activate">
<div class='cu'>
<tr><td>Sku/ID (oma): <input type="text" name="sku"></td>
<td><p><a href="javascript:addElement();" >Add product</a>
<a href="javascript:removeElement();" >Remove product</a></p></td></tr>
<div id="content"></div>
</div>
<tr> <td><input type="submit" value="Submit"></td> </tr>
</form>
Customer.php
<?php
if(isset($_GET["sku_1"]))
{
echo "found it";
}
else
echo "did not find it";
?>
Any help would be much appreciated!
You could dynamically change the url of the form tag to include textbox values:
var textboxes = document.getElementsByTagName("input");
for (var i = 0; i < textboxes.length; i++){
var data = "?";
if (textboxes[i].type == "text") {
data += (data == "?" ? "" : "&") + textboxes[i].name + "=" + textboxes[i].value;
}
}
form.action += data;
I haven't tested this, you might have to dynamically add all elements
[UPDATE]
If you have trouble with the form you can try using an absolute path, if you aren't already.