AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of danz67
danz67
Flag for Italy asked on

JQuery Mobile - Get Value From InputText

Hi,

How do I get the value of a field in order to then upgrade?

<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=VALUE FROM INPUTTEXT"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>

Open in new window


Saluti, Daniele
jQueryWeb Development
Avatar of undefined
Last Comment
Hagay Mandel
8/22/2022 - Mon
Hagay Mandel
<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST[''INPUT TEXT NAME]. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>

Pay attention, the input component must have a 'name' attribute!!

<input type="text" name="last_name" id="" />
danz67
ASKER
Thanks for your reply.
I have test so:

<div data-role="content" data-theme="c">
        		<label for="ragioneSociale">Ragione Sociale:</label>
			<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
			<label for="idCliente">idCliente:</label>
			<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
			<a rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
		</div>

Open in new window


But the value is empity
http://localhost:8888/mobile/myapp/update_cliente.php?idCliente=1&RagioneSociale=

Open in new window


What is my error?

Regards, Daniele
Hagay Mandel
I thought you were relating to posted form.
In your case, as I understand your need, you want the content of the input text to be injected /appended to the href attribute of the a tag.
As it is part of the current page, it can only be done via JavaScript:

<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
		});
	});	
</script>

Open in new window


If you already use jQuery, omit my call to it.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
danz67
ASKER
I did everything you suggested but unfortunately it still does nothing.

http://localhost:8888/mobile/myapp/update_cliente.php?idCliente=1&RagioneSociale=

Open in new window

Hagay Mandel
Check this demo.
The lower div contains the complete a tag, as you type something in the ragioneSociale input field
danz67
ASKER
I see, but I do not understand what the problem is: (
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Hagay Mandel
What problem?!
danz67
ASKER
Still does not work, I may have misunderstood me, google translator sometimes is not accurate. I copied the code that is in the demo link you posted and now the page is not displayed because there is an error in the code.
I'm sorry but I can not get out, only you can help, be patient
Hagay Mandel
Give a link to the page.
Your help has saved me hundreds of hours of internet surfing.
fblack61
danz67
ASKER
Want a link to the page? If you can not until tomorrow, I did everything locally, tomorrow morning load on a host.

Here my index.php page

<?php
include 'connection.php';
$conn = new PDO("mysql:host=$mysql_host;$mysql_db",$mysql_user,$mysql_pass);

$sql = "select * from clienti"; // limit 0,10"; // you may want to limit the results for big tables to the firs 10 by adding LIMIT 0,10 at the end of the query.
$result = mysql_query($sql);
?>

<!DOCTYPE html> 
<html> 
	<head> 
	<title>MyApp Base</title> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>



<script type="text/javascript">
    
    function resetTextFields()
    {
        $("#ragioneSociale").val("");
        $("#citta").val("");
    }

    function onSuccess(data, status)
    {
        resetTextFields();
        // Notify the user the new post was saved
        $("#message").fadeIn(2000);
        data = $.trim(data);
        if(data == "OK")
        {
            $("#message").css("background-color", "#ffff00");
            $("#message").text("Feed is saved");
	    window.location.href="clienti.php"
        }
        else
        {
            $("#message").css("background-color", "#ff0000");
            $("#message").text(data);
        }
        $("#message").fadeOut(5000);
    }

$(document).on('pageinit', '#addNewCustomer', function() {
    $("#submit").click(function(e){
 
        var formData = $("form#newClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "insert_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
 
        e.preventDefault();
    });
});

$(document).on('pageinit', '#editCustomer', function() {
    $("#submitCliente").on("click", function(e){
 
        var formData = $("form#updateClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "update_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
    });
});

	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
		});
	});	

</script>

<body>
	
<div data-role="page" id="elenco">
	<div data-role="header">
		<h1>Clienti</h1>
	<a href="#addNewCustomer" data-icon="plus" data-role="add">Aggiungi</a>
	</div><!-- /header -->
	
	<div data-role="content">	
	    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Cerca..." >
	    	<?php
		$html;
		while ($r = mysql_fetch_object($result)) {
	    		echo '<li><a href="#editCustomer'.$r->idCliente.'">'.$r->RagioneSociale.'</a></li>';
			$html .=
	       '<div data-role="page" id="editCustomer'.$r->idCliente.'" data-theme="a">
		<div data-role="header">
		    <h1>Dati Cliente</h1>
		    <a href="clienti.php" data-icon="arrow-l" data-rel="back">Torna</a>
		</div><!-- /header -->
	
<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="'.$r->RagioneSociale.'"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="'.$r->idCliente.'"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente='.$r->idCliente.'&RagioneSociale=' . $_POST['ragione_Sociale']. '"data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
  <div id='output'></div></div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
      $('#output').html($('#rg_link').attr('href'));
		});
	});	
</script>		
		<div data-role="footer">
			<h4></h4>
			<a rel="external" href="delete_cliente.php?idCliente='.$r->idCliente.'" data-icon="delete" class="ui-btn-right">Elimina</a>
		</div><!-- /footer -->
		</div>';
		}
		?>
	    </ul>
	</div>
	
	<div data-role="footer">
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="addNewCustomer">
	<div data-role="header">
		<h1>Nuovo Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="newClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submit" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="modificaCustomer">
	<div data-role="header">
		<h1>Modifica Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="updateClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submitCliente" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<?php
echo $html;
?>
</body>
</html>

Open in new window

Hagay Mandel
Since it's a php file with data from mysql database, and I don't have the data, run the page, and provide the actual rendered html.
danz67
ASKER
Here the table structure:

DB_NAME = gestionale

CREATE TABLE `clienti` (
  `idCliente` int(10) NOT NULL AUTO_INCREMENT,
  `RagioneSociale` varchar(50) DEFAULT NULL,
  `Cognome` varchar(50) DEFAULT NULL,
  `Nome` varchar(50) DEFAULT NULL,
  `DataNasc` varchar(10) DEFAULT NULL,
  `LuogoNasc` varchar(50) DEFAULT NULL,
  `ProvNasc` varchar(50) DEFAULT NULL,
  `StatoNasc` varchar(50) DEFAULT NULL,
  `CodFisc` varchar(50) DEFAULT NULL,
  `pIva` varchar(50) DEFAULT NULL,
  `Indirizzo` varchar(50) DEFAULT NULL,
  `Citta` varchar(50) DEFAULT NULL,
  `ProvRes` varchar(50) DEFAULT NULL,
  `Cap` varchar(50) DEFAULT NULL,
  `ANnotazioni` longtext,
  `Refer` varchar(50) DEFAULT NULL,
  `Telefono` varchar(50) DEFAULT NULL,
  `Cellulare` varchar(50) DEFAULT NULL,
  `AltroRec` varchar(50) DEFAULT NULL,
  `Fax` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `Note` longtext,
  `paziente` tinyint(1) DEFAULT '0',
  `Categoria` varchar(50) DEFAULT NULL,
  `Definizione` varchar(50) DEFAULT NULL,
  `Settore` varchar(50) DEFAULT NULL,
  `rivenditore` tinyint(1) DEFAULT '0',
  `CodiceCliente` int(10) DEFAULT NULL,
  `Pagamento` varchar(50) DEFAULT NULL,
  `Tessera` int(10) DEFAULT NULL,
  `Listino` varchar(255) DEFAULT NULL,
  `idlistino` varchar(255) DEFAULT NULL,
  `USERNAME` varchar(20) DEFAULT NULL,
  `PASS` varchar(20) DEFAULT NULL,
  `idMachine` varchar(50) DEFAULT NULL,
  `accountattivo` tinyint(1) DEFAULT '0',
  `messenger` varchar(50) DEFAULT NULL,
  `skype` varchar(50) DEFAULT NULL,
  `yahoo` varchar(50) DEFAULT NULL,
  `icq` varchar(50) DEFAULT NULL,
  `sonork` varchar(50) DEFAULT NULL,
  `facebook` varchar(50) DEFAULT NULL,
  `badoo` varchar(50) DEFAULT NULL,
  `idAgente` int(11) DEFAULT NULL,
  `Agente` varchar(120) DEFAULT NULL,
  `barcode` varchar(13) DEFAULT NULL,
  `idfidelity` int(11) DEFAULT NULL,
  `fidelity` varchar(120) DEFAULT NULL,
  `totpunti` int(11) DEFAULT '0',
  `maturato` decimal(19,2) DEFAULT '0.00',
  `puntitotali` decimal(19,2) DEFAULT '0.00',
  `puntiutilizzati` decimal(19,2) DEFAULT '0.00',
  `puntidisponibili` decimal(19,2) DEFAULT '0.00',
  `consenso_dati` tinyint(1) DEFAULT '0',
  `aliq_pers` tinyint(1) DEFAULT '0',
  `aliquota` int(2) DEFAULT NULL,
  PRIMARY KEY (`idCliente`),
  UNIQUE KEY `idPaziente` (`idCliente`),
  KEY `CodiceCliente` (`CodiceCliente`),
  KEY `idlistino` (`idlistino`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Hagay Mandel
I don't need the mysql table, What I asked for was the index.php source file as it is rendered in the browser, and not in an editor!
Simply run the file in a browser, copy the source, and paste it here.
danz67
ASKER
the point is this, the page is not displayed in the browser performed after putting the code that you provided me.

Browser result page
ASKER CERTIFIED SOLUTION
Hagay Mandel
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
danz67
ASKER
I have run your last file and now not generate error in the browser,
when press edit button i get this page in the browser.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>MyApp Base</title> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>



<script type="text/javascript">
    
    function resetTextFields()
    {
        $("#ragioneSociale").val("");
        $("#citta").val("");
    }

    function onSuccess(data, status)
    {
        resetTextFields();
        // Notify the user the new post was saved
        $("#message").fadeIn(2000);
        data = $.trim(data);
        if(data == "OK")
        {
            $("#message").css("background-color", "#ffff00");
            $("#message").text("Feed is saved");
	    window.location.href="clienti.php"
        }
        else
        {
            $("#message").css("background-color", "#ff0000");
            $("#message").text(data);
        }
        $("#message").fadeOut(5000);
    }

$(document).on('pageinit', '#addNewCustomer', function() {
    $("#submit").click(function(e){
 
        var formData = $("form#newClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "insert_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
 
        e.preventDefault();
    });
});

$(document).on('pageinit', '#editCustomer', function() {
    $("#submitCliente").on("click", function(e){
 
        var formData = $("form#updateClienteForm").serialize();
 
        $.ajax({
            type: "POST",
            url: "update_cliente.php",
            cache: false,
            data: formData,
            success: onSuccess
        });
    });
});

	$(document).ready(function() {
		
		var base_attr = $('#rg_link').attr('href');
		$('#ragioneSociale').keyup(function() {
			$('#rg_link').attr('href', base_attr + $('#ragioneSociale').val());
			$('#output').html($('#rg_link').attr('href'));
		});
	});	

</script>

<body>
	
<div data-role="page" id="elenco">
	<div data-role="header">
		<h1>Clienti</h1>
	<a href="#addNewCustomer" data-icon="plus" data-role="add">Aggiungi</a>
	</div><!-- /header -->
	
	<div data-role="content">	
	    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Cerca..." >
	    	<li><a href="#editCustomer12">ta</a></li>	    </ul>
	</div>
	
	<div data-role="footer">
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="addNewCustomer">
	<div data-role="header">
		<h1>Nuovo Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="newClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submit" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="modificaCustomer">
	<div data-role="header">
		<h1>Modifica Cliente</h1>
	</div>

	<div data-role="content">
	    <form id="updateClienteForm" method="post">
                <div data-role="fieldcontain">
                    <input type="text" name="ragioneSociale" id="ragioneSociale" value="" placeholder="Ragione Sociale" />
		    <input type="text" name="citta" id="citta" value="" placeholder="Citta'"/>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a data-icon="delete" data-role="button" data-direction="reverse" data-rel="back">Annulla</a></div>
                        <div class="ui-block-b"><button data-icon="check" data-theme="b" id="submitCliente" type="submit">Salva</button></div>
                    </fieldset>
                    
		    <h3 id="#elenco"></h3>
                </div>
            </form>
        </div>

	<div data-role="footer">
		<h1></h1>
	</div>
</div><!-- /page -->

<div data-role="page" id="editCustomer12" data-theme="a">
		<div data-role="header">
		    <h1>Dati Cliente</h1>
		    <a href="clienti.php" data-icon="arrow-l" data-rel="back">Torna</a>
		</div><!-- /header -->
	
<div data-role="content" data-theme="c">
	<label for="ragioneSociale">Ragione Sociale:</label>
	<input type="text" name="ragione_Sociale" id="ragioneSociale" value="ta"/>
	<label for="idCliente">idCliente:</label>
	<input type="text" name="idCliente" id="idCliente" value="12"/>
	<a id="rg_link" rel="external" href="update_cliente.php?idCliente=12&RagioneSociale=" "data-icon="delete" data-theme="b" class="ui-btn-right">Salva</a>
  <div id="output"></div></div>
		<div data-role="footer">
			<h4></h4>
			<a rel="external" href="delete_cliente.php?idCliente="12" data-icon="delete" class="ui-btn-right">Elimina</a>
		</div> 
		</div></body>
</html>

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
danz67
ASKER
You're doing a lot of work to help me, if we get the solution I'll give you 500 points, thanks
Hagay Mandel
Did you check the functionality?
Now, when clicking on 'Aggiungi', entering something in the 'Ragine sociale' input field, clicking 'Annulla' and then on th 'ta' button, shows the put put div with the complete href attribute.
danz67
ASKER
Not understand, sorry
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Hagay Mandel
'Aggiungi' -> [some data in the Ragine sociale input]  -> 'Annulla' -> 'ta' button.

Look at the output
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent